EasyUI DataGrid View

 

前提一定要引入：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) {
            }
        });

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