【问题标题】:Load multiple jqgrid on same page在同一页面上加载多个 jqgrid
【发布时间】:2011-08-25 03:57:15
【问题描述】:

我尝试在 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 });

服务器端点:

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

此代码包含您的建议

谢谢

【问题讨论】:

    标签: ajax model-view-controller jqgrid


    【解决方案1】:

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

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

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

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

    告诉 Phil Haack 发布的对 the demo example 的信任是相同的书写错误,但已在 2011 年 3 月 6 日修复(请参阅页面上的 cmets)。

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

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

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

    【讨论】:

    • 按照你说的修改id后问题依旧!
    • @mastervv:您应该阅读我的回答:“如果您将继续遇到两个网格的问题,您应该发布两个网格的定义(JavaScript 代码)和测试 JSON 或 XML您遇到问题的数据”。
    • 我贴出javascript代码和服务器端代码,请大家看看!!
    • @mastervv:如果您仍然有问题,我建议您发布(修改您的原始问题并附加更多信息)JSON 数据,这些数据将从服务器发布到两个网格。您可以使用FiddlerFirebug 来捕获服务器返回的真实数据。然后一个人将能够重现您的测试并帮助您解决问题。
    • 小提示:1234不是有效的HTML标识符,不能以数字开头。
    【解决方案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
    });
    
    });
    

    【讨论】:

    • 为同一页面初始化单独的网格似乎真的很荒谬。一定有办法动态加载参数。
    猜你喜欢
    • 2017-09-22
    • 2017-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-24
    • 1970-01-01
    相关资源
    最近更新 更多