EasyUI DataGrid View

http://www.jeasyui.com/easyui/datagrid-detailview.js



前提一定要引入：datagrid-detailview.js
主要是三个属性和普通的datgagrid的属性不同
view: detailview, //DataGird view必须设置的一个属性
detailFormatter: function (index, row) {}
onExpandRow: function (index, row) {//在展开行的时候触发。}

$('#billlist_PaidUse').datagrid({
method: 'post',
url: 'FinancialAuditService.ashx?Method=GetBillList_PaidUse&ContractGuid=' + $("#contractid").val(),
loadMsg: '正在加载数据...',
fitColumns: true, ////为了冻结列！这里一定要设置为false
singleSelect: true,
showFooter: false, //这里 默认隐藏了页脚************
 view: detailview, //DataGird view必须设置的一个属性
detailFormatter: function (index, row) {
var str = '<div style="margin:5px 5px 5px 5px;"><table id="ReceiptGrid_' + index + '"></table><div>'; //收款的列表
return str;
},
onExpandRow: function (index, row) {//在展开行的时候触发。
//这里加载 展开的datagrid, id是ReceiptGrid_+index
//记载完成里面的gird以后记得 重新修复下 当前父grid的高度
$("#billlist_PaidUse").datagrid("fixDetailRowHeight", index);
},
columns: [[
{ title: '唯一guid', field: 'Year', width: 100, hidden: true },
{ title: '年份', field: 'YearTitle', width: 80, align: 'center' },
{ title: '应收金额', field: 'Receivable', width: 80, align: 'right' },
{ title: '已收金额', field: 'Paid', width: 80, align: "right" },
{ title: '欠收金额', field: 'Arrears', width: 80, align: 'right' },
{ title: '有效期限', field: 'TimeLimits', width: 140 }
]],
toolbar: '#tbBillToolPaidUse', // id 为tb的Div 详细 查看前台页面HTML代码
onBeforeLoad: function () {
$(this).datagrid('rejectChanges');
},
onClickRow: function (rowIndex, rowData) {
},
onDblClickRow: function (rowIndex, rowData) {
},
onLoadSuccess: function (data) {
}
});

关键的字已经 加粗。。。。。。。