在同一页面上加载多个jqgrid

Question

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

提前致谢

更新:首先感谢您的快速反应

正如你告诉我的那样,我改变了ids之后问题仍然存在!
这是我的代码:

Javasrcipt:

第一个网格:

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您从服务器发布的s 必须在两个网格中都不同.例如,如果您需要第一个网格,id = 1234,第二个网格则相同,您可以使用"a1234"第一个网格和"b1234"第二个网格.

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

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

所以,你必须改变i ="a" + item.CodRelatorio,并i = "b"+ item.CodRelatorio以id ="a" + item.CodRelatorio和id = "b"+ item.CodRelatorio.

告诉Phil Haack发布的演示示例中的信任是相同的写入错误,但它在2011年3月6日修复(请参阅页面上的注释).

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

1. 删除已弃用的 jqGrid参数imgpath.它多年没用了.
2. 而不是未知参数autowidth: true,autoheight: true你可能想用height:'auto'.
3. 最好使用pager:'#page1'而pager:'#page2'不是pager: '#page1'和pager: '#page2'.
4. 第一个网格没有名称的列'Id'.所以你应该替换sortname: 'Id'jqGrid选项sortname: 'CodRelatorio'.

我建议你阅读答案的"更新"部分.您可以从答案中下载示例并将其用作应用程序的模板.