将普通JSON绑定到jqGRID

时间:2014-03-16 04:55:34

标签: jquery json jqgrid

我对jqGrid很新。有人可以指导我将JSON绑定到jqGrid的错误吗? 请注意 - 我不能控制Web服务,因此无法修改从Web服务发送的json。 非常感谢您的帮助。

JSON格式:

    [{"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":2," Company":"Cosmos cooperative ","EmployeeId":1," EmployeeName ":"Abhilash Shah","MaturityDate":"2012-08-11T00:00:00","MaturityAmount":23311.0,"DateInvested":"2011-03-05T00:00:00","AmountInvested":20000.0,"ROI":10.25,"Term":16," ","IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":1,"DepositId":0,"ReceiptNumber":"9993","CompanyId":1,"Company":" Janta Sahakari Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-06-11T00:00:00","MaturityAmount":253644.0,"DateInvested":"2012-06-11T00:00:00","AmountInvested":0.0,"ROI":0.0,"Term":12," ","IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":1,"Company":"Solapur Janta Sahakari  Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-08-30T00:00:00","MaturityAmount":125161.0,"DateInvested":"2011-05-30T00:00:00","AmountInvested":100000.0,"ROI":10.1,"Term":27, "IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":0,"DepositId":0,"ReceiptNumber":"226575","CompanyId":6,"Company":" of Maharashtra","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-10-05T00:00:00","MaturityAmount":100000.0,"DateInvested":"2012-10-05T00:00:00","AmountInvested":100000.0,"ROI":10.05,"Term":12, "IsWithdrawn":false,"Purpose":"","Comments":""}
    ]

以下是代码段:

    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#depositGrid").jqGrid({
                url: 'http://localhost:50570/api/com…..s&#39;,
                datatype: 'json',
            type: "POST",
            colNames: ['ID','Employee Name'],
            colModel: [{ name: 'ID', width: 1, hidden: true, key: true },
            { name: 'EmployeeName', index: ' EmployeeName ', align: "center", sortable: true }          ],
            autowidth: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'ReceiptNumber',
            viewrecords: true,
            sortorder: "asc",
            caption: 'My first grid',
            editurl:"",                                               
            imgpath: 'themes/basic/images'

        });

     });
    </script>
    <div id="jqgrid">
        <table id="depositGrid"></table>
        <div id="Pager"></div>
    </div>

我不确定上述绑定有什么问题。请指导我。

此致

Abhilash

3 个答案:

答案 0 :(得分:0)

我不确定但是在jsonReader中id:0,我从来没有需要这个...我认为它试图将id绑定到名为&#34; 0&#34;的字段。 并且jqgrid将尝试获取(yourjson).rows

中的行

Jsonreader是可选的......

您可以删除它并将索引列设置为实际数据ID ...

在你的列定义中,你绑定到一个字段ID,它在你的json中不存在......

例如:

JSON:

{"total":1,"page":1,"records":2,"rows":[{"Id":458,"ArticleNo":null,"CUP":null,"Name":"test desc"},{"Id":459,"ArticleNo":null,"CUP":null,"Name":"qweqwe"}]}

使用Javascript:

 $('#Items').jqGrid({
    url: ItemsAjaxGetUrl,
    datatype: "json",
    colNames: [Res_Name, 'SKU', 'CUP', ''],
    colModel: [
        { name: 'Name', index: 'Name', width: 300 },
        { name: 'SKU', index: 'ArticleNo', width: 120 },
        { name: 'CUP', index: 'CUP', width: 160 },
        { name: 'Id', index: 'Id', width: 60, hidden: true, key: true }
    ],
    autowidth: true,
    rowNum: 25,
    rowList: [25, 50, 75, 100],
    pager: '#ItemsPager',
    sortname: 'Id',
    viewrecords: true,
    sortorder: "asc",
    caption: ItemsContainer.attr('title'),
    editurl: "",
    hiddengrid: (ItemsContainer.data("hidden") === 'true'),
    onSelectRow: function (id) {
        if (id && id !== ItemsLastSel) {
            ItemsSelectedRowId = id;
            $('.actionBtnItems').removeAttr('disabled');
        }
        if (!id) {
            ItemsSelectedRowId = null;
            $('.actionBtnItems').attr('disabled', 'disabled');
        }

    }
});

答案 1 :(得分:0)

最后使用JSON阅读器,如下所示:

<script type="text/javascript">
        jQuery(document).ready(function () {
   jQuery("#west-grid").jqGrid({
            url: 'http://localhost:50570/api/common/GetElapsedDeposits',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            height: 250,
            colNames: ['Employee Name'],
            colModel: [
            { name: 'EmployeeName', index: ' EmployeeName ', align: "center", sortable: true }          ],
            autowidth: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            caption: 'My first grid'    
        });

     });
    </script>
    <div id="jqgrid">
        <table id="depositGrid"></table>
        <div id="Pager"></div>
    </div>

答案 2 :(得分:0)

数据数组中的前两个元素不遵循json格式。它在""属性后面有一个"Term"。在第一个元素中还有一个" EmployeeName ",我猜这是一个错字。

尝试使用以下数据,它应该可以使用。它对我有用。

[{"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":2," Company":"Cosmos cooperative ","EmployeeId":1,"EmployeeName":"Abhilash Shah","MaturityDate":"2012-08-11T00:00:00","MaturityAmount":23311.0,"DateInvested":"2011-03-05T00:00:00","AmountInvested":20000.0,"ROI":10.25,"Term":16,"IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":1,"DepositId":0,"ReceiptNumber":"9993","CompanyId":1,"Company":" Janta Sahakari Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-06-11T00:00:00","MaturityAmount":253644.0,"DateInvested":"2012-06-11T00:00:00","AmountInvested":0.0,"ROI":0.0,"Term":12,"IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":1,"Company":"Solapur Janta Sahakari  Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-08-30T00:00:00","MaturityAmount":125161.0,"DateInvested":"2011-05-30T00:00:00","AmountInvested":100000.0,"ROI":10.1,"Term":27, "IsWithdrawn":false,"Purpose":"","Comments":""},
    {"DepositType":0,"DepositId":0,"ReceiptNumber":"226575","CompanyId":6,"Company":" of Maharashtra","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-10-05T00:00:00","MaturityAmount":100000.0,"DateInvested":"2012-10-05T00:00:00","AmountInvested":100000.0,"ROI":10.05,"Term":12, "IsWithdrawn":false,"Purpose":"","Comments":""}
    ]