jqGrid的subGrid子表格

又恐琼楼玉宇

于 2020-04-01 17:07:13 发布

阅读量935

点赞数

分类专栏：表格文章标签： jqgrid

本文链接：https://blog.csdn.net/nnaay_/article/details/105242775

版权

表格专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用jqGrid插件实现主表格与子表格的联动展示，通过设置subGrid属性为true，可在主表格左侧添加展开子表格的+图标。文章深入解析了subGridRowExpanded和subGridRowColapsed事件的触发机制及参数含义，提供了完整的示例代码，帮助读者理解如何动态加载子表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，奉上效果图：
在这里插入图片描述

subGrid：类型为Boolean，默认false；当设为true的时候，Grid表格的最左边将会添加一列，里面有一个+图标，用于展开子表格；
subGridRowExpanded：当点击 + 展开子表格时，将触发此事件方法；
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' }, '');