jqGrid的subGrid子表格

首先，奉上效果图：

1. subGrid：类型为Boolean，默认false；当设为true的时候，Grid表格的最左边将会添加一列，里面有一个+图标，用于展开子表格；
2. subGridRowExpanded：当点击 + 展开子表格时，将触发此事件方法；
3. subGridRowColapsed：当点击 - 收起子表格时，将触发此事件方法；

subGridRowExpanded有两个参数：subgrid_id 和 row_id

• subgrid_id：子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id。
• row_id ：主表格中所要展开子表格的行的id。
  

示例代码：

<div class="gridPanel">
    <table id="gridTable"></table>
    <div id="gridPager"></div>
</div>

var $gridTable = $("#gridTable");
$gridTable.jqGrid({
    url: "/API/MES/SMTReflux/Load/SMTTempZoneEvent/GetPageListJson",
    postData: { QueryJson: JSON.stringify(queryJson) },
    datatype: "json",
    height: $(window).height() - 180.5,
    autowidth: true,
    colModel: [
        { label: "主键", name: "SMTTempZoneId", index: "SMTTempZoneId", hidden: true },
        { label: "厂区", name: "FactoryName", index: "FactoryName", width: 95, align: 'center', sortable: false },
        { label: "车间", name: "WorkShopName", index: "WorkShopName", width: 95, align: 'center', sortable: false },
        { label: "线别", name: "LineName", index: "LineName", width: 95, align: 'center', sortable: false },
        { label: "炉温程序代码", name: "TempZoneCode", index: "TempZoneCode", width: 100, align: 'center' },
        { label: "链速", name: "ChainSpeed", index: "ChainSpeed", width: 70, align: 'center' },
        { label: "1温区", name: "TempZone01", index: "TempZone01", width: 70, align: 'center' },
    ],
    viewrecords: true,
    rowNum: 30,
    rowList: [30, 50, 100],
    pager: "#gridPager",
    sortname: 'CreateDate desc',
    rownumbers: true,
    rownumWidth: 50,
    shrinkToFit: false,
    gridview: true,
    subGrid: true,
    subGridRowExpanded: function (subgrid_id, row_id) {
        var keyValue = $gridTable.jqGrid('getRowData', row_id)['SMTTempZoneId'];
        var subgrid_table_id = subgrid_id + "_t";
        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>");
        var subgrid_page_id = subgrid_id + "_page";
        $("#" + subgrid_id).append("<div id='" + subgrid_page_id + "' style='text-algin:center'></div>");
        $("#" + subgrid_table_id).jqGrid({
            url: "/API/MES/SMTReflux/Load/SMTTempZoneHistoryEvent/GetPageListJson",
            postData: { QueryJson: JSON.stringify({ KeyValue: keyValue }) },
            datatype: "json",
            height: "100%",
            colModel: [
                { label: '主键Id', name: 'SMTTempZoneHistoryId', index: 'SMTTempZoneHistoryId', width: 80, align: 'left', sortable: true, hidden: true },
                {
                    label: "厂区", name: "FactoryName", index: "FactoryName", width: 95, align: 'center', sortable: false
                },
                { label: "车间", name: "WorkShopName", index: "WorkShopName", width: 95, align: 'center', sortable: false },
                { label: "线别", name: "LineName", index: "LineName", width: 95, align: 'center', sortable: false },
                { label: "炉温程序代码", name: "TempZoneCode", index: "TempZoneCode", width: 90, align: 'center', sortable: false },
                { label: "链速", name: "ChainSpeed", index: "ChainSpeed", width: 70, align: 'center' },
        		{ label: "1温区", name: "TempZone01", index: "TempZone01", width: 70, align: 'center' },
            ],
            caption: "修改记录",
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#" + subgrid_page_id,
            rownumbers: true,
            rownumWidth: 50,
            shrinkToFit: false,
            gridview: true,
            hidegrid: false,
            sortname: 'CreateDate desc',
        });
        $("#" + subgrid_table_id).jqGrid('setLabel', 'rn', "序号", { 'text-align': 'center' }, '');
    }
});
$gridTable.jqGrid('setLabel', 'rn', "序号", { 'text-align': 'center' }, '');

jqGrid方法：

setLabel：给指定列设置一个新的显示名称。有4个参数：

• colname：列名称，也可以是列的位置索引，从0开始；
• data：列显示名称，如果为空则不修改；
• class：如果是 string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；
• properties：设置 label的属性