jqgrid - 如果列模型在 JSON 响应中，如何将单元格数据映射到列模型？

Question

我已经在 J​​SON 响应中定义了 jqgrid 列名和列模型数组，以便我可以动态填充 jqgrid 标头。

我遇到的问题

数据未显示在网格中。如何映射cells.value到每一列？

JSON

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left"
        },
        {
            "name": "First Name",
            "index": "First Name",
            "width": 140,
            "align": "left"
        },
        {
            "name": "Last Name",
            "index": "Last Name",
            "width": 160,
            "align": "left"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

JQGrid 定义

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "jqgrid.json",
        data: "",
        dataType: "json",
        success: function(result){
            var columnData = result.mypage.outerwrapper.innerwrapper.rows,
                columnNames = result.colNames,
                columnModel = result.colModel;

            $("#dataGrid").jqGrid({
                jsonReader: {
                    root: "result.mypage.outerwrapper.innerwrapper.rows",
                    cell: "result.mypage.outerwrapper.innerwrapper.rows.cells",
                    repeatitems: true,
                    page: "result.mypage.outerwrapper.page",
                    total: "result.mypage.outerwrapper.total",
                    records: "result.mypage.outerwrapper.records"
                },
                datatype: 'local',
                data: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                gridview: true,
                pager: "Pager",
                height: "auto",
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            });
        }
    });
    $("#dataGrid").jqGrid('navGrid','#Pager');  
});

Answer 1

在您当前的问题中，您将继续使用输入数据的极其奇特的 JSON 格式。

首先，我建议你从来没有使用具有列元字符中的价值name属性中colModel。在您的情况下，您使用了"name": "First Name"并且"name": "Last Name"可能会出现严重问题。您应该将 name 属性替换为类似"name": "FirstName".

接下来的问题是，你的数据只能使用读取jsonmap的性能colModel。所以你必须在 JSON 输入中定义属性。此外，您不能将 的jsonmap属性colModel与datatype: 'local'. 因此，您必须将result.mypage.outerwrapper.innerwrapper.rowsJSON 输入部分的信息转换为更易读的格式，或者使用datatype: 'jsonstring'.

因此，您可以将 JSON 数据修复为以下内容

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value"
        },
        {
            "name": "FirstName",
            "index": "FirstName",
            "width": 140,
            "align": "left",
            "jsonmap": "cells.1.value"
        },
        {
            "name": "LastName",
            "index": "LastName",
            "width": 160,
            "align": "left",
            "jsonmap": "cells.2.value"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

以及以下代码

$.ajax({
    type: "GET",
    url: "SK11-4.json",
    data: "",
    dataType: "json",
    success: function (result) {
        var columnData = result.mypage.outerwrapper,
            columnNames = result.colNames,
            columnModel = result.colModel;

        $("#dataGrid").jqGrid({
            datatype: 'jsonstring',
            datastr: columnData,
            colNames: columnNames,
            colModel: columnModel,
            jsonReader: {
                root: 'innerwrapper.rows',
                repeatitems: false
            },
            gridview: true,
            pager: "Pager",
            height: "auto",
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true
        });
    }
});
$("#dataGrid").jqGrid('navGrid', '#Pager');

结果，您将拥有可以工作的演示。