使用 jQGrid 和 jQUery 选项卡如何优化网格数答案

【问题标题】：Using jQGrid and jQUery tabs how to oprimize the number of grids使用 jQGrid 和 jQUery 选项卡如何优化网格数
【发布时间】：2011-07-13 16:54:12
【问题描述】：

我有 3 个不同的选项卡，我在其中使用 jQGrids 显示数据（每个选项卡包含一个网格）。

但我只是认为我的网格完全一样，只是它们使用不同的url来获取数据。

所以我在每个选项卡上都有三个相似的网格，只有不同的网址：

First: url: '/Home/GetData?id=1' Second: url: '/Home/GetData?id=2' and Third: url: '/Home/GetData?id=3'

所以我在想，我可能只声明一次网格，然后在每个选项卡上单击一个可以传递 url 来加载数据？因此，在每个选项卡上单击 jQGrid 将从新 url 填充。

可能有人对此有任何想法？

或者可能有人有更好的想法如何在这种情况下减少“jQGrid 复制粘贴”？

更新 0：

几乎可以运行我的意思是它可以运行，但是有一个小问题，当我切换选项卡时，网格的标题会丢失......以及一些 jqgrid 格式。

这是我的代码：

$("#tabs").tabs({
            show: function (event, ui) {

                if (ui.index == 0) {
                    //$("#Grid1").appendTo("#tab1");
                    //$("#Grid1Pager").appendTo("#tab1");

                   //When Appending only pager and grid div, header getting lost so i've append the whole grid html instead
                   $("#gbox_Grid1").appendTo("#tab1");

                   changeGrid("#Grid1", 1);
                }

                else if (ui.index == 1) {
                  //$("#Grid1").appendTo("#tab2");
                  //$("#Grid1Pager").appendTo("#tab2");

                  $("#gbox_Grid1").appendTo("#tab2");

                  changeGrid("#Grid1", 2);
                }

                else if (ui.index == 2) {
                    //$("#Grid1").appendTo("#tab3");
                    //$("#Grid1Pager").appendTo("#tab3");

                    $("#gbox_Grid1").appendTo("#tab3");

                    changeGrid("#Grid1", 3);
                }
            }
        });

function changeGrid(grid, id) {
        $(grid).jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });

        $(grid).trigger('reloadGrid');
    }

更新 1

好的，我已更改代码以附加整个网格，而不是仅附加网格 div 和寻呼机。所以它就是这样工作的。

【问题讨论】：

你可以使用像$.prependTo](http://api.jquery.com/prependTo/) or [$.appendTo这样的jQuery方法移动包含<table id="grid">和<div id="pager"></div>的div从一个标签包含到另一个标签。您可以将此类移动放置在jQuery UI tab 的select 或show 事件处理程序中。之后，您可以使用setGridParam 更改网格url 参数并触发“reloadGrid”
@Oleg 我已经更新了这个问题，你怎么看？

标签： asp.net-mvc-3 jqgrid

【解决方案1】：

您基本上可以将选项卡设置为常规按钮，这些按钮将调用一些将新 URL 参数设置到网格并重新加载它的函数。

函数应该是这样的：

function changeGrid(grid, id) {
   $(grid).jqGrid('setGridParam', {
      url: '/Home/GetData?id=' + id, page: 1
   });
   $(grid).trigger('reloadGrid');
}

请注意，我将页面设置为 1。请记住，根据您的解决方案，您可能需要设置默认排序列或类似内容。

更新

如果您真的想使用选项卡，可以简化“显示”事件处理程序。试试这个：

$("#tabs").tabs({
    show: function (event, ui) {
        var id = ui.index + 1;

        $("#gbox_Grid1").appendTo("#tab" + id);

        $("#Grid1").jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });
        $("#Grid1").trigger('reloadGrid');
    }
});

【讨论】：