jQuery 客户端上的 jqGrid – 分页/编辑/排序查询

jqGrid on Clientside – paging/editing/sorting queries

提问by jqwha

I'm trying to build a system using jqgrid which does everything on the clientside, i.e. use AJAX to retrieve a JSON object (using C#/.Net) and cache this in a javascript variable and then populate several grids from that cache (addRowData), depending on the data. That's all working very well.

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

However, I'm having problems discovering how to do some of the more advanced things now.

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

1) paging/sorting the data with no server interaction. Is this possible? Or does it require that I write custom paging functions (i.e. when the user moves to page 2, get the next 10 records from the cache and update the grid with them). Hopefully there's an automatic way to do this? How about sorting? Read some things that suggest its done server side but maybe they were old articles? Not sure.

1) 在没有服务器交互的情况下对数据进行分页/排序。这可能吗？或者它是否需要我编写自定义分页函数（即当用户移动到第 2 页时，从缓存中获取接下来的 10 条记录并用它们更新网格）。希望有一种自动的方法来做到这一点？分拣怎么样？阅读一些表明其已完成服务器端的内容，但也许它们是旧文章？没有把握。

2) Allow the users to see controls (mainly radio buttons and datepicker) on each row and have those changes reflected in the cache variable. I looked at the editing functions of jqGrid but this seems to be "click/edit/save". Ideally I'd like the grid's initial display to show, for example, one of the columns displaying pairs of radio buttons on every row and the user can just click the ones they are interested in (i.e. they don't have to explicitly "edit" the row to see/change the radio buttons). This data is updated in the grid and, more importantly, in the cache variable driving the grid. Is there an automatic way of tying controls on each row to an underlying client dataset? How do I create the controls in each cell and relate their value to the cell value?

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

Hoepfully someone could point me in the right direction?

希望有人能指出我正确的方向吗？

Thanks for any help you can give,

谢谢你提供的所有帮助，

Bill

账单

回答by Oleg

All what you want to have in the part 1 of your question can be implemented with jqGrid 3.7.x. You should use both datatype: 'json'and loadonce: trueparameters. The server should send allthe data back. See jqgrid setGridParam datatype:localas an example.

您想在问题的第 1 部分中获得的所有内容都可以使用 jqGrid 3.7.x 来实现。您应该同时使用datatype: 'json'和loadonce: true参数。服务器应该将所有数据发回。以jqgrid setGridParam datatype:local为例。

What about the second part of your question. It seems to me that you try to make jqGrid too complex. I find much easier to set some controls (select/dropdown boxes, checkboxes or radio buttons) outsideof the jqGrid (for example on top of the grid). If the user make changes in some of this control you should reload the grid from the server based on the new choosed parameters. See How to filter the jqGrid data NOT using the built in search/filter boxas an example. If you will try to combine this way with the loadonce: trueparameter you should understend, that after the first load of grid with loadonce: truethe other parameter datatype: 'json'will be changedto datatype: 'local'. So to reload the grid you should additionally set datatype: 'json'every time before reloading the grid.

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

UPDATEDbased on comments: Well. If you have some predefined data sets, you want load all from the server and then quick display the grid needed you can just define some dives and place all jqGrids (table and paging div elements) inside the corresponding additional div (one div per jqGrid). You can start loading the data to all this grids at the page loading. You makes parents divs invisible or hidden with respect of jQuery.show()and jQuery.hide()anytime when you need. Divs which should be hidden at the page start can have CSS style display:none.

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

Another option to create grids dinamically with cached data is following. You can remove a jqGrid with jQuery.remove()and insert a new one <table>and paging <div>element with a method like jQuery.after(). With this way you can construct jqGrid absolutely dynamiclly. If you do so you should take in consideration, that jqGrid create some additional divs over table and paging div elements. So to delete whole jqGrid with id="list" you should remove div with id="gbox_list". Alternative if you place both <table>and paging <div>in a parent div element and you can use jQuery.empty()and jQuery.html()methods on the parent div to remove or insert a new one jqGrid.

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

Now about displaying of radio buttons inside of jqGrid. This is possible if you will use custom formater. See jqGrid: Editable column that always shows a selectas example how to display selects (dropdown boxes) inside of jqGrid. By the way I see no advantage to use radio buttons compareing with selects. Radio buttons took only more place on the page and users will have to scroll the page friquently.

现在关于在 jqGrid 中显示单选按钮。如果您将使用自定义格式化程序，这是可能的。请参阅jqGrid：始终显示选择的可编辑列作为示例如何在 jqGrid 内显示选择（下拉框）。顺便说一句，与选择相比，我认为使用单选按钮没有优势。单选按钮仅在页面上占据更多位置，用户将不得不频繁地滚动页面。

Nevertheless I don't recommend you to use complex elements inside of jqGrid cells. I recommend you to demonstrate to your users "Inline Editing" feature of jqGrid. It means if user select a row or make double-click on a row (you can implement one way which prefer your users) the row will be switched in the editing mode with checkboxes, select boxes (dropdown boxes), text inputs and so on. This is a standardway. It have some advantages over "form editing" from the side of users comfort. The more you go away from the standardways the more problems you could receive in the future. To demonstrate "inline editing" you can open http://trirand.com/blog/jqgrid/jqgrid.htmland choose on the tree left "Row Editing" and then "Input Types". As a code example you can use jqGrid - edit only certain rows for an editable column.

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

UPDATED 2: One more small remark. If the data on the server will be not changed friquently and you want more long time cache there on the client you can consider to use prmNames: { nd:null}parameter of jqGrid especially if you use Internet Explorer. If you do this the last HTTP GET results (inclusive jQuery.ajaxrequests) will be cached on the client and next ajax rwquests can load data from the local browser cache instead of sending requests to the server. If the server include any information about the allowed caching time in the response (HTTP headers) it will be automatically used on the client in jQuery.ajax.

更新 2：还有一句小话。如果服务器上的数据不会频繁更改，并且您希望在客户端上有更长的缓存时间，则可以考虑使用prmNames: { nd:null}jqGrid 的参数，尤其是在使用 Internet Explorer 时。如果你这样做，最后一个 HTTP GET 结果（包含jQuery.ajax请求）将被缓存在客户端上，下一个 ajax rwquests 可以从本地浏览器缓存加载数据，而不是向服务器发送请求。如果服务器在响应（HTTP 标头）中包含有关允许缓存时间的任何信息，它将在jQuery.ajax.

UPDATED 3based on the source code posted: You have some errors in the code. Here is the fixed code

根据发布的源代码更新 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");

You can try it here http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

你可以在这里尝试http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

UPDATED 4: The same example inclusive the client side editing is here http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm. It is based on the http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/and Losing edited cell data after paging.

更新 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。

回答by Gregg

The latest version of jqGrid has what you need, I believe. From this link

我相信最新版本的 jqGrid 有你需要的东西。从这个链接

• Added local paging, searching, sorting and virtual scrolling. Please see demo New in 3.7

• 添加了本地分页、搜索、排序和虚拟滚动。请参阅演示 3.7 中的新功能

回答by jqwha

My code is below. InitGridTestBulkLoad runs after the grid load is complete and the first page of 10 records display correctly. Paging controls indicate there I'm on page 1 of 10.

我的代码如下。InitGridTestBulkLoad 在网格加载完成且第一页 10 条记录正确显示后运行。分页控件表明我在第 1 页，共 10 页。

However, if I hit "Next Page" I see a brief "Loading" box but nothing changes. Also, if I click the first column heading to sort, nothing happens.

但是，如果我点击“下一页”，我会看到一个简短的“正在加载”框，但没有任何变化。此外，如果我单击第一列标题进行排序，则什么也不会发生。

Grid def and code to store the "cached" data and load it into the grid is:

用于存储“缓存”数据并将其加载到网格中的网格定义和代码是：

jQuery(document).ready(function() {
    jQuery("#mygrid").jqGrid({
        dataType: "local",
        data: {},
        colNames: ['AID', 'Name', 'Group', 'Info', 'AValue'],
        colModel: [
                        { name: 'AID', label: 'Some ID', index: 'SomeID', width: 100, editable: false, sorttype: "int" },
                        { name: 'Name', label: 'Name', index: 'Name', width: 300, editable: false },
                        { name: 'Group', label: 'Group', index: 'Group', width: 100, editable: false },
                        { name: 'Info', label: 'Info', index: 'Info', width: 100, editable: false },
                        { name: 'AValue', label: 'AValue', index: 'AValue', width: 100, editable: true, edittype: 'text' }
                      ],
        pager: '#mypager',
        rowNum: 10,
        rowList: [10, 20, 500],
        viewrecords: true,
        loadonce: true,
        autowidth: true,
        sortname: 'AID',
        sortorder: 'desc'
    });

});

var oJR = {};
oJR.rows = new Array();
function InitGridTestBulkLoad() {
    oJR.total = 100;
    oJR.page = 1;
    oJR.records = 100;
    for (var i = 0; i < 100; i++) {
        var s = i.toString();
        oJR.rows[i] = {};
        oJR.rows[i].id = i;
        oJR.rows[i].cell = [s, "123", "456", "78", "8"];
    }

    var mg = $("#mygrid");
    mg[0].addJSONData(oJR);
}