Question

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

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

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

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

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

感谢您提供任何帮助，

比尔

Answer 1

您在问题的第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'。

根据评论

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

使用缓存数据创建网格的另一个选项如下。您可以使用jQuery.remove()删除jqGrid，并使用<table>等方法插入新的<div>和分页jQuery.after()元素。通过这种方式，您可以绝对动态地构造jqGrid。如果你这样做，你应该考虑，jqGrid在表和分页div元素上创建一些额外的div。所以要删除id =“list”的整个jqGrid，你应该删除id =“gbox_list”的div。或者，如果您将<table>和分页<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。

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

Answer 2

我相信最新版本的jqGrid有你需要的东西。从link

开始

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

Answer 3

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

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

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

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);
}

客户端的jqGrid - 分页/编辑/排序查询

3 个答案: