【问题标题】:jqGrid on Clientside – paging/editing/sorting queries客户端上的 jqGrid – 分页/编辑/排序查询
【发布时间】:2011-03-12 22:37:19
【问题描述】:

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

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

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

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

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

感谢您提供的任何帮助,

比尔

【问题讨论】:

    标签: jquery jqgrid


    【解决方案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'

    更新基于 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

    【讨论】:

    • 谢谢奥列格。我见过的示例采用从服务器和页面/排序/等传递的数据。没问题。但是,我想从服务器获取数据并将其存储在客户端上的单独“缓存”变量中。然后我希望在页面上填充几个网格,例如Grid1 具有所有缓存行,其中 cacheRow.Array.Type = 1,Grid2 具有“Type=2”行,等等。我真的希望对从每个网格中添加和删除数据进行完整的客户端控制。当我这样做时,网格似乎没有正确“分页”——每个网格都显示了它的所有行!我认为一定缺少一些简单的东西。
    • 我认为我没有很好地解释第二部分。假设数据集是 [{ID:1,Name:'Bob',Gender:'Male'},{ID:1,Name:'Hilary',Gender:'Female'},...] 我的用户希望看到这在“性别”下有一列,每个单元格中有两个单选按钮,“男性”和“女性”。然后他们可以简单地查看列表,单击正确的收音机,然后保存数据。我的问题是:1)如何将单选按钮放入每个单元格。用户不想在每一行上单击“编辑”,而是希望将数据视为无线电。 2) 将收音机绑定到客户端数组中的“性别”列。希望你能帮忙?
    • 哎呀。应该是 [{ID:1,Name:'Bob',Gender:'Male'},{ID:2,Name:'Hilary',Gender:'Female'},...] 我相信你知道我的意思是:)
    • 奥列格。很简单,你就是一颗钻石!谢谢你看这个。实际上,我想我会尝试说服用户采用内联方法。如果他们有很多“批量”编辑要做,我会很难过,但事实并非如此,所以我认为我们还可以。再次感谢!
    • 欢迎您!我尝试了不同的方法,发现内联编辑对用户来说是最舒服的。顺便说一句,如果您有时在编辑模式下需要一些自定义控件(适用于内联和表单编辑),它也是可能的。看看stackoverflow.com/questions/3054811/…。祝你好运!
    【解决方案2】:

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

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

    【讨论】:

    • 谢谢 - 现在检查一下!
    【解决方案3】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-09
      • 2012-02-20
      • 2014-11-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多