Question

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

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

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

jqGrid显示两行，但它在第一行显示我的id行，它应该显示Description列显示的内容。所以基本上发生的事情是，行正在向右移动，而我的列映射它不起作用。 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);
    }

Answer 1

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

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

...
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参数。因此，您应该从index 删除所有colModel属性。如果没有指定index属性，则jqGrid使用与index相同的值作为值name属性。这是99％的场景中所需要的。所以我建议你不要指定index属性。因为您使用项目的数组格式（cell = new string[] {...}，所以name属性的选择是免费的。您可以像name: 'NAME_TXT'一样使用name: 'NAME'。如果列的名称在数据库是NAME_TXT和DESCRIPTION_TXT我个人更喜欢为name使用相同的值。

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

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

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

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

jqGrid JSON映射不读取INDEX值

1 个答案: