同一页面加载多个jqgrid
我尝试在同一页面上使用两个不同的 jqgrid 和 mvc 应用程序，表使用不同的 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°
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);
点此代码包含您的建议
谢谢
I try to use two different jqgrid on the same page with the mvc application, tables are using diferent URL to load data and diferent names. It's possible use multiple jqgrid on same page!?!?
Thanks in advance
UPDATED: First thanks for the quick response
The problem continue after I've change the ids as you told me!
Here is my code:
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 });
Second Grid :
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 });
Server endpoint :
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º end point
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);
This code contain your recomendations
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可以在一页上使用多个 jqGrid 作为一个。您应该知道的最重要的事情是，您从服务器发布的
id在两个网格中必须不同。例如，如果您需要第一个网格 id=1234 且第二个网格也需要相同，则可以对第一个网格使用"a1234"，对第二个网格使用"b1234"第二个。如果您仍然遇到两个网格的问题，您应该发布两个网格的定义（JavaScript 代码）以及您遇到问题的测试 JSON 或 XML 数据。
更新：您的主要错误是您没有在服务器端设置
id。相反，您设置的是未知且将被忽略的i属性。如果没有定义id，jqGrd 尝试使用整数：“1”、“2”、...值作为 id。这种“id-fix”适用于页面上只有一个网格的情况，但不适用于两个网格。因此，您必须将
i ="a" + item.CodRelatorio和i = "b"+ item.CodRelatorio更改为id ="a" + item。 CodRelatorio和id = "b"+ item.CodRelatorio。告诉对的信任Phil Haack 发布的演示示例 也是同样的书写错误，但已于 2011 年 3 月 6 日修复（请参阅页面上的评论）。
您应该做的另一个小更改是
imgpath。它已经很多年没有被使用了。height:'auto'而不是未知参数autowidth: true和autoheight: true。pager:'#page1'和pager:'#page2'而不是pager: '#page1'和寻呼机：'#page2'。'Id'的列。因此，您应该将sortname: 'Id'jqGrid 选项替换为sortname: 'CodRelatorio'。我建议您阅读 答案。您可以从答案中下载示例并将其用作模板为您的应用程序。
It is possible to use more as one jqGrid on one page. The most important thing which you should know is that
ids which you posted from the server must be different in both grids. For example if you need for the first grid the id=1234 and the same for the second grid you can use"a1234"for the first grid and"b1234"for the second one.If you will continue to have problems with two grids you should post the definition (JavaScript code) of the both grids and the test JSON or XML data with which you have problems.
UPDATED: Your main error is that you don't set and
idon the server side. Instead of that you setiproperty which is unknown and which will be ignored. If noidis defined jqGrd try to use integers: "1", "2", ... values as the ids. Such "id-fix" works in case of one grid on the page, but not with two grids.So you have to change
i ="a" + item.CodRelatorioandi = "b"+ item.CodRelatoriotoid ="a" + item.CodRelatorioandid = "b"+ item.CodRelatorio.To tell the trust in the demo example posted by Phil Haack was the same writing error, but it is fixed at Mar 06, 2011 (see the comments on the page).
Another small changes which you should do are
imgpath. It is not used since many years.autowidth: trueandautoheight: trueyou probably wanted to useheight:'auto'.pager:'#page1'andpager:'#page2'instead ofpager: '#page1'andpager: '#page2'.'Id'. So you should replacesortname: 'Id'jqGrid option to for examplesortname: 'CodRelatorio'.I recommend you to read the "UPDATED" part of the answer. You can download the example from the answer and use it as the template for your application.
是的，我们可以在一个页面中使用多个Jqgrid，但必须给出不同的Jqgrid ID。
请参阅下面的代码。工作示例，
Yes, we can use multiple Jqgrid in a single page, but have to give different Jqgrid IDs.
See below code. The working Example,