2

所以，我有一个运行良好的 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 是否支持两全其美？还是我需要编写自定义逻辑？

4

1 回答 1

3

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

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

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

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

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

代码中的下一个重要错误是使用setGridParamwithdata参数。仅当网格之前为空或您需要添加一些额外的行时，您才可以执行此操作。存在主要是为了setGridParam其他目的。它在内部使用$.extend（请参阅此处的代码）。因此，您将使用新值扩展旧的数据包含，而不是将旧值替换为新值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"。

于 2012-12-17T22:04:37.400 回答