使用嵌套 JSON 对象自定义（透视）显示 Jqgrid

Question

我有一个JSON

{"empId":"4444","skill":{"rating":"1","review":"Great"},"productivity":{"rating":"2","review":"Good"}};

这是我目前 jqgrid 代码的 colModel。

colModel: [
{name:'skill.rating',label:'Skill Rating', width:150,editable: true},
{name:'skill.review',label:'Skill Review', width:150,editable: true},
{name:'productivity.rating',label:'Productivity Rating',width:150,editable: true},
{name:'productivity.review',label:'Productivity Review', width:150,editable: true}]

这就是我的网格现在的样子

但是这种网格设计使得将来很难扩展，如果有新的类别可靠性审查和评级，则必须手动更改网格设计。

相反，我想让它在网格中以这种格式显示

Category      ||  Rating   || Review
----------------------------------
Skill         ||  1        || Great
Productivity  ||  2        || Good
Reliability   ||  3        || Average

有没有一种方法可以用 Jqgrid 做到这一点而不必更改 JSON 对象的结构（因为我无法控制对象，我只能通过服务获取它)??

Answer 1

最好操纵 jsonReader（可以是函数）而不是更改 colModel。详细解释见Guriddo docs

尝试使用以下代码：

colModel: [
    {name:'category',label:'Category', width:150,editable: true},
    {name:'rating',label:'Skill Rating', width:150,editable: true},
    {name:'review',label:'Skill Review', width:150,editable: true}
],
jsonReader : {
    root : function (data) {
        var ret  = [];
        for( var key in data) {
            if($.isPlainObject(data[key])) {
                var tmp = data[key];
                tmp.category = key;
                ret.push(tmp);
            }
        }
        return ret;
    }
},

更新

工作代码下方

HTML

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

JavaScript

var mydata ={"empId" : "4444", "skill" : "rating":"1", "review":"Great"}, "productivity" : {"rating":"2","review":"Good"}, "reliability" : {"rating":"3","review":"Very Good"}};


        $("#jqGrid").jqGrid({
            datastr : mydata,
            datatype: "jsonstring",
            colModel: [
                {name:'category',label:'Category', width:150,editable: true},
                {name:'rating',label:'Skill Rating', width:150,editable: true},
                {name:'review',label:'Skill Review', width:150,editable: true}
            ],
            jsonReader : {
                root : function (data) {
                    var ret  = [];
                    for( var key in data) {
                        if($.isPlainObject(data[key])) {
                            var tmp = data[key];
                            tmp.category = key;
                            ret.push(tmp);
                        }
                    }
                    return ret;
                }
            },
            viewrecords: true,
            width: 780,
            rowNum: 15,
            //cellEdit : true,
            rownumbers: true, // show row numbers
            rownumWidth: 25, // the width of the row numbers columns
            pager: "#jqGridPager"
        });

这里是link到jsfiddle example 数据类型是 jsonstring，但它与 json 相同。这套主要是给jsfiddle工作的。

使用嵌套 JSON 对象自定义（透视）显示 Jqgrid

Customise(Pivot) display of a Jqgrid with a Nested JSON object

jquery

jqgrid