Динамическое определение jqGrid

Question

Я пытаюсь создать специальную страницу запроса для нашего приложения ASP.NET MVC 2. Эта страница защищена и используется исключительно для технического административного доступа в нашей внутренней сети. Мы хотим иметь возможность запрашивать несколько таблиц, и я не хочу иметь страницу / сетку для каждого запроса. У меня есть контроллер MVC, который возвращает результат JSON, который включает в себя следующие значения (я получил их из предупреждений JavaScript на стороне клиента, поэтому я знаю, что эти значения выглядят «в сетке»):

colNames содержит:

['AccountID','ClientID']

colModel содержит:

[{editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',resizable:true,search:false,sortable:true,width:300},
 {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',resizable:true,search:false,sortable:true,width:300}]

colData содержит:

{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:1}]}

И на клиенте мой jqGrid выглядит так:

jQuery(document).ready(function () {

    $.ajax({
        type: 'POST',
        url: '<%: Url.Action("GetData", "Support") %>',
        data: { query: 'foo' },
        dataType: 'json',
        success: function (result) {

            alert(result.colNames);
            alert(result.colModel);
            alert(result.colData);

            jQuery('#QueryGrid').jqGrid({
                jsonReader: { repeatitems: false },
                shrinkToFit: true,
                datatype: 'jsonstring',
                colNames: result.colNames,
                colModel: result.colModel,
                datastr: result.colData,
                viewrecords: true
            });
        },
        error: function (x, e) {
            alert(x.readyState + ' ' + x.status + ' ' + e.msg);
        }
    });
});

Я собирал это, основываясь на нескольких связанных постах / ответах здесь в Stack Overflow, а также на вики jqGrid. Я почти уверен, что я очень, очень близок ... но это просто не работает.

Проблема, с которой я столкнулся, заключается в том, что jqGrid выдает ошибку «Length of colNames <> colModel!» и я не могу понять, что в моих строках JSON мне не нравится.

Кто-нибудь видит, чего мне здесь не хватает?

Answer 1

Я полагаю, что данные, которые вы получаете как result.colNames и result.colModel , являются строками, а не объектами .

var cn = ['AccountID','ClientID'];
var cm = [
    {editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',
     resizable:true,search:false,sortable:true,width:300},
    {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',
     resizable:true,search:false,sortable:true,width:300}];
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
    jsonReader: { repeatitems: false },
    height: 'auto',
    colNames: cn,
    colModel: cm,
    datastr: cd,
    viewrecords: true
});

Кстати, некоторые свойства, которые вы используете в параметрах colModel, являются настройками по умолчанию. Параметр shrinkToFit: true также является значением по умолчанию. Таким образом, вы можете уменьшить до

[{index:'AccountID',jsonmap:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',jsonmap:'ClientID',name:'ClientID',search:false,width:300}]

Если вы будете использовать jsonReader: { repeatitems: false, cell:"" }, тогда он может быть короче

[{index:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',name:'ClientID',search:false,width:300}]

Вероятно, вы действительно хотели отправить result.colNames и result.colModel в виде строк JSON, которые можно преобразовать в объекты, например, с учетом jQuery.parseJSON . В этом случае вам следует немного изменить формат данных в result.colNames и result.colModel. Следующий код также будет работать

var cnStr = '["AccountID","ClientID"]';
var cmStr = '[{"index":"AccountID","name":"AccountID","search":false,"width":300},{"index":"ClientID","name":"ClientID","search":false,"width":300}]';
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
        jsonReader: { repeatitems: false, cell:"" },
        datatype: 'jsonstring',
        height:'auto',
        colNames: jQuery.parseJSON(cnStr),
        colModel: jQuery.parseJSON(cmStr),
        datastr: cd,
        viewrecords: true
    });

Еще одно маленькое замечание. Вы не используете значения key:true или id в данных jqGrid. Это потенциально опасно. Вы должны понимать, что jqGrid использует id = "1", id = "2" и т. Д., Если в данных нет id. Проблема может быть, если вы используете две или более таких сеток на одной странице. Вы можете получить двойные идентификаторы очень просто, что недопустимо.