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" 重新加载网格.