Clientside上的jqGrid - 分页/编辑/排序查询

Question

我正在尝试使用jqgrid构建一个系统,该系统在客户端执行所有操作,即使用AJAX检索JSON对象(使用C#/ .Net)并将其缓存在javascript变量中,然后从该缓存中填充多个网格(addRowData) ,取决于数据.这一切都很好.

但是,我现在在发现如何做一些更高级的事情时遇到了问题.

1)在没有服务器交互的情况下分页/排序数据.这可能吗？或者它是否需要我编写自定义分页功能(即当用户移动到第2页时,从缓存中获取下10条记录并使用它们更新网格).希望有一种自动方式来做到这一点？排序怎么样？阅读一些建议它完成服务器端的东西,但也许它们是旧文章？不确定.

2)允许用户在每一行上查看控件(主要是单选按钮和日期选择器),并将这些更改反映在缓存变量中.我查看了jqGrid的编辑功能,但这似乎是"点击/编辑/保存".理想情况下,我希望网格的初始显示显示,例如,每行显示一对单选按钮的列,用户只需单击他们感兴趣的那些(即他们不必明确地"编辑" "要查看/更改单选按钮的行.此数据在网格中更新,更重要的是在驱动网格的缓存变量中更新.是否有自动方法将每行的控件绑定到底层客户端数据集？如何在每个单元格中创建控件并将其值与单元格值相关联？

有人可以指出我正确的方向吗？

谢谢你提供的所有帮助,

法案

Answer 1

您可以使用jqGrid 3.7.x实现您在问题的第1部分中想要的所有内容.您应该使用both datatype: 'json'和loadonce: true参数.服务器应该发回所有数据.请参阅jqgrid setGridParam数据类型:local作为示例.

你问题的第二部分怎么样？在我看来,你试图使jqGrid太复杂.我发现在jqGrid 之外设置一些控件(选择/下拉框,复选框或单选按钮)要容易得多(例如在网格顶部).如果用户在某些控件中进行了更改,则应根据新选择的参数从服务器重新加载网格.有关不使用内置搜索/过滤器框的示例,请参见如何过滤jqGrid数据.如果你尝试这种方式与组合loadonce: true,你应该understend参数,即电网与第一负载后loadonce: true的其他参数datatype: 'json' 将被更改到datatype: 'local'.因此,为了重新加载网格,您应该在datatype: 'json'每次重新加载网格之前另外设置.

根据评论更新:嗯.如果您有一些预定义的数据集,您希望从服务器加载所有数据,然后快速显示所需的网格,您只需定义一些潜水并将所有jqGrids(表和分页div元素)放在相应的附加div中(每个jqGrid一个div) .您可以在页面加载时开始将数据加载到所有这些网格.你让父母的div不可见或隐藏的尊重jQuery.show(),并jQuery.hide()随时在您需要.应该在页面开始处隐藏的Div可以具有CSS样式display:none.

下面是使用缓存数据创建网格的另一个选项.您可以删除jqGrid,jQuery.remove()并使用类似的方法插入新的<table>和分页<div>元素jQuery.after().通过这种方式,您可以绝对动态地构造jqGrid.如果你这样做,你应该考虑,jqGrid在表和分页div元素上创建一些额外的div.所以要删除id ="list"的整个jqGrid,你应该删除id ="gbox_list"的div.替代方法是,如果在父div元素中放置<table>和分页<div>,并且可以使用父div上的jQuery.empty()和jQuery.html()方法来删除或插入新的jqGrid.

现在关于在jqGrid中显示单选按钮.如果您将使用自定义格式化器,这是可能的.请参阅jqGrid:Editable列,该列始终显示select作为示例,如何在jqGrid中显示选择(下拉框).顺便说一句,我看到使用单选按钮与选择进行比较没有任何好处.单选按钮在页面上占据的位置更多,用户必须在页面上滚动页面.

不过我建议你不要在jqGrid单元格中使用复杂的元素.我建议您向用户演示jqGrid的"内联编辑"功能.这意味着如果用户选择一行或双击一行(您可以实现一种更喜欢您的用户的方式),该行将在编辑模式中切换,具有复选框,选择框(下拉框),文本输入等等.这是一种标准方式.从用户舒适的角度来看,它比"表单编辑"有一些优势.你越远离标准方式,你将来可能遇到的问题就越多.要演示"内联编辑",您可以打开http://trirand.com/blog/jqgrid/jqgrid.html然后在树上选择"行编辑",然后选择"输入类型".作为代码示例,您可以使用jqGrid - 仅编辑可编辑列的某些行.

更新2:再说一句小话.如果服务器上的数据不会被更改,并且您希望在客户端上有更长时间的缓存,则可以考虑使用prmNames: { nd:null}jqGrid的参数,尤其是在使用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/并在分页后丢失已编辑的单元格数据.