问题的第 1 部分中您想要的所有内容都可以使用 jqGrid 3.7.x 来实现。您应该同时使用 datatype: 'json' 和 loadonce: true 参数。服务器应将所有数据发回。以jqgrid setGridParam datatype:local 为例。
你的问题的第二部分怎么样。在我看来,您试图使 jqGrid 过于复杂。我发现在 jqGrid 外部(例如在网格顶部)设置一些控件(选择/下拉框、复选框或单选按钮)要容易得多。如果用户在某些控件中进行了更改,您应该根据新选择的参数从服务器重新加载网格。以How to filter the jqGrid data NOT using the built in search/filter box 为例。如果您尝试将这种方式与loadonce: true 参数结合使用,您应该明白,在第一次使用loadonce: true 加载网格后,另一个参数datatype: 'json' 将更改 为datatype: 'local'。所以要重新加载网格,你应该在每次重新加载网格之前额外设置datatype: 'json'。
更新基于 cmets:嗯。如果您有一些预定义的数据集,您希望从服务器加载所有数据,然后快速显示所需的网格,您只需定义一些潜水并将所有 jqGrid(表格和分页 div 元素)放在相应的附加 div 内(每个 jqGrid 一个 div) .您可以在页面加载时开始将数据加载到所有这些网格中。您可以随时根据需要使父母 div 不可见或隐藏 jQuery.show() 和 jQuery.hide()。应该在页面开始隐藏的 div 可以有 CSS 样式display:none。
以下是使用缓存数据动态创建网格的另一个选项。您可以使用jQuery.remove() 删除一个jqGrid 并插入一个新的<table> 并使用jQuery.after() 之类的方法分页<div> 元素。通过这种方式,您可以绝对动态地构建 jqGrid。如果你这样做,你应该考虑到,jqGrid 在表格和分页 div 元素上创建一些额外的 div。因此,要删除 id="list" 的整个 jqGrid,您应该删除 id="gbox_list" 的 div。如果您将 <table> 和 paging <div> 都放在父 div 元素中,并且您可以在父 div 上使用 jQuery.empty() 和 jQuery.html() 方法来删除或插入新的 jqGrid,则另一种选择。
现在关于在 jqGrid 中显示单选按钮。如果您将使用自定义格式化程序,这是可能的。请参阅jqGrid: Editable column that always shows a select 作为示例,如何在 jqGrid 中显示选择(下拉框)。顺便说一句,与选择相比,我认为使用单选按钮没有任何优势。单选按钮在页面上只占据了更多的位置,用户将不得不频繁地滚动页面。
不过,我不建议您在 jqGrid 单元格中使用复杂元素。我建议您向您的用户演示 jqGrid 的“内联编辑”功能。这意味着如果用户选择一行或双击一行(您可以实现一种更喜欢您的用户的方式),该行将在编辑模式下切换,带有复选框、选择框(下拉框)、文本输入等.这是一种标准方式。从用户舒适度的角度来看,它比“表单编辑”有一些优势。您越远离标准方式,将来可能遇到的问题就越多。要演示“内联编辑”,您可以打开 http://trirand.com/blog/jqgrid/jqgrid.html 并在树左侧选择“行编辑”,然后选择“输入类型”。作为代码示例,您可以使用jqGrid - edit only certain rows for an editable column。
UPDATED 2:再补充一句。如果服务器上的数据不会经常更改,并且您希望在客户端有更长时间的缓存,您可以考虑使用 jqGrid 的prmNames: { nd:null} 参数,特别是如果您使用 Internet Explorer。如果你这样做,最后一个 HTTP GET 结果(包括jQuery.ajax 请求)将被缓存在客户端上,下一个 ajax rwquests 可以从本地浏览器缓存加载数据,而不是向服务器发送请求。如果服务器在响应中包含有关允许缓存时间的任何信息(HTTP 标头),它将在客户端自动使用 jQuery.ajax。
更新 3 基于发布的源代码:您的代码中有一些错误。这是固定代码
var myGrid = $("#mygrid").jqGrid({
datatype: 'local',
colModel: [
{ name: 'AID', label: 'Some ID', key: true, width: 100,
editable: false, sorttype: "int" },
{ name: 'Name', width: 300, editable: false },
{ name: 'Group', width: 100, editable: false },
{ name: 'Info', width: 100, editable: false },
{ name: 'AValue', width: 100, editable: true, edittype: 'text' }
],
pager: '#mypager',
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'AID',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false});
var mydata = [];
for (var i = 0; i < 100; i++) {
mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"});
}
myGrid.setGridParam({data: mydata}).trigger("reloadGrid");
你可以在这里试试http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm
更新 4:包含客户端编辑的相同示例在这里 http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm。它基于http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ 和Losing edited cell data after paging。