jqGrid一次加载显示多张表（加载local数据）

最新推荐文章于 2020-12-19 02:55:31 发布

原创最新推荐文章于 2020-12-19 02:55:31 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

jqGrid 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现多个jqGrid表格的样式设置与数据联动加载。首先通过HTML定义表格结构，然后利用JavaScript设定表格样式及数据加载方式。主表格采用POST方式从服务器获取数据，并将数据传递给其他表格进行本地展示。

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

1、html样式

<div name="content">
            <div id="table" style="">
                <div id="divGrid1" style="height:100%;width:100%;">
                    <table id="grid_table1"></table>
                </div>
                <div id="divGrid2" style="padding-top: 10px;">
                    <table id="grid_table2"></table>
                </div>
                <div id="divGrid3" style="padding-top: 10px;">
                    <table id="grid_table3"></table>
                </div>
                <div id="divGrid4" style="padding-top: 10px;">
                    <table id="grid_table4"></table>
                </div>
            </div>
</div>

2、js中设定每个table表的colModel参数
3、初始化加载jqGrid table
1.第一张jqGrid初始化

    $("#grid_table1").jqGrid({
                url: url,
                postData: params,
                mytype:'POST',
                datatype: "json",
                colModel: getColMParam(1),//获取colModel参数
                shrinkToFit: true, //网格的列的宽度应重新计算，并考虑到网格的宽度,自动填充到满屏
                gridview: true, //3.4.X版本之后的属性，在不使用treeGrid时，使用该属性以提升性能
                sortable: false,
                forceFit:false,
                height: '100%',
                width: gridWidth,
                loadComplete: function(result) {
                    for(var tableNum=2;tableNum<=4;tableNum++){
                        $("#grid_table"+tableNum)[0].addJSONData(result);
                    }
                }
    });

2.剩余几张表的初始化

$("#grid_table"+tableNum).jqGrid({
            datatype: "local",
            colModel: getColMParam(tableNum),
            shrinkToFit: true, //网格的列的宽度应重新计算，并考虑             到网格的宽度,自动填充到满屏
            gridview: true, //3.4.X版本之后的属性，在不使用treeGrid时，使用该属性以提升性能
            sortable: false,
            forceFit:false,
            height: '100%',
            width: gridWidth
});