Ajax 在同一页面上加载多个jqgrid

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

提前谢谢

更新：首先感谢您的快速响应

---

在我按照你告诉我的那样更改ID之后，问题仍然存在
这是我的密码：

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º

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

此代码包含您的建议

---

谢谢

在一个页面上使用多个jqGrid是可能的。您应该知道的最重要的一点是，您从服务器发布的

id

s在两个网格中必须不同。例如，如果第一个网格需要id=1234，第二个网格需要id=1234，则第一个网格可以使用

“a1234”

，第二个网格可以使用

“b1234”

如果两个网格仍然存在问题，您应该发布两个网格的定义（JavaScript代码）以及有问题的测试JSON或XML数据

已更新：您的主要错误是未在服务器端设置和

id

。而不是设置未知且将被忽略的

i

属性。如果未定义

id

，请尝试使用整数：“1”、“2”。。。值作为ID。这种“id修复”适用于页面上的一个网格，但不适用于两个网格

因此，您必须将

i=“a”+item.CodRelatorio

和

i=“b”+item.CodRelatorio

更改为

id=“a”+item.CodRelatorio

和

id=“b”+item.CodRelatorio

告诉菲尔·哈克（Phil Haack）发布的信任是同一个书写错误，但它是在2011年3月6日修复的（见页面上的评论）

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

删除jqGrid参数

imgpath

。多年来一直没有使用

您可能想使用

height:'auto'

而不是未知参数

autowidth:true

来代替

最好使用

pager:'#page1'

和

pager:'#page2'

而不是

pager:'#page1'

和

pager:'#page2'

第一个网格没有名为

'Id'

的列。因此，您应该将

sortname:'Id'

jqGrid选项替换为例如

sortname:'CodRelatorio'

---

我建议您阅读本手册的“更新”部分。您可以从答案下载并将其用作应用程序的模板。

是的，我们可以在一个页面中使用多个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
});

});

---

在我按照你告诉我的那样更改ID之后，问题仍然存在@mastervv：您应该阅读我的回答：“如果两个网格仍然存在问题，您应该发布两个网格的定义（JavaScript代码）以及您遇到问题的测试JSON或XML数据”。我发布JavaScript代码和服务器端代码，请查看@mastervv：如果您仍然有问题，我建议您发布（修改原始问题并附加更多信息）JSON数据，这些数据将从服务器发布到两个网格。您可以使用或捕获服务器返回的真实数据。然后你就可以重现你的测试并帮助你解决问题。注意：1234不是一个有效的HTML标识符，它不应该以数字开头。为同一页初始化单独的网格似乎真的很神奇。必须有一种动态加载参数的方法。

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

});