0

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

我的项目设置是：ASP.NET - MVC2 使用 Visual Studio 2010。框架是 .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'}
],

我还想知道如何显示从 C# 代码返回的 JSON 数据的所有内容，如何在 中显示对象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);
    }
4

1 回答 1

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中只有一些意义。您发布的服务器代码不使用和参数。所以你应该从. 如果没有指定属性，jqGrid 使用与value属性相同的值。这是 99% 的场景中需要的。因此，我建议您不指定任何属性。因为您使用数组格式的项目（属性的选择是自由的。您可以以相同的方式使用。如果数据库中的列名称是，我个人更喜欢使用相同的值。sidxsordindexcolModelindexindexnameindexcell = new string[] {...}namename: 'NAME_TXT'name: 'NAME'NAME_TXTDESCRIPTION_TXTname

align属性的默认值已经是'left'。所以最好align: 'left'从colModel. '500px'for选项的值height是错误的。正确的值是字符串"auto"或字符串"100%"或任何整数值，如height: 500. 我个人喜欢用height: "auto".

jqGrid 没有contentType选项。如果您需要指定contentTypeHTTP 请求，则应{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，但使用loadonce: truejqGrid 的选项。如果所有数据都将保存在本地，datatype将"local"在第一次从服务器加载后更改为，用户将能够在本地对数据进行排序或使用分页，而无需您编写任何额外的代码。如果您需要显示的数据（tbl_Quickfix_Toolbar）不是太大，这是非常实用的选择。

于 2013-11-09T21:17:54.153 回答