效果如图:
js代码:
$("#tdg").datagrid({
width: 200,
url: "/Laboratory/ShipmentRegister/LoadData",
queryParams: {
auvp: 'r',
condition: " and State='0' "
},
striped: true,
remoteSort: false,
singleSelect: true,
nowrap: false,
fitColumns: false,
columns: [[
//{ field: 'ck', checkbox: true },
{ field: 'JobNo', align: 'center', title: '计划单号', width: '120' },
{ field: 'CustomerName', align: 'center', title: '客户名称', width: '150' },
{ field: 'SiteName', align: 'center', title: '工地名称', width: '150' },
{ field: 'Project', align: 'center', title: '工程部位', width: '80' },
{ field: 'Cgrade', align: 'center', title: '混凝土级别', width: '75' },
{ field: 'ActSlumpName', align: 'center', title: '实测塌落度', width: '100' },
{ field: 'Volume', align: 'left', title: '生产方量', width: '60' },
]],
fit: true,
view: detailview,
detailFormatter: function (rowIndex, rowData) {
return '<div><table id="tt_' + rowData.Autoid + '"></table></div>';
},
onExpandRow: function (index, row) {
$("#tt_" + row.Autoid).datagrid({
width: 'auto',
height: 'auto',
url: "/Laboratory/ShipmentRegister/LoadProdData",
queryParams: {
JobNo: row.JobNo
},
striped: true,
remoteSort: false,
singleSelect: true,
nowrap: false,
fitColumns: false,
columns: [[
{ field: 'PDate', align: 'center', title: '发货时间', width: '150' },
{ field: 'DocketNo', align: 'center', title: '送货单号', width: '150' },
{ field: 'TruckName', align: 'center', title: '车号', width: '150' },
{ field: 'Volume', align: 'center', title: '销售方量', width: '80' },
{ field: 'TruckCount', align: 'center', title: '车次', width: '75' },
{ field: 'Total', align: 'center', title: '累计方量', width: '100' }
]],
//fit: true, //自适应大小,填充容器
如果fit为true,则视图显示不出来。所以此处把fit属性注释起来
onResize: function () {
$('#tdg').datagrid('fixDetailRowHeight', index);
}, onLoadSuccess: function (data) {
//此处必须有否则第一次展开时"+"号不会跟着移动
setTimeout(function () {
$('#tdg').datagrid('fixDetailRowHeight', index);
},0);
}
});
$('#tdg').datagrid('fixDetailRowHeight', index);
},
onCollapseRow: function (index, row) {
//alert(index);
}
})
当属性fit: true时,展开视图会变成如下图所示的效果: