jqGrid JSON 映射未读取索引值

我正在尝试使用 jquery 1.6.2.min 和最新的 jqGrid - jqGrid 4.5.4 显示 jqGrid。

我的项目设置是：ASP.NET - 使用 Visual Studio 2010 的 MVC2。框架是.Net 4.0

问题：在我的 C# 类中，我正在添加数据库中我将在某个时刻使用的所有行。我只想最初显示两行（NAME，DESCRIPTION）。

jqGrid 显示两行，但它在第一行显示我的 id 的行，它应该显示"描述"列显示的内容。所以基本上发生的事情是，行被向右移动，而我的列映射不起作用。 NAME = 'NAME_TXT'，但由于某种原因，我在显示屏上得到的是NAME = ID;

colNames: ['NAME', 'DESCRIPTION'],
colModel: [
    { name: 'NAME', index: 'NAME_TXT', align: 'left' },
    { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}
],

我还想知道如何显示 JSON 数据从 C# 代码返回的所有内容，如何在 console.log("JSON DATATYPE: " + $datatype) 中显示对象，类似的东西。

谢谢。

JavaScript 代码：

$(function () {
    $grid = $("#grid");
    $grid.jqGrid({
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        url: '/csc/devapp1/Home/LinqGridData/',
        datatype: 'json',
        colNames: ['NAME', 'DESCRIPTION'],
        colModel: [
            { name: 'NAME', index: 'NAME_TXT', align: 'left' },
            { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}],    
        sortname: 'NAME_TXT',
        sortorder: "desc",
        repeatitems: false,
        viewrecords: true,
        height: '500px',
        autowidth: true});
});

C# 代码：

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
    var context = new CSCEntities();
    var jsonData = new
    {
        total = 1,
        page = page,
        records = context.tbl_Quickfix_Toolbar.Count(),
        rows = context.tbl_Quickfix_Toolbar.AsEnumerable().Select(n =>
            new { n.QUICKFIX_ID, 
                cell = new string[] { 
                    n.QUICKFIX_ID.ToString(), 
                    n.NAME_TXT.ToString(), 
                    n.DESCRIPTION_TXT.ToString(), 
                    n.INSTRUCTIONS_TXT.ToString(),
                    n.TYPE_TXT.ToString(),
                    n.FIXLINK_TXT.ToString()} 
            }).ToArray()
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

我过去尝试过的其他 C# 代码不起作用：

public ActionResult GridData(string sidx, string sord, int page, int rows)
    {
        CSCEntities entities = new CSCEntities();
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = entities.tbl_Quickfix_Toolbar.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        var jsonData = new {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = (
                from entity in entities.tbl_Quickfix_Toolbar
                select new {
                    id = entity.QUICKFIX_ID,
                    cell = new string[] {
                        entity.NAME_TXT.ToString(),
                        entity.DESCRIPTION_TXT.ToString(), 
                        entity.QUICKFIX_ID.ToString(),
                        entity.INSTRUCTIONS_TXT.ToString() }
                    }).ToArray()
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

您发布的代码在客户端和服务器端都存在许多问题。我只提一些问题。

您的主要问题在于您使用的服务器代码。您当前在服务器代码中使用

...
new { n.QUICKFIX_ID, 
    cell = new string[] { 
        n.QUICKFIX_ID.ToString(), 
        n.NAME_TXT.ToString(), 
        n.DESCRIPTION_TXT.ToString(), 
        n.INSTRUCTIONS_TXT.ToString(),
        n.TYPE_TXT.ToString(),
        n.FIXLINK_TXT.ToString()} 
}
...

似乎应该改为

...
new {
    id = n.QUICKFIX_ID, 
    cell = new [] { 
        n.NAME_TXT.ToString(), 
        n.DESCRIPTION_TXT.ToString()
    }
}
...

您还应考虑删除.AsEnumerable()或在应用select后移动它。

首先index属性在服务器端排序中只有一些意义。您发布的服务器代码不使用sidx和sord参数。因此，您应该从colModel中删除所有index属性。如果未指定index属性，则 jqGrid 对index使用与值name属性相同的值。这是 99% 的场景所需要的。因此，我建议您不指定index属性。因为您使用项的数组格式（ cell = new string[] {...}所以name属性的选择是自由的。您可以像name: 'NAME'一样使用name: 'NAME_TXT'。如果数据库中的列名NAME_TXT且DESCRIPTION_TXT我个人更愿意对name使用相同的值。

align属性的默认值已'left' 。因此，最好从colModel中删除不需要的align: 'left'属性。height选项的'500px'值是错误的。正确的值是字符串"auto"或字符串"100%"或任何整数值，如 height: 500 。我个人喜欢使用height: "auto".

jqGrid 没有contentType选项。如果需要指定 HTTP 请求contentType，则应改用{ajaxGridOptions: { contentType: "application/json; charset=utf-8" }。该选项repeatitems不存在，应将其删除。另一方面，我建议您在jqGrid中添加另外两个选项：gridview: true和autoencode: true。

一个非常重要的选择是 rowNum .它的默认值为 20 。该值将作为rows参数的值发送到服务器（请参阅LinqGridData的参数）。服务器应仅返回按sidx排序的rows项数据。如果服务器返回的更多rows项（最多 20 项），jqGrid 仍将仅显示前 rows 项（仅显示前 20 项）。通常，网格的寻呼栏位于网格的底部或顶部。因此，用户可以转到另一个页面。您当前既不使用page也不使用toppager选项。因此，网格将包含多达 20 行，用户将无法使用分页来查看其余数据。我建议您使用pager或toppager: true选项，或者至少您应该包含rowNum: 10000选项以显示从服务器返回的多达 10000 行。

如果你没有实现服务器端分页、数据排序和过滤，你可以将所有数据返回到 jqGrid，但使用 jqGrid loadonce: true选项。如果所有数据都保存在本地，则在第一次从服务器加载后，datatype将更改为"local"，用户将能够在本地对数据进行排序或使用分页，而无需编写任何其他代码。如果您需要显示的数据（tbl_Quickfix_Toolbar）不是太大，这是非常实用的选择。

相关内容

最新更新

热门标签：