jqGrid - 同一页面上的多个网格仅显示一个寻呼机
Posted
技术标签:
【中文标题】jqGrid - 同一页面上的多个网格仅显示一个寻呼机【英文标题】：jqGrid - Multiple grids on same page shows only one pager 【发布时间】：2013-04-24 17:44:06 【问题描述】：我正在编写一个包含多个 jqGrid 的页面。我的代码遵循 javascript MVC 模式，该模式将为我的 html 元素（包括 jqGrids）提供 API。因此，归根结底，我可以通过调用我的 API 来创建网格。比如：
var grid1 = new grid();
grid1.init();
var grid2 = new grid();
grid2.init();
我已经使用其他 javascript 组件完成了它，并且效果很好。但是，当我在同一页面上创建多个 jqGrid 实例时，页面上只有一个 jqPager 附加到最后一个网格。有人知道为什么吗？
这是我的代码（请注意，这是一个简化版本，实际上我将其分隔在不同的 .js 文件中，并且还遵循许多其他设计模式）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
</head><body>
<!-- IMPORT JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>
<script>
$(document).ready(function()
function grid()
//=== LOCA VARIABLES ===//
var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");
var localData1 =
"page" : 1,
"totalRecords" : 5,
"pageSize" : 3,
"rows" : [
Name : "Name 1",
Name : "Name 3",
Name : "Name 2"
]
;
function publicInit()
$("body").append(myGrid, myPager);
myGrid.jqGrid(
pager : myPager,
data: localData1.rows,
datatype : "local",
colModel : [
name : 'Name', index : 'Name', width : "500"
],
localReader:
repeatitems: false
,
rowNum : 3,
viewrecords : true,
height : "auto",
ignoreCase : true
);
//=== REVEALING PATTERN===//
return
init: publicInit
;
var grid1 = new grid();
grid1.init();
$("body").append("<br><br>"); //Add some spacing to distinguish between both grids
var grid2 = new grid();
grid2.init();
);
</script>
</body>
</html>
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：在我看来，您的代码生成了具有相同 id 属性的<table> 和<div> 元素。所以第二个网格var grid2 = new grid(); 只需添加页面上已经存在的<table> 和<div> 元素。这是一个错误。一个 HTML 页面上所有元素的所有 id 属性必须是唯一的。所以myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");和var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");这行必须改。
如果您只需要分配 一些 唯一 ID，您可以使用 jqGrid 内部使用的 $.jgrid.randId() 方法。代码可以是
var myGrid = $("<table>").attr("id", $.jgrid.randId());
var myPager = $("<div>").attr("id", $.jgrid.randId());
此外，我强烈建议您使用 JavaScript 中使用的名称转换。如果你需要使用new操作符来创建一个对象，你应该将函数grid重命名为Grid。
【讨论】：
你是对的。我做到了并且工作了。我现在将使用随机 ID，稍后会增强此解决方案。在我看来，jqGrid 在我的情况下不应该考虑任何 id，因为我传递的是对象而不是任何 id (pager : myPager)。 写，名称转换不是问题。我正在使用示例中未显示的命名空间 @YoriKusanagi：如果您使用pager : myPager 形式的jqGrid 选项，那么jqGrid 将立即将其规范化为pager : "#" + idOfPager 形式（参见jqGrid 代码的the part）。 jqGrid根据grid的id的pager的id构造了grid的很多内部元素的id。必须分配一些 id。
@YoriKusanagi：关于名称转换和编写程序的风格：确实严格建议使用您编写的语言中使用的风格，而不是重复您在其他计算机语言中使用的样式。用var variableWhichHaveAlwaysOnlyIntererValue = true;好不好？如果有人在代码中间看到变量variableWhichHaveAlwaysOnlyIntererValue，就会误解您的代码。你知道我提到的至少一个不进行命名转换的 JavaScript 函数吗？一个人使用var d = new Date(); 只是因为名字。
感谢您的澄清。是的，我现在意识到了。嗯，有一些我个人不喜欢的东西，比如在创建 myGrid.jqGrid() 之前需要在'body' 中有 myGrid (以上是关于jqGrid - 同一页面上的多个网格仅显示一个寻呼机的主要内容，如果未能解决你的问题，请参考以下文章