jqGrid：格式化程序："actions" 不适用于远程 json url

Question

我尝试使用 jqGrid 格式化程序："actions" 用于远程 json url 但它移动了行，因为列名的数量和实际返回的数据不匹配（实际列是列名中多一个）。我在网上搜索了一下，看起来所有示例都是针对本地数据（在页面上），其中 json 用作 key/value，而 url:somepage.php returns一种 csv 格式的列（没有键，只有值）。我还使用 id 作为隐藏字段，而所有示例都显示 id。我还使用了一个隐藏列。这是我的 colmodel:

url: "manager_json",
                editurl: "manager_edit",
                datatype: "json",
                //data: mydata,
                width:1000,
                //jsonReader: {
                //                repeatitems : false,
                //           },
                colNames: ["","Id","Uid","Custom Id","Image Name","Coord. X","Coord. Y","Gender","Progress","Status","Created","Updated"], 
                colModel: [{"name":"act","template":"actions","formatoptions":{"editformbutton":true}},{"name":"id","align":"center","width":33,"editable":false,"hidden":true},{"name":"uid","align":"center","width":33,"editable":true,"hidden":true,"editrules":{"edithidden":false,"required":false}},{"name":"ta_id","align":"center","width":100,"editrules":{"required":true}},{"name":"image","width":150,"template":"text","editrules":{"required":true}},{"name":"x","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"y","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"gender","width":100,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"edittype":"select","editoptions":{"value":"f:Female;m:Male","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;f:Female;m:Male"}},{"name":"progress","width":120,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"editable":false,"edittype":"select","editoptions":{"value":"-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing...","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing..."}},{"name":"status","width":100,"align":"center","formatter":"select","stype":"select","edittype":"select","editoptions":{"value":"a:Active;n:New","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;a:Active;n:New"}},{"name":"date_created","width":150,"template":"text","editable":false},{"name":"last_updated","width":150,"template":"text","editable":false}]

这里是根据 jqgrid 规范来自我的服务器 (db) 的实际数据：

{"page":1,"total":1,"records":7,"rows":[{"id":32,"cell":[32,"889daf31ff3e49544f52850258439600","2uu","2ok",2,2,"m","-","a","2017-02-10 18:57:05","2017-02-10 23:37:12"]},{"id":30,"cell":[30,"","11","11",1,1,"m","-","a","2017-02-10 18:01:52","2017-02-10 18:01:52"]},{"id":29,"cell":[29,"aaa","ww222111uu","11",1,1,"m","-","a","2017-02-10 18:00:36","2017-02-10 23:37:08"]},{"id":27,"cell":[27,"","11","1",1,1,"m","-","a","2017-02-10 17:57:41","2017-02-10 17:57:41"]},{"id":25,"cell":[25,"","4tt","4img",4,4,"f","-","n","2017-02-10 17:50:21","2017-02-11 00:26:03"]},{"id":24,"cell":[24,"","1","1",1,1,"m","-","a","2017-02-10 17:49:38","2017-02-10 17:49:38"]},{"id":22,"cell":[22,"","bbb","imam 222",2,22,"f","p","n","2017-02-08 20:14:55","2017-02-10 13:27:57"]}]}

如您所见，单元格行的列数少于 colNames 和 colModel。 id 和 uid 列也被隐藏。我从数据库中添加了额外的假列，但它没有帮助

我正在使用 jqGrid 4.13.7-pre

Answer 1

我建议你 return 像

这样的对象

{
    "id": 32,
    "uid": "889daf31ff3e49544f52850258439600",
    "ta_id": "2uu",
    "image": "2ok",
    "x": 2,
    "y": 2,
    "gender": "m",
    "progress": "-",
    "status": "a",
    "date_created": "2017-02-10 18:57:05",
    "last_updated": "2017-02-10 23:37:12"
}

而不是

{
    "id": 32,
    "cell": [
        32, "889daf31ff3e49544f52850258439600", "2uu", "2ok", 2, 2, "m", "-", "a",
        "2017-02-10 18:57:05", "2017-02-10 23:37:12"
    ]
}

作为服务器响应。它将简化您的代码。

如果您确实需要处理数据的当前格式，那么您将不得不使用选项

强制repeatitems: false模式

jsonReader: {
    repeatitems: false
}

并使用 jsonmap 属性 of colModel 来通知 jqGrid 应从项目的哪个元素读取列数据。 jsonmap 可以是字符串形式，如

jsonmap: "cell.1"

或者函数形式：

jsonmap: function (item) {
    return item.cell[1];
}

为了使代码更易于维护，您可以定义一个对象，例如

var columnOrder = {
        id: 0,
        uid: 1,
        ta_id: 2,
        image: 3,
        x: 4,
        y: 5,
        gender: 6,
        progress: 7,
        status: 8,
        date_created: 9,
        last_updated: 10
    };

它通过列名在 cell 数组中提供索引，并使用 jsonmap like

jsonmap: function (item) {
    return item.cell[columnOrder.uid];
}

演示 https://jsfiddle.net/OlegKi/ozzgnaeh/2/ 演示了该方法。

jqGrid：格式化程序："actions" 不适用于远程 json url

jqGrid: formatter: "actions" doesn't work for remote json url

json

action

formatter

jqgrid

free-jqgrid