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}

如果我更改jqGrid JSON响应以包含列的名称，则jqGrid数据行为空且没有数据

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

问题2 - 我尝试在单元格定义中添加“editable”（包含或不包含列名。这里我显示的是带有列名的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：取出'小区'

    {
        "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 - 'not-editable-cell'无法正常工作

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}

（见the demo）。

第二种方式。您只使用jsonReader: {repeatitems: false}并从JSON数据中删除cell部分：

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

（见another demo）。

在问题的第二部分，我发现JSON数据的"date"部分格式非常奇怪。为什么属性的值是数组？它可以作为一个项目更多吗？如何在案例中显示数据？我认为你应该改变数据的格式。

Answer 2

查看jqGrid inline edit

它显示了如何有条件地添加行

的示例

代码段：

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

jqGrid - “可编辑”：网格列的JSON响应中的“true”

2 个答案: