Jqgrid 服务器端数据未加载到第二个 Jquery 选项卡中

Question

我有一个 html 文件和一个使用 jqgrid 和 jquery 标签的 js 文件，其中有 3 个 table 标签。服务器端数据已在第一个选项卡中正确加载，但未在第二个和第三个选项卡中加载。请提出我在这里缺少的内容。

$('#tabs').tabs({ // inside Ajax success callback
activate: function (event, ui) {
    if (jsondata.object1.total > 0) {
        if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object1.colData; // server Json str
            colN = jsondata.object1.colNames;
            colM = jsondata.object1.colModel;

            jQuery("#list").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }

    if (jsondata.object2.total > 0) {
        if (ui.newTab.index() === 1 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object2.colData;
            colN = jsondata.object2.colNames;
            colM = jsondata.object2.colModel;

            jQuery("#list2").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager2'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }

    if (jsondata.object3.total > 0) {
        if (ui.newTab.index() === 2 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object3.colData;
            colN = jsondata.object3.colNames;
            colM = jsondata.object3.colModel;

            jQuery("#list3").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager3'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }
}
});
<div id="gridWrapper">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <table id="list"> // this table works perfectly
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager"/>
    </div>

    <div id="tabs-2">
        <table id="list2">
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager2"/>
    </div>

    <div id="tabs-3">
        <table id="list3">
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager3"/>
    </div>
</div>

请检查此代码，为什么服务器端数据 json 仅加载到 jqgrid table 的第一个选项卡中 table。

Answer 1

如果您使用 html4 或 html5，您的 html 定义就会出错 - div 标签不能有自闭标签。 - 即定义应更改为：

<div id="gridWrapper">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        grid 1
        <table id="list"> 
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager"></div>
    </div>
    <div id="tabs-2">
        grid 2
        <table id="list2">
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager2"></div>
    </div>

    <div id="tabs-3">
        grid 3
        <table id="list3">
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager3"></div>
    </div>
</div>

同样适用于 table 数据元素 td。

我检查了你的代码，它运行良好。

此外，您还需要检查您的条件

if (jsondata.object2.total > 0) {
    if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
    ...

Jqgrid 服务器端数据未加载到第二个 Jquery 选项卡中

Jqgrid server side data not loaded in the second Jquery tab

javascript

jquery

jqgrid

jquery-ui-tabs