Question

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

提前致谢

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

我按照你告诉我的方式更改了ids之后问题仍然存在！这是我的代码：

Javasrcipt：

First Grid：

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);

此代码包含您的recomendations

由于

Answer 1

可以在一个页面上使用更多作为一个jqGrid。您应该知道的最重要的事情是，您在服务器中发布的id在两个网格中必须不同。例如，如果您需要第一个网格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。

告诉菲尔·哈克发布的the demo example信任是同一个写错误，但它定于2011年3月6日（见页面上的评论）。

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

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

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

Answer 2

是的，我们可以在一个页面中使用多个Jqgrid，但必须提供不同的Jqgrid ID。

见下面的代码。工作实例，

jQuery(document).ready(function () {

        $("#datagrid").jqGrid({    //////////// 1st Grid
            url: "service url",
            //url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],

            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right"},
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, height:20, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
    ],
viewrecords: true
});


       $("#datagrid1").jqGrid({               ///////////////2nd Grid

            url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],
            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right" },
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
        ]
viewrecords: true
});

});

在同一页面上加载多个jqgrid

2 个答案: