【EasyUI】DataGrid DetailView（数据表格详细展示）
效果图：
第一步：创建一个HTML页面
第二步：创建数据表格
$("#tt").datagrid({
fit: true,
title: 'DataGrid - DetailView',
border: false,
url: '@Url.Action("Get")',
striped: true,
singleSelect: true,
columns: [[
{ title: 'ID', field: 'ID', halign: 'center', align: 'center', sortable: true, hidden: true }
, { title: '货品编号', field: 'goodsID', width: '20%', halign: 'center', align: 'center', sortable: true }
, { title: '价格', field: 'price', halign: 'center', width: '20%', align: 'center', sortable: true }
, { title: '库存阀值', field: 'threshold', halign: 'center', width: '20%', align: 'center', sortable: true }
, {title: '库存量', field: 'num', halign: 'center', width: '18%', align: 'center', sortable: true}
, { title: '总预购量', field: 'ygnum', halign: 'center', width: '18%', align: 'center', sortable: true},
]],
view: detailview,
detailFormatter: function (rowIndex, rowData) {
return '
';
}
}
, { title: '颜色', field: 'colour', halign: 'center', width: '21%', align: 'center', sortable: true }
, { title: '尺寸', field: 'size', halign: 'center', width: '21%', align: 'center', sortable: true }
, { title: '订购人', field: 'principal', halign: 'center', width: '21%', align: 'center', sortable: true }
, { title: '订购量', field: 'num', halign: 'center', width: '20%', align: 'center', sortable: true }
]],
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
sortName: 'ID',
sortOrder: 'desc',
});
}
});