ajax - 在同一页面上加载多个 jqgrid

Question

我尝试在 mvc 应用程序的同一页面上使用两个不同的 jqgrid，表使用不同的 URL 加载数据和不同的名称。可以在同一个页面上使用多个 jqgrid!？!？

提前致谢

已更新:首先感谢您的快速回复

在我按照您告诉我的方式更改 ID 后，问题仍然存在!
这是我的代码:

Java脚本:

第一个网格:

jQuery("#listMedicosTODO").jqGrid({
    url: '/Medico/LoadToDoMedicos/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#pager1'),
    rowNum: 50,
    rowList: [50],
    sortname: 'Id',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Médicos',
    onSelectRow: function (id) {
        var data = $("#listMedicosTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
        //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complete"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

第二个网格:

jQuery("#listaAssistentesTODO").jqGrid({
    url: '/Medico/LoadToDoAssistentes/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Assistente', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'Assistente', index: 'Assistente', width: 100, align: 'center', sortable: false },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#page2'),
    rowNum: 50,
    rowList: [50],
    sortname: 'CodRelatorio',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Assistentes',
    onSelectRow: function (id) {
        var data = $("#listaAssistentesTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
         //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complet"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

服务器端点:

1º

if(list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords =  list.Count ;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
                       {
                           total = totalPages,
                           page,
                           records = totalRecords,
                           rows = (from item in list
                                   select new
                                              {
                                                  i ="a" + item.CodRelatorio,
                                                  cell = new[]
                                                             {
                                                                item.CodRelatorio ,
                                                                item.TituloRelatorio,
                                                                item.Assistente ,
                                                                "Em Elaboração",
                                                                item.DataUltimaActualizao
                                                             }

                                             }).ToArray()
                        };


    return Json(jsonData,JsonRequestBehavior.AllowGet);
}

2º终点

if (list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = list.Count;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = (from item in list
                select new
                {
                    i = "b"+ item.CodRelatorio,
                    cell = new[]
                                 {
                                    item.CodRelatorio ,
                                    item.TituloRelatorio,
                                    "Em Elaboração",
                                    item.DataUltimaActualizao
                                 }

                }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);

此代码包含您的建议

谢谢

Answer 1

可以在一个页面上使用多个作为一个 jqGrid。您应该知道的最重要的事情是您从服务器发布的id在两个网格中必须不同。例如，如果您需要第一个网格 id=1234 并且第二个网格相同，您可以对第一个网格使用 "a1234"，对第二个网格使用 "b1234"第二个。

如果您继续遇到两个网格的问题，您应该发布两个网格的定义(JavaScript 代码)以及遇到问题的测试 JSON 或 XML 数据。

已更新:您的主要错误是您没有在服务器端设置和id。而不是设置 i 属性，该属性未知且将被忽略。如果没有定义 id jqGrd 尝试使用整数:“1”、“2”、...值作为 id。这种“id-fix”适用于页面上有一个网格的情况，但不适用于两个网格。

所以你必须将 i ="a"+ item.CodRelatorio 和 i = "b"+ item.CodRelatorio 更改为 id ="a"+ item.CodRelatorio 和 id = "b"+ item.CodRelatorio。

诉说信任the demo example Phil Haack 发布的是相同的书写错误，但已于 2011 年 3 月 6 日修复(请参阅页面上的评论)。

你应该做的另一个小的改变是

1. 删除deprecated jqGrid 参数 imgpath。它已经很多年没有使用了。
2. 您可能想使用 height:'auto' 而不是未知参数 autowidth: true 和 autoheight: true。
3. 最好使用 pager:'#page1' 和 pager:'#page2' 而不是 pager: '#page1'和 pager: '#page2'。
4. 第一个网格没有名称为 'Id' 的列。因此，您应该将 sortname: 'Id' jqGrid 选项替换为例如 sortname: 'CodRelatorio'。

我建议您阅读 the answer 的“更新”部分.您可以下载the example从答案中提取并将其用作您的应用程序的模板。