分组时jqgrid数据未定义

时间:2016-10-25 04:41:05

标签: jqgrid free-jqgrid

我正在使用免费的jqgrid。我使用下面的代码作为一个简单的例子。数据出来是正确的没有分组但是分组它无法捕获行中没有显示的数据(placeid)。我明白在分组时, rowObject没有placeid,但我该如何解决问题。 jsfiddle链接:http://jsfiddle.net/johnnash03/6jhqgxw8/5/

        var rows = [{
              "place": "Kerala",
              "placeid": "61",
              "code": "kc10",
        }]

        var cols =  ["place","code"];
        $("#grid").jqGrid({
            datatype: "local",
            height: 250,
            colNames: cols,
            colModel: [{
                name: 'place',
            }, {
                name: 'code',
                formatter: function( cellvalue, options, rowObject ) {
                    return rowObject['placeid']
                }
            }]
        });

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

        // Data comes correct on commenting following line.
        $("#grid").jqGrid( 'groupingGroupBy', 'place');

1 个答案:

答案 0 :(得分:1)

演示中的主要问题是使用属性placeid,它不在网格的任何列中。您使用循环中调用的addRowData方法填充网格。这是填充网格最慢的方式,我知道。在您的情况下,最重要的是网格的内部data将仅使用placecodeid属性填充。没有placeid属性将在本地保存。因此,在后来摸索网格时,人们不会看到它。

可以通过usage additionalProperties选项解决问题,该选项指定输入项的其他属性的名称,这些属性需要保存在本地data中。添加

additionalProperties: ["placeid"]

选项解决了这个问题。请参阅修改后的演示http://jsfiddle.net/OlegKi/6jhqgxw8/8/

我严格建议您修改以下代码:

var rows = [{
      "place": "Kerala",
      "placeid": "61",
      "code": "kc10",
}];

$("#grid").jqGrid({
    data: rows,
    colModel: [
        { name: "place" },
        { name: "code",
            formatter: function (cellvalue, options) {
                return options.rowData.placeid;
            }
        }
    ],
    grouping: true, 
    groupingView : { 
        groupField : ["place"]
    },
    localReader: { id: "placeid" }
});

也可以选择添加additionalProperties: ["placeid"]。请参阅http://jsfiddle.net/OlegKi/6jhqgxw8/9/

上面的代码一次创建,填充和分组数据。它另外使用localReader: { id: "placeid" }来通知placeid属性具有rowid信息(用作行的id属性值的唯一值:<tr>元素)而不是默认值id财产。