以下是我的代码,我是JQgrid的新手,我确实按照维基上提供的示例进行了操作,但由于一些奇怪的原因,我无法在导航栏上看到任何搜索选项,任何帮助都会真的赞赏
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "genxml3.php",
datatype: "xml",
mtype: "GET",
colNames: ["A", "T", "E"],
colModel: [
{ name: "A", Index: 'Name', width: 155 },
{ name: "T", width: 290 },
{ name: "E", width: 80, align: "right" ,sortable: false},
],
pager: "#pager",
height:"100%",
rowNum: 20,
rowList: [40, 80, 120],
rownumbers: true,
rownumWidth: 40,
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Digital List"
})
});
jQuery("#list").jqGrid('navGrid','#pager', {edit:false,add:false,del:false}, {}, {}, {}, {multipleSearch:true, multipleGroup:true, showQuery: true}
);
</script>
答案 0 :(得分:1)
我觉得navGrid
电话错误的地方。你很聪明地将它置于 $(function () {...})
块之外。因此,在创建网格并且navGrid
失败之前,{em}将调用<{1}}。您需要将行navGrid
移到上面一行以解决问题。
此外,您应该从列jQuery("#list").jqGrid('navGrid', ...);
中删除Index: 'Name'
。 JavaScript的第一个区分大小写,只有"A"
和index
属性。此外,建议不要使用Index
属性,而不是真正需要它。选项index
可能没什么意义,因为您没有名称为sortname: "invid"
的列。
另一个评论。您应该包含invid
选项以提高网格性能,并考虑使用gridview: true
选项。如果您不使用loadonce: true
选项,则服务器(loadonce: true
)必须实现服务器端分页,排序和过滤(搜索)。如果没有那么大的数据集(例如少于1000行或10000行),如果服务器返回所有数据(如果您有任何用途,最初按url: "genxml3.php"
排序)可能会更有效。 jqGrid会将返回的数据保存在内部sortname
参数中,这些参数通常用于data
,然后它会将datatype: "local"
更改为datatype
。因此,jqGrid将实现排序,分页和过滤/搜索本地,而无需向服务器发出任何请求。通常,如果行数不是很大,本地排序可以作为对服务器的请求快速运行。