具有动态 colNames 的 Jqgrid？

Question

脚本：

$.ajax({
    url: '/Widget/GetTestData',
    type: 'POST',
    data: {},
    success: function (result) {
        var colModels = result.Json.colModels;
        var colNames = result.Json.colNames;
        var data = result.Json.data.options;
        $("#grid_table").jqGrid({
            datatype: 'jsonstring',
            datastr: data,
            colNames: colNames,
            colModel: colModels,
            jsonReader: {
                root: 'rows',
                repeatitems: false
            },
            gridview: true,
            pager: $('#gridpager'),
            height: 349,
            width:968,
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true
        }).navGrid('#gridpager'); //end jqgrid
    },
    error: function (result) {
        alert("Seçilen kritere uygun veri bulunamadı!");
    }
});    //end ajax

控制器

public ActionResult GetTestData()
{
    var result = new
        {
            Json = new
            {
                colNames = new[]
                {
                    "T1","T2"
                },
                colModels = new[]
                {
                   new {
                        index = "T1",
                        label = "T1",
                        name = "T1",
                        width = 100
                    },new {
                        index = "T2",
                        label = "T2",
                        name = "T2",
                        width = 100
                    }
                },
                data = new
                {
                    options = new
                    {
                        page = "1",
                        total = "1",
                        records = "1",
                        rows = new[] {
                            new{T1=123,T2=321},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934}
                        }
                    }
                }
            }
        };
}

此代码有效。它从服务器获取所有数据。但我想从服务器获取部分数据，每页。

当我写以下内容时，我可以做我想做的事，但我无法动态获取 colNames。

$("#grid_table").jqGrid({
    url: '/Widget/GetGridData',
    datatype: "json",
    mtype: 'POST',
    postData: { DateRangeType: date_range_id, MeterType: meter_type_id, StartDate: start_date, EndDate: end_date },
    colNames: ['Okuma Tarihi', 'T1', 'T2', 'T2', 'Toplam'],
    colModel: [
            { name: 'OkumaTarihi', index: 'OkumaTarihi', width: 150, sortable: true, editable: false },
            { name: 'T1', index: 'T1', sortable: true, editable: false },
            { name: 'T2', index: 'T2', sortable: true, editable: false },
            { name: 'T3', index: 'T3', sortable: true, editable: false },
            { name: 'Toplam', index: 'Toplam', sortable: true, editable: false }
       ],
    rowNum: 20,
    rowList: [20, 30],
    pager: $('#gridpager'),
    sortname: 'Name',
    viewrecords: true,
    sortorder: "asc",
    width: 968,
    height: 349,
    jsonReader: {
        root: "rows", //array containing actual data
        page: "page", //current page
        total: "total", //total pages for the query
        records: "records", //total number of records
        repeatitems: false,
        id: "id" //index of the column with the PK in it
    }
}).navGrid('#gridpager'); //end jqgrid

控制器

public ActionResult GetGridData(string sidx, string sord, int page, int rows)
{
    IEnumerable<MeterReadingsForChart> meterReadings = MeterReadingManager.GetCustomerTotalMeterReadings(9, 1, /*DateTimeManager.GetStartDate(0)*/DateTime.Now.AddDays(-40), DateTime.Now, DateTimeManager.GetTimeIntervalTypeById(0));

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = meterReadings.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var result = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = meterReadings.Skip((pageIndex) * pageSize).Select(x => new { T1 = x.Name, OkumaTarihi = x.ReadDate.ToString("dd.MM.yyyy - hh:mm:ss"), Value = x.Value }).ToArray()
    };

    return Json(result, JsonRequestBehavior.AllowGet);
}

如何将它们一起制作？ （动态列名和从服务器中获取每页数据）

更新（场景）

我每五分钟就有一次仪表读数。我每小时、每天等对它们进行分组……我还将它们分组为meterType（{T1，T2，T3}，{Reactive，Active，Capasitive，..}，{...}）。

例如电网：

T1 | T2 | T3 | .... |

能源网：

Active | Reactive | .... | ....

和其他人：

我想用网格的默认值传递额外的参数（rangeType、meterType）。并创建新的网格值（colNames、ColModels 和数据）。那么我该如何做所有这些。

它可以是一个返回网格 colNames 的方法和另一个返回网格数据的方法？

我的意思是：

1. public Json GetGridOptions{ return colNames and colModels }
2. public Json GetGridData{ return GridData }

1. $.ajax { url : GetGridOptions }
2. $.grid { url : GetGridData }}

谢谢。

Answer 1

colModel 和 colNames 的动态加载在某些情况下是实用的。如果您这样做，您将在您自己的 Ajax 请求的 success 回调中创建网格。为了确保您在第一次这样做，您应该另外使用GridUnload（请参阅here 的演示）。

顺便说一句，您不能使用 colNames 并使用 label 内部的 label 属性来代替 colModel。如果 jqGrid 会为你生成colNames。

如果您需要更改loadComplete 或beforeProcessing 内的列标题，仅将setGridParam 与colNames 一起使用是不够的，因为标题已经创建。因此，您必须手动修改列标题的文本。您可以使用以下事实：列标题将由"jqgh_" 构造，网格的 id 和来自name 属性的值来自colModel。

如果您将colNames 的值以<span class="someClass">My column Header Text</span> 之类的HTML 形式使用，您将获得与"My column Header Text" 相同的结果，但您将能够更容易地找到和修改标题。

例如，如果您使用columnChooser，您仍需要将setGridParam 与colNames 一起使用。 columnChooser 从colNames 读取当前值并在相应的对话框中使用它。