jqGrid - "editable": "true" в ответе JSON для столбцов сетки

Question

Задача 1

У меня есть модель колонки как

{name:'fname',index:'fname', width:50, align:"center", resizable:false},
{name:'lname',index:'lname', width:50, align:"center", resizable:false},
{name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}

Если я изменю ответ JSON JQGrid на имена столбцов, строки данных jqGrid будут пустыми без данных

{
    "rows":[
        {
            "id":"1",           
            "cell":{                
                "fname":"S",
                "lname":"K",
                "date":"11/11/2011"
            }
        }
    ],
    "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

Проблема 2 - Я попытался добавить «редактируемые» в определение ячейки (с именами столбцов или без них. Здесь я показываю структуру JSON с именами столбцов. ), данные jqGrid строки снова пусты

{
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": [
                    {
                        "date": "11/11/2011",
                        "editable": "true"
                    }
                ]
            }
        }
    ],
    "userdata": {
        "amount": 3220,
        "tax": 342,
        "total": 3564,
        "name": "Totals:"
    }
}

Ячейки таблицы прорисованы, но jqGrid не собирает данные JSON.

Что я делаю не так?

jqGrid JSONReader

jQuery("#editjqGrid").jqGrid({
    url: "http://localhost/edit.json",
    datatype: "json",
    contentType: "application/x-javascript; charset=utf-8",
    colNames:['fname','lname', 'date'],
    colModel:[
        {name:'fname',index:'fname', width:50, align:"center", resizable:false},
        {name:'lname',index:'lname', width:50, align:"center", resizable:false},
        {name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}
    ],
    loadComplete: function (data) {     
        var item, i, l = data && data.rows.cell ? data.rows.cell.length : 0;
        for (i = 0; i < l; i++) {
            item = data.rows.cell[i];           
            if (item.editable === "false") {
                $("#" + item).addClass("not-editable-cell");
            }
        }
    }

});
jQuery("#editjqGrid").jqGrid('navGrid','#pager2',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});

ОБНОВЛЕНИЕ: добавление встроенных параметров редактирования для определенной ячейки в JSON

    {
        "rows": [
            {
                "id": "1",
                "cell": {
                    "fname": "S",
                    "lname": "K",
                    "date": {
                        "value": "11/11/2011",
                        "editable": "true",
                        "edittype":"input",
                        "editoptions":{
                             "size":"20",
                             "maxlength":"30"
                        }
                    }
                    "emptype":{
                        "editable":"true",
                        "edittype":"select",
                        "editoptions":{
                            "option":"Full Time",
                            "option":"Part Time",
                            "option":"Hourly"
                        }
                    }
                }
            }
        ],
        "userdata": {
            "amount": 3220,
            "tax": 342,
            "total": 3564,
            "name": "Totals:"
        }
    }

ОБНОВЛЕНИЕ 2: снял 'cell'

    {
        "rows": [
            {
                "id": "1",
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"input",
                    "editoptions":{
                        "size":"20",
                        "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "option":"Full Time",
                        "option":"Part Time",
                        "option":"Hourly"
                     }
                }
            }                
        ]
    }

ОБНОВЛЕНИЕ 3: добавлена ​​обратная ячейка и изменен тип редактирования и опции редактирования

       {
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"text",
                    "editoptions":{
                         "size":"20",
                         "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "value":"Full Time",
                        "value":"Part Time",
                        "value":"Hourly"
                    }
                }
            }
        }
    ]

loadComplete - «не редактируемая ячейка» не работает

loadComplete: function (data) {               
     var rowItem, x, l = data && data.rows ? data.rows.length : 0;           
     for (x = 0; x < l; x++) {  
    if (data.rows[x].cell.date.editable === "false") {
            $("#" + data.rows[x].id + "td[aria-describedby='editTimecard_date']").addClass("not-editable-cell");
    }
}

}

Answer 1

Проблема 1 очень проста. В JSON вы используете "cell" и именованные свойства вместе, что неправильно для программы чтения JSON по умолчанию. Таким образом, вы можете решить проблему двумя способами

Первый путь . Вы не изменяете формат данных JSON, но добавляете параметр jsonReader: {repeatitems: false} и jsonmap с префиксом cell. в каждом столбце:

colModel: [
    {name: 'fname', index: 'fname', jsonmap: 'cell.fname', width: 70, align: "center", resizable: false},
    {name: 'lname', index: 'lname', jsonmap: 'cell.lname', width: 70, align: "center", resizable: false},
    {name: 'date',  index: 'date',  jsonmap: 'cell.date', width: 70, align: "center", resizable: false, editable: true}
],
jsonReader: {repeatitems: false}

(см. демо ).

Второй путь . Вы используете только jsonReader: {repeatitems: false} и удаляете cell деталь из данных JSON:

{
    "rows":[
        {
            "id":"1",           
            "fname":"S",
            "lname":"K",
            "date":"11/11/2011"
        }
    ],
    "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

(см. еще одно демо ).

Во второй части вопроса я нахожу очень странный формат части "date" данных JSON. Почему значением свойства является массив? Может ли он иметь более одного предмета? Как данные должны отображаться в корпусе? Я думаю, что вы должны изменить формат данных.

Answer 2

взгляните на встроенное редактирование jqGrid

Это пример того, как условно редактировать строки

фрагмент кода:

onSelectRow: function(id) {
  var data = jQuery('#grid_id').getRowData(id);
  if(data.editable == true) {  // <-- you may have to check this
    jQuery('#grid_id').editRow(id, true);
  }
}