Question

我有大概3次尝试学习jqGrid。每次都失败了。所以这次我试着从基础开始。我想做的就是在http://trirand.com/blog/jqgrid/jqgrid.html复制json数据示例。

我最大的努力导致了一个包含行和列的表，每个单元格都有一个不间断的空间。

使用我的代码，我只是以最轻微的方式离开了该示例中的代码，以解释我没有从同一数据服务获取数据的事实。但我得到的数据完全相同，因为我能够使用fiddler提取json。

代码是：

function getData() {

    var obj =
    {
        "page": "1",
        "total": 2,
        "records": "13",
        "rows": [{
            "id": "13",
            "cell": ["13",
            "2007-10-06",
            "Client 3",
            "1000.00",
            "0.00",
            "1000.00",
            null]
        },
        {
            "id": "12",
            "cell": ["12",
            "2007-10-06",
            "Client 2",
            "700.00",
            "140.00",
            "840.00",
            null]
        },
        {
            "id": "11",
            "cell": ["11",
            "2007-10-06",
            "Client 1",
            "600.00",
            "120.00",
            "720.00",
            null]
        },
        {
            "id": "10",
            "cell": ["10",
            "2007-10-06",
            "Client 2",
            "100.00",
            "20.00",
            "120.00",
            null]
        },
        {
            "id": "9",
            "cell": ["9",
            "2007-10-06",
            "Client 1",
            "200.00",
            "40.00",
            "240.00",
            null]
        },
        {
            "id": "8",
            "cell": ["8",
            "2007-10-06",
            "Client 3",
            "200.00",
            "0.00",
            "200.00",
            null]
        },
        {
            "id": "7",
            "cell": ["7",
            "2007-10-05",
            "Client 2",
            "120.00",
            "12.00",
            "134.00",
            null]
        },
        {
            "id": "6",
            "cell": ["6",
            "2007-10-05",
            "Client 1",
            "50.00",
            "10.00",
            "60.00",
            ""]
        },
        {
            "id": "5",
            "cell": ["5",
            "2007-10-05",
            "Client 3",
            "100.00",
            "0.00",
            "100.00",
            "no tax at all"]
        },
        {
            "id": "4",
            "cell": ["4",
            "2007-10-04",
            "Client 3",
            "150.00",
            "0.00",
            "150.00",
            "no tax"]
        }],
        "userdata": {
            "amount": 3220,
            "tax": 342,
            "total": 3564,
            "name": "Totals:"
        }
    }

    return obj;
}

$(function () {
    $("#list2").jqGrid({
        data: getData()['rows'],
        datatype: "local",        
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            { name: 'id', index: 'id', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'name', index: 'name asc, invdate', width: 100 },
            { name: 'amount', index: 'amount', width: 80, align: "right" },
            { name: 'tax', index: 'tax', width: 80, align: "right" },
            { name: 'total', index: 'total', width: 80, align: "right" },
            { name: 'note', index: 'note', width: 150, sortable: false }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager2',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: "JSON Example"
    });
    $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

});

任何人都可以帮我打破这个流行的javascript库吗？

Answer 1

我发现你的网格没有任何问题。您的数据有问题。我希望你的数据需要检查。此外，如果您使用local作为数据类型，您的数据应如下所示

var mydata = [
{ id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00"
 , tax:"120.00", total:"720.00", note: null },
{ id: "12", invdate: "2007-10-06", name: "Client 2", amount: "700.00",
  tax:"140.00", total:"840.00", note: null },
{ id: "13", invdate: "2007-10-06", name: "Client 3", amount: "1000.00", 
  tax:"0.00", total:"1000.00", note: null }
    ];

这个Demo将为您提供jQgrid的良好开端。我已经使用了你的网格定义。希望这会有所帮助。

带有ASP.NET MVC基础的jqGrid显示无数据

1 个答案: