2011-05-13 146 views
3

我尝试在mvc应用程序的同一页面上使用两个不同的jqgrid,表格使用不同的URL来加载数据和不同的名称。有可能在同一页面上使用多个jqgrid!?!?在同一页面加载多个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 }); 

服务器端点:

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

感谢

回答

6

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

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

已更新:您的主要错误是,您没有设置和id在服务器端。而不是你设置i财产是未知的,哪些将被忽略。如果没有定义id jqGrd尝试使用整数:“1”,“2”,...值作为ID。这种“id-fix”在页面上有一个网格的情况下工作,但不在两个网格中。

所以你必须改变i ="a" + item.CodRelatorioi = "b"+ item.CodRelatorioid ="a" + item.CodRelatorioid = "b"+ item.CodRelatorio

为了说明Phil Haack发布的the demo example中的信任是相同的书写错误,但它在2011年3月6日修复(请参阅页面上的评论)。

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

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

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

+0

问题仍然存在,因为您告诉我我更改了ID! – mastervv

+0

@mastervv:您应该阅读我的回答:“如果您仍然有两个网格出现问题,您应该**发布两个网格的定义(JavaScript代码)以及您遇到问题的测试JSON或XML数据** ”。 – Oleg

+0

我发布的JavaScript代码和服务器端代码,请看看它! – mastervv

0

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

});