javascript - 重新加载本地 jqGrid，行数据比以前少——没有看到行消失？

Question

所以，我有一个 jqGrid 的实现，它运行得很好。我正在显示一些数据行，当添加新数据时，网格会根据需要刷新。

但是，如果我尝试从网格中删除一行 - 它不会清除丢失的行!添加新行很好，但删除会留下数据并导致网格显示错误。

如果我首先调用“clearGridData”，我会看到数据已适当清理。但是，如果我调用clearGridData——我会丢失我的选择/页面!

http://jsfiddle.net/yNw3C/1766/

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$('#UpdateGridButton').click(function(){
    mydata[0].status = "CLOSED";
    delete mydata[1];

    //If I add this -- I can refresh grid data properly, but I lose my selection.
    //$('#grid').clearGridData();

    $("#grid").jqGrid('setGridParam', { data: mydata});

    $("#grid").trigger('reloadGrid', [{current: true}]);
});

​ jqGrid 是否隐式支持两全其美？或者我需要编写自定义逻辑吗？

Answer 1

抱歉，您目前使用 jqGrid 的方式错误。

首先网格的填充非常重要。您当前使用addRowData 。据我所知，这是最古老但最慢的填充网格的方式。如果您使用datatype: "local"你应该使用data: mydata它允许使用数据直接创建 jqGrid。

其他非常重要的选项是 gridview和rowNum 。您应该始终使用 gridview: true提高网格性能(有关更多详细信息，请参阅 the answer)。了解rowNum的值(value)你应该知道jqGrid是为了支持数据分页而设计的。如果是datatype: "local"排序和分页将由jqGrid自己在本地实现。用于导航页面的寻呼机将通过使用 toppager: true 创建选项或按用途pager: "#pagerId" 。 即使您不创建任何寻呼机，本地寻呼仍然处于激活状态。默认值rowNum是 20。因此您当前的网格将仅显示前 20 行。唯一的异常(exception)是 addRowData这会强制在当前页面上临时添加行。重新加载后(例如通过更改排序间接)，只会向用户显示前 20 行，并且用户将没有 GUI 来更改页面(!!!？？？)。如果您想在一页上显示所有行，您应该使用 rowNum: 10000例如。

下一个重要参数是autoencode: true这意味着单元格的数据应被解释为文本而不是 HTML 片段。如果您不使用autoencode: true您将无法显示包含 '<' 的文本, '>' , '&'等等。

我建议您另外使用height: "auto"如果您使用本地数据分页。它将删除为滚动条保留的网格的正确大小的空白空间。您也可以使用 scrollOffset: 0删除不需要的空间。

代码中的下一个重要错误是使用 setGridParam与 data范围。仅当网格之前为空或需要添加一些额外的行时，才可以执行此操作。 setGridParam存在主要是为了其他目的。它内部使用$.extend (参见代码 here )。因此，您将用新值扩展旧的数据包含，而不是替换旧的 data到新的。例如，您可以使用 getGridParam获取对内部 data 的引用参数:

var data = $("#grid").jqGrid("getGridParam", "data");

然后就可以修改数组 data使用push , pop和delete 。完全替换data你可以做

var allParameters = $("#grid").jqGrid("getGridParam");
allParameters.data = newData; // or newData.slice(0)

之后您可以通过触发 "reloadGrid" 重新加载网格.