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

您想在问题的第1部分中获得的所有内容都可以用jqgrid3.7.x实现。你应该两者兼用 datatype: 'json' 和 loadonce: true 全部的 jqgrid setGridParam datatype:local 举个例子。

你问题的第二部分呢。在我看来,你试图使jqGrid过于复杂。我发现设置一些控件(选择/下拉框、复选框或单选按钮)要容易得多 外部 How to filter the jqGrid data NOT using the built in search/filter box 举个例子。如果你想把这种方式和 loadonce:真 loadonce:真 datatype:'json' 将会改变 到 datatype: 'local' datatype:'json' 每次重新加载网格之前。

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

jQuery.remove() <table> 和寻呼 <div> 元素的方法 jQuery.after() <表> 和寻呼 <部门> 在父div元素中,可以使用 jQuery.empty() jQuery.html() 方法来移除或插入新的jqGrid。

现在是关于jqGrid中单选按钮的显示。这是可能的,如果您将使用自定义格式化程序。看到了吗 jqGrid: Editable column that always shows a select

不过,我不建议您在jqGrid单元中使用复杂元素。我建议您向用户演示jqGrid的“内联编辑”功能。这意味着,如果用户选择一行或双击一行(您可以实现一种更喜欢您的用户的方式),该行将切换到编辑模式与复选框,选择框(下拉框),文本输入等。这是一个 标准 标准 你将来会遇到更多的问题。要演示“内联编辑”,可以打开 http://trirand.com/blog/jqgrid/jqgrid.html 在树的左边选择“行编辑”,然后选择“输入类型”。作为代码示例,您可以使用 jqGrid - edit only certain rows for an editable column .

更新2 :还有一句话。如果服务器上的数据不会频繁更改,并且您希望在客户端上有更长时间的缓存,则可以考虑使用 prmNames: { nd:null} jQuery.ajax 请求)将缓存在客户端上,下一个ajax rwquests可以从本地浏览器缓存加载数据,而不是向服务器发送请求。如果服务器在响应(HTTP头)中包含有关允许的缓存时间的任何信息,则将在中的客户端上自动使用该信息 .

根据发布的源代码:代码中有一些错误。这是固定密码

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

:此处是包含客户端编辑的相同示例 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 .

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

• 增加了本地分页,搜索,排序和虚拟滚动。请参见3.7中的新演示

然而,如果我点击“下一页”,我会看到一个简短的“加载”框,但没有任何变化。另外,如果单击要排序的第一列标题,则什么也不会发生。

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