Jquery 需要帮助填充jqGrid吗

我在用数据填充jqGrid时遇到了问题。我看了一下这些文件，希望有人能帮我解决这个问题

我已经验证了数据是从我的服务器端控制器方法返回的，如下所示。示例仅针对fto对象中的一条记录

以下是个人记录：

0
    Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456", more...}

Customer_Name
    "X"

FuelTkt_ID
    2

Image_ID
    "12345"

Ticket_No
    6460193

Trans_Timestamp
    "/Date(1395238800000)/"

Vehicle_No
    "123456"

1
    Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456", more...}

Customer_Name
    "X"

FuelTkt_ID
    3

Image_ID
    "22856"

Ticket_No
    6460194

Trans_Timestamp
    "/Date(1395246000000)/"

Vehicle_No
    "123456"

正确的工作代码： 以下内容没有处理关于网格“头”的过于复杂的文档，而是解决了所有问题，而没有对我的服务器代码进行任何更改（无需在此处放置任何分页）。只需一条语句即可填充jqGrid文档中从未提及的网格

实际上，这里的文档中提到了，但从未在一个更容易理解的示例中使用过

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

我张贴的所有人看到，并从这个缺乏文件和过度复杂的标题受益

下面js中填充网格的最重要语句如下：

$("#fuelTicketsGrid")[0].addJSONData(data);

就这些

HTML

<div>
                <table id="fuelTicketsGrid" class="table"></table>
                <div id="GridPager"></div>
            </div>

---

我可以看到一些问题。首先，JSON的格式不正确。它需要两个标头字段来告诉网格如何渲染。这来自他们的文档：

{ total: xxx, page: yyy, records: zzz, rows: [ 
{name1:”Row01″,name2:”Row 11″,name3:”Row 12″,name4:”Row 13″,name5:”Row 14″}, ... ]}

其次，我不知道您是如何完成的，但我使用了一个普通的ActionResult调用来获取控制器中的数据：

    public ActionResult GetGrid()
    {
        YourEntities db = new YourEntities();
        int page = int.Parse(Request.Params["page"]);
        int rp = int.Parse(Request.Params["rows"]);

        // Whatever method to get your total rows, divide by page size
        int total = (db.SomeModels.Count() / rp) + 1;

        // Populate your List
        IEnumerable<SomeViewModel> rows = db.SomeModels.OrderBy(p => p.Name).Select(p => new SomeViewModel
        {
            ID = p.ID,
            Name = p.Name,
            Description = p.Description,
        }).Skip((page - 1) * rp).Take(rp);

        JsonResult retVal = Json(new { page, total, rows }, JsonRequestBehavior.AllowGet);
        return retVal;
    }

不管怎样，这就是我的工作：）

[编辑]

请参见上文，了解有关在Linq中返回列表的更多详细信息

<div>
                <table id="fuelTicketsGrid" class="table"></table>
                <div id="GridPager"></div>
            </div>

function LoadGridData() {
                var HH_FuelTkt_Input = {
                    Vehicle_No: $('#txtVehicleNbr').val(),
                    Customer_Name: $('#txtCustomerName').val(),
                    Trans_Timestamp_Begin: $('#dteBeginDate').val(),
                    Trans_Timestamp_End: $('#dteEndDate').val()
                };
                $.ajax({
                    url: '@Url.Action("GetFilteredFuelTicketsAsync", "Home")',
                    type: 'post',
                    data: JSON.stringify(HH_FuelTkt_Input),
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        $("#fuelTicketsGrid")[0].addJSONData(data);
                    },
                    error: function (jqXHR, jqXHR, textStatus, errorThrown) {
                        alert("No record found: " + "textStatus: " + textStatus + "\r\n" + "errorThrown: " + errorThrown);
                    }
                });
            }

            $('#fuelTicketsGrid').jqGrid({
                jsonReader: { root: 'tkts', repeatitems: true },
                width: 'auto',
                height: 'auto',
                autowidth: true,
                rownumbers: false,
                rownumWidth: 30,
                rowNum: 10, 
                rowList: [5, 10],
                edit: false,
                viewRecords: true,
                gridview: true,
                caption: "Fuel Tickets",
                pager: '#GridPager',
                onCellSelect: function (rowid, iCol, cellcontent) {
                    var grid = $('#fuelTicketsGrid');
                    var imageID = grid.jqGrid('getCell', rowid, 'Image_ID');
                    if (imageID != "")
                        DisplayReceipt(imageID);
                },
                colModel: [
                    { name: 'FuelTkt_ID', label: 'ID', width: 20, align: "right" },
                    { name: 'Ticket_No', label: 'Ticket', width: 60, align: "right" },
                    { name: 'Customer_Name', label: 'Customer', width: 150 },
                    { name: 'Vehicle_No', label: 'Vehicle', width: 60 },
                    { name: 'Trans_Timestamp', label: 'Date', width: 100, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                    { name: 'Image_ID', label: 'Image ID', width: 150 },
                ]
            });
            $('#fuelTicketsGrid').jqGrid('navGrid', '#GridPager', { add: false, edit: false, del: false, search: false, refresh: false });

{ total: xxx, page: yyy, records: zzz, rows: [ 
{name1:”Row01″,name2:”Row 11″,name3:”Row 12″,name4:”Row 13″,name5:”Row 14″}, ... ]}

    public ActionResult GetGrid()
    {
        YourEntities db = new YourEntities();
        int page = int.Parse(Request.Params["page"]);
        int rp = int.Parse(Request.Params["rows"]);

        // Whatever method to get your total rows, divide by page size
        int total = (db.SomeModels.Count() / rp) + 1;

        // Populate your List
        IEnumerable<SomeViewModel> rows = db.SomeModels.OrderBy(p => p.Name).Select(p => new SomeViewModel
        {
            ID = p.ID,
            Name = p.Name,
            Description = p.Description,
        }).Skip((page - 1) * rp).Take(rp);

        JsonResult retVal = Json(new { page, total, rows }, JsonRequestBehavior.AllowGet);
        return retVal;
    }

    jQuery("#Grid").jqGrid({
        url: '@Url.Action("GetGrid", "Home")', 
        datatype: "json",
        mtype: "GET",
        cache: false,
        colNames: ['ID', 'Name', 'Description'],
        colModel: [
            { name: 'ID', width: 90, sortable: true, align: 'left', show: false },
            { name: 'Name', width: 320, sortable: true, align: 'left' },
            { name: 'Description', width: 320, sortable: true, align: 'left' },
        ],
        rowNum: 20,
        rowList: [20, 50, 100],
        pager: '#GridPager',
        sortname: 'Name',
        height: '550px',
        width: 850,
        edit: false,
        viewrecords: true,
        sortorder: "desc",
        jsonReader: {
            repeatitems: false,
            id: "0"
        },
    });