Настроить (сводное) отображение Jqgrid с помощью вложенного объекта JSON

У меня есть JSON

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

Вот моя colModel кода jqgrid на данный момент.

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}]

А вот так моя сетка выглядит сейчас Настроить (сводное) отображение Jqgrid с помощью вложенного объекта JSON

Но такой дизайн сетки затрудняет масштабирование в будущем, поскольку в случае появления новой категории Обзор и оценка надежности дизайн сетки необходимо изменить вручную.

Вместо этого я хочу, чтобы он выглядел в этом формате в сетке.

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

Есть ли способ сделать это с помощью Jqgrid без изменения структуры объекта JSON (поскольку я не контролирую объект, я получаю его только через службу)??

jquery jqgrid

10.04.2019 10:51

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

161

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Лучше манипулировать jsonReader (который может быть функцией), чем изменять colModel. Подробное объяснение см. в Документы Гуриддо.

Попробуйте использовать следующий код:

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"
        });

Вот ссылка на пример jsfiddle тип данных - jsonstring, но он такой же, как json. Этот набор предназначен в основном для работы jsfiddle.

Это не работает, я получаю пустую сетку. Однако спасибо за ваше предложение.

— 10.04.2019 12:06

Какой у вас тип данных локальный или json? На нашем конце это работает нормально. Подготовлю демо. Кстати, какая версия jqGrid используется?

— 10.04.2019 20:10

10.04.2019 11:37