2

脚本：

$.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 }}

谢谢。

4

1 回答 1

1

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

顺便说一句，您不能使用和colNames使用colModellabel内部的属性。在这种情况下，jqGrid 将为您生成。colNames

如果您需要更改内部的列标题，loadComplete或者仅使用withbeforeProcessing是不够的，因为已经创建了标题。所以你必须手动修改列标题的文本。您可以使用列标题将由 构造的事实，网格的 id 和来自属性的值来自。setGridParamcolNames"jqgh_"namecolModel

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

例如，如果您使用columnChooser ，您仍然需要使用setGridParamwith 。从相应的对话框中读取当前值并使用它。colNamescolumnChoosercolNames

于 2012-11-19T11:01:40.937 回答