Yo trate de usar dos diferentes jqgrid en la misma página con la aplicación de mvc, las tablas están utilizando diferentes tipos de URL para cargar datos y diferentes nombres. Es posible utilizar varios jqgrid en la misma página!?!?

Gracias de antemano

ACTUALIZADO: en Primer lugar gracias por la rápida respuesta

El problema continúe, después de cambiar los identificadores como me dijiste!

Aquí está mi código:

Javasrcipt :

Primera Cuadrícula :

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

Segunda Cuadrícula :

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

Extremo del servidor :

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º punto final

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

Este código contiene sus recomendaciones

Gracias

InformationsquelleAutor mastervv | 2011-05-13

2 Comentarios

  1. 6

    Es posible utilizar más como un jqGrid en una página. La cosa más importante que usted debe saber es que ids que has publicado desde el servidor debe ser diferente en ambas redes. Por ejemplo, si usted necesita para la primera cuadrícula id=1234 y lo mismo para la segunda cuadrícula puede utilizar "a1234" para la primera cuadrícula y "b1234" para el segundo.

    Si usted continúa teniendo problemas con dos parrillas usted debe publicar la definición (código JavaScript) de ambas redes y de la prueba, JSON o XML de datos con la que tiene problemas.

    ACTUALIZADO: Su principal error es que no establece y id en el lado del servidor. En lugar de que se establece i propiedad que es desconocido y que será ignorado. Si no id se define jqGrd intentar utilizar enteros: «1», «2», … valores como el id. Tales «id-fix» funciona en el caso de una cuadrícula en la página, pero no con dos parrillas.

    Así que usted tiene que cambiar i ="a" + item.CodRelatorio y i = "b"+ item.CodRelatorio a id ="a" + item.CodRelatorio y id = "b"+ item.CodRelatorio.

    Decir la confianza en la demo de ejemplo publicado por Phil Haack fue el mismo error de escritura, pero es fija en el Mar 06, 2011 (ver los comentarios en la página).

    Otro de los pequeños cambios que debes hacer son

    1. quitar obsoleto jqGrid parámetro imgpath. No se utiliza desde hace muchos años.
    2. en lugar de los parámetros desconocidos autowidth: true y autoheight: true que probablemente quería utilizar height:'auto'.
    3. es mejor utilizar pager:'#page1' y pager:'#page2' en lugar de pager: '#page1' y pager: '#page2'.
    4. La primera cuadrícula no tiene la columna con el nombre de 'Id'. Así que usted debe reemplazar sortname: 'Id' jqGrid opción para, por ejemplo,sortname: 'CodRelatorio'.

    Te recomiendo que leas la «actualización» de parte de la respuesta. Usted puede descargar el ejemplo de la respuesta y usarlo como plantilla para su aplicación.

    • El problema continúe, después de cambiar los identificadores como me dijiste!
    • Usted debe leer mi respuesta: «Si usted continúa teniendo problemas con dos rejillas se deben post la definición (código JavaScript) de ambas redes y de la prueba, JSON o XML de datos con los que tiene problemas».
    • He puesto el código javascript y el código server-side, por favor, eche un vistazo!!
    • He actualizado mi respuesta.
    • Si sigues teniendo problemas te recomiendo el post (modificar tu pregunta original y anexar más información) JSON datos que serán enviados desde el servidor para ambas redes. Usted puede usar Fiddler o Firefox para coger el real datos devueltos por el servidor. Entonces uno va a ser capaz de reproducir sus pruebas y ayudar a resolver el problema.
    • Pequeño aviso: 1234 no es un HTML válido de identificación, no debe empezar con un número.

  2. 0

    Sí, podemos utilizar varios Jqgrid en una sola página, pero tiene que dar diferentes Jqgrid Id.

    Vea a continuación el código. El Ejemplo de trabajo,

    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
    });
    });
    • Parece realmente ridículo para inicializar separar las redes de la misma página. Debe haber una manera para cargar los parámetros de forma dinámica.

Dejar respuesta

Please enter your comment!
Please enter your name here