Question

我在JSON响应中定义了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属性值为meta-characters的列。在您的情况下，您使用"name": "First Name"和"name": "Last Name"可以解决严重问题。您应该将name属性替换为"name": "FirstName"等名称。

下一个问题是您的数据只能使用jsonmap的{{1}}属性进行读取。所以你必须在JSON输入中定义属性。此外，您不能将colModel的{{1}}属性与jsonmap一起使用。因此，您必须将JSON输入的colModel部分中的信息转换为更易读的格式，或者使用datatype: 'local'。

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

result.mypage.outerwrapper.innerwrapper.rows

以及以下代码

datatype: 'jsonstring'

结果你将the demo起作用。

Answer 2

这是我最近的一个项目的例子（不要忘记HTML标签！）：

 <table id="campaignGuidance"></table>

 <script>
  $("#campaignGuidance").jqGrid({
        url: '[PUT THE URL FOR YOUR JSON HERE]',
        datatype: "json",
        colNames: ['Status', 'Category', 'Description', 'Details', 'Ad/RM', 'Available'],
        colModel: [
            { name: 'Status', index: 'Status', width: 40, colName: 'Status', canHide: true, hidden: false },
            { name: 'Category', index: 'Category', width: 150, colName: 'Category' },
            { name: 'Description', index: 'Description', width: 200, colName: 'Description', canHide: true, hidden: false },
            { name: 'Details', index: 'Details', width: 200, colName: 'Details', canHide: true, hidden: false },
            { name: 'AdOrRm', index: 'AdOrRm', width: 70, colName: 'Ad/RM', canHide: true, hidden: false },
            { name: 'Available', index: 'Available', width: 110, colName: 'Available', canHide: true, hidden: false }
        ],

        ondblClickRow: function (id) { actions.viewCGDetails(id); },
        rowNum: 1000,
        autowidth: false,
        height: 700,
        width: 1900,
        rowList: [2, 5, 10, 20, 30],
        rowTotal: 2000,
        loadonce: true,
        viewrecords: true,
        caption: "CGD"
    });
</script>

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

2 个答案: