Jquery datagrid-detailview使用

datagrid-detailview.js下载

效果图：

Ajax

 function InOutOK() {
            //退社_变更完成
            tab = $('#dataTable').datagrid({
                width: '100%',
                singleSelect: true,
                pageSize: 10,
                collapsible: true,
                url: '../ApprovalMattersService.asmx/GetInOutOK',
                striped: true,
                idField: "ID",
                method: "post",
                pagination: true,
                pageSize: 10,
                pageList: [10, 20, 30, 50],
                fitColumns: true,
                rownumbers: true,//行号    
                view: detailview,
                columns: [[
                    { field: 'EmployeeNo', title: '工号', align: "center", width: 10 },
                    { field: 'UserName', title: '姓名', align: "center", width: 10 },
                    //{
                    //    field: 'InOutType', title: '入社退社区分', align: "center", width: 30,
                    //    formatter: function (value, row, index) {
                    //        if (value == 1)
                    //            return "入社";
                    //        else
                    //            return "退社";
                    //    }
                    //},
                    {
                        field: 'DepartmentID', title: '所属部门', align: "center", width: 70,
                        formatter: function (value, row, index) {
                            var a = getDept(row.DepartmentID);
                            return a;
                        }
                    },
                    {
                        field: 'InOutDate', title: '退社时间', align: "center", width: 30, formatter: function (value, row, index) {
                            return row.InOutDateStr;
                        }
                    },
                    { field: 'Memo', title: '备注', align: "center", width: 50 },
                    {
                        field: "修改", title: "修改", align: "center", width: 10, formatter: function (value, row, index) {
                            return "<a href='#'  onclick='Edit(\"" + row.EmployeeNo + "\",\"" + row.InOutType + "\",\"" + row.ID + "\",\"OK\")' target='_self'>修改</a>";
                        }
                    }
                ]],
                onBeforeLoad: function (param) {
                    var gridOpts = $('#dataTable').datagrid('getPager').data("pagination").options;
                    param.isPage = true;
                    param.page = gridOpts.pageNumber;
                    param.rows = gridOpts.pageSize;
                    param.userName = $('#txtselect').textbox("getValue");
                },
                detailFormatter: function (rowIndex, rowData) {
                    if (rowData.DetailCount != "0") {
                        return '<table class="ddv" id="dataRowTable' + rowIndex + '"></table>'
                    }
                    else {
                        return '';
                    }
                },
                onExpandRow: function (rowIndex, rowData) {
                    var ddv = $(this).datagrid('getRowDetail', rowIndex).find('#dataRowTable' + rowIndex);
                    tab3 = ddv.datagrid({
                        title: '修改记录',
                        iconCls: 'icon-ok',
                        url: '<%=ResolveUrl("../ApprovalMattersService.asmx/GetInOutMdifyRecord")%>',
                        striped: true,
                        idField: "Id",
                        method: "post",
                        singleSelect: true,
                        width: fixWidth(0.9),
                        fitColumns: true,
                        rownumbers: true,//行号 
                        columns: [[
                            {
                                field: 'OldInOutDate', title: '原退社时间', width: 60, align: "center", formatter: function (value, row, index) {
                                    var pa = /.*\((.*)\)/;
                                    var unixtime = row.OldInOutDate.match(pa)[1].substring(0, 10);
                                    return getTime(unixtime);
                                }
                            },
                            {
                                field: 'NewInOutDate', title: '实际退社时间', width: 60, align: "center", formatter: function (value, row, index) {
                                    var pa = /.*\((.*)\)/;
                                    var unixtime = row.NewInOutDate.match(pa)[1].substring(0, 10);
                                    return getTime(unixtime);
                                }
                            },
                            {
                                field: 'CreateTime', title: '修改时间', width: 60, align: "center", formatter: function (value, row, index) {
                                    return row.CreateTimeStr;
                                }
                            },
                            { field: 'CreateUserNo', title: '操作人工号', align: "center", width: 60 },
                            { field: 'CreateUserName', title: '操作人姓名', align: "center", width: 60 }
                        ]],
                        onBeforeLoad: function (param) {
                            param.InOutID = rowData.ID;
                        },
                        onResize: function () {
                            tab.datagrid('fixDetailRowHeight', rowIndex);
                            tab.datagrid('fixRowHeight', rowIndex);
                        },
                        onLoadSuccess: function (data) {
                            setTimeout(function () {
                                tab.datagrid('fixDetailRowHeight', rowIndex);
                                tab.datagrid('fixRowHeight', rowIndex);
                            }, 0);
                        }
                    });
                },
                onCollapseRow: function (rowIndex, rowData) {
                    return "";
                },
                onLoadSuccess: function (data) {
                }
            });
        }

页面

  <div class="bloc">
            <div class="title">
                退社_变更完成
            </div>
            <div class="content">
                <div style="clear: both;">
                    <div class="cut">
                        <input id="txtselect" class="easyui-textbox" name="select" style="width: 150px;" data-options="prompt:'请输入员工姓名'" />
                        <div id="divKey" hidden="hidden" style="top: 125px; left: 335px; width: 143px;" class="KeyClass"></div>
                        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="InOutOKSearch()">查询</a>
                    </div>
                    <table id="dataTable"></table>
                </div>
            </div>
        </div>