0

我用了两个jqgrid。我希望在单击 grid1 中的行时，grid2 通过 Ajax 在 grid1 的基本参数上显示数据。如何通过 Ajax 更改 grid2 的数据？grid2的这段代码：

$("#gridrelatedLette").jqGrid(
{
    url: "GetLetterInformationHandler.ashx?CurrentUser=" + 1157 + "&IndCode=" + rowData["PctIndCode"] + "&IndSerial=" + rowData["PctIndNum"] + "&TabName=relatedLetters",
    datatype: 'json',
    width: $("#relatedLetterTab").width()-20,
    height: a1,
    direction: "rtl",
    colNames: ['1', '2', '2', '3', '4', '5','6',],
    colModel: [
        { name: 'IRltType', width: 40, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettDate', width: 60, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettNum', width: 60, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IRltLettType', width:30, sortable: false, hidden: false, template: CenterTemplate },
        { name: 'IndTopic', width: 100, sortable: false, hidden: false, template: CenterTemplate },

    ],
    rowNum: 20,
    loadonce: true,
    rowList: [5, 10, 20],
    recordpos: "left",
    ignoreCase: true,
    toppager: true,
    viewrecords: true,
    sortorder: "desc",
    scrollOffset: 1,
    editurl: 'clientArray',
    shrinkToFit: true ,
    jsonReader:
    {
        repeatitems: false,
    },
    rowattr : function(rd) {
        return { "class": "myRowClass" };
    },
    gridview: true,
});
4

1 回答 1

2

master/details 场景的代码如下所示：

  1. 首先，datatype: "local"最初用于第二个（详细信息）网格。结果，详细信息网格保持空白，直到第一个（主）网格中没有任何行被选中。url最初不会对第二个（详细信息）网格提出请求。
  2. 如果要重新加载第一个（主）网格（单击 的“重新加载网格”按钮后navGrid），则必须删除第二个网格的数据。也可以选择重置datatype为"local"值。
  3. 如果使用 HTTP GET 操作，则可以使用postData定义为函数的属性将参数附加到 URL。有关详细信息，请参阅答案。它允许以最自然的方式实现参数的动态值。此外，参数值将使用encodeURIComponent自动编码，您将获得正确的 URL。
  4. 这通常是一个问题，详细信息网格（第二个网格）可以使用与主网格（第一个网格）相同的 rowid。为了防止 id 重复的问题，我建议idPrefix至少使用网格中的一个。例如，您可以使用idPrefix: "d_"详细信息网格。
  5. 因为您在从服务器重新加载数据之前明确设置datatype为"json"，您可以安全地使用loadonce: true第二个（详细信息）网格。从服务器加载数据datatype后将自动设置为"local"，但此时您将拥有与主网格的选定行相对应的数据。

代码的主要架构可能如下

var $master = $("#grid1"), $details = ("#grid2");

$master.jqGrid({
    colModel: [
        ...
        { name: "PctIndCode", ... },
        { name: "PctIndNum", ... }
    ],
    onSelectRow: function (rowid) {
        // set datatype to "json" and reload the grid.
        $details.jqGrid("setGridParam", { datatype: "json" })
            .triggerHandler("reloadGrid", [{current: true, page: 1}]);
    },
    loadComplete: function () {
        var selRowId = $(this).jqGrid("getGridParam", "selrow");
        if (selrow === null) {
            // no row selected after reloading of the master grid
            $details.jqGrid("setGridParam", { datatype: "local" })
                .triggerHandler("reloadGrid", [{page: 1}]);
        }
    },
    toppager: true,
    gridview: true
});
$master.jqGrid("navGrid", "#grid1_toppager",
    { add: false, edit: false, del: false, search: false,
        refreshstate: "current"});

$details.jqGrid({
    datatype: "local",
    idPrefix: "d_", // to be sure that no id duplicates with master grid exist
    url: "GetLetterInformationHandler.ashx",
    postData: {
        CurrentUser: 1157,
        TabName: "relatedLetters",
        IndCode: function () {
            var selRowId = $master.jqGrid("getGridParam", "selrow");

            return selRowId === null ? "" :
                $master.jqGrid("getCell", selRowId, "PctIndCode");
        },
        IndSerial: function () {
            var selRowId = $master.jqGrid("getGridParam", "selrow");

            return selRowId === null ? "" :
                $master.jqGrid("getCell", selRowId, "PctIndNum");
        }
    }
    ...
);
于 2013-05-26T13:06:38.110 回答