jqGrid 实现排序（绑定动态数据和本地数据）

逃离我推掉我的手 2023-01-03 06:14 311阅读 0赞

## 1 实现排序（绑定动态数据） ##

function initGrid(gridId){
        jQuery("#"+gridId).jqGrid({
            url:"/loginLog/getLoginLogExtList",
            postData:{},
            datatype: 'json',
            height: $(window).height() - 115,
            width: $(window).width() - 7,
            rownumbers: true, //行号
            pager: "#pager",
            recordtext: "第{0} - {1}条  共 {2} 条",
            pgtext: '当 前 页 {0} 总 共 {1}页',
            rowNum: 50,
            rowList: [50, 100,150],
            autowidth: false,
            viewrecords: true,
            loadonce: true,
            sortable: true,
            colModel: colModel:[
                {label:"用户名",name:"username",index:"username",width:"150",align:"center",sortable: true},
                {label:"昵称",name:"pickname",index:"pickname",width:"150",align:"center"},
                {label:"登陆时间",name:"loginTime",index:"loginTime",width:"200",align:"center"},
                {label:"登陆城市",name:"loginArea",index:"loginArea",width:"200",align:"center"},
                {label:"ISP运营商",name:"loginIsp",index:"loginIsp",width:"100",align:"center"},
                {label:"IP",name:"loginIp",index:"loginIp",width:"150",align:"center"}
            ],
        });
    }

## 2 实现排序（绑定本地数据） ##

有两种数据绑定方法（addJSONData和addRowData）

### 2.1 填充数据+自动排序 ###

实现步骤：

第1步，给要排序的列加上sortable: true。

第2步，添加onSortCol()事件。

第3步，清空jqGrid的数据。

第4步，往jqGrid中填充数据。

function initGrid(gridId,gridData){
        $.jgrid.gridUnload(gridId);
        $("#"+gridId).jqGrid({
            datatype: 'local',
            width: $(window).width()-250,
            height:$(window).height()-240,
            rownumWidth:50,
            rowNum: 20, //在grid上显示记录条数，这个参数是要被传递到后台
            rowList: [20, 30, 50],
            shrinkToFit:false,
            loadonce:true,//开启分页
            colModel:[
                {label:"用户名",name:"username",index:"username",width:"150",align:"center",sortable: true},
                {label:"昵称",name:"pickname",index:"pickname",width:"150",align:"center"},
                {label:"登陆时间",name:"loginTime",index:"loginTime",width:"200",align:"center"},
                {label:"登陆城市",name:"loginArea",index:"loginArea",width:"200",align:"center"},
                {label:"ISP运营商",name:"loginIsp",index:"loginIsp",width:"100",align:"center"},
                {label:"IP",name:"loginIp",index:"loginIp",width:"150",align:"center"}
            ],
            onSortCol: function (index, colindex, sortorder) {//填充数据
                $("#"+gridId).jqGrid("clearGridData");
                for (var i = 0; i < gridData.length; i++) {
                    $("#datagrid").jqGrid('addRowData',i+1,gridData[i]);
                }
            }
        });
        //第一种绑定数据方法
        $('#'+gridId)[0].addJSONData(gridData);
        //第二种绑定数据方法
        //for (var i = 0; i < gridData.length; i++) {
            //$("#"+gridId).jqGrid('addRowData',i+1,gridData[i]);
        //}
    }

### 2.2 填充数据+自定义排序  ###

实现步骤：

第1步，给要排序的列加上sortable: true。

第2步，添加onSortCol()事件。

第3步，将要填充的数据进行排序。

第4步，清空jqGrid的数据。

第5步，往jqGrid中填充数据。

function initGrid(gridId,gridData){
        $.jgrid.gridUnload(gridId);
        $("#"+gridId).jqGrid({
            datatype: 'local',
            width: $(window).width()-250,
            height:$(window).height()-240,
            rownumWidth:50,
            rowNum: 20, //在grid上显示记录条数，这个参数是要被传递到后台
            rowList: [20, 30, 50],
            shrinkToFit:false,
            loadonce:true,//开启分页
            colModel:[
                {label:"用户名",name:"username",index:"username",width:"150",align:"center",sortable: true},
                {label:"昵称",name:"pickname",index:"pickname",width:"150",align:"center"},
                {label:"登陆时间",name:"loginTime",index:"loginTime",width:"200",align:"center"},
                {label:"登陆城市",name:"loginArea",index:"loginArea",width:"200",align:"center"},
                {label:"ISP运营商",name:"loginIsp",index:"loginIsp",width:"100",align:"center"},
                {label:"IP",name:"loginIp",index:"loginIp",width:"150",align:"center"}
            ],
            gridComplete:function(){
                $('#dataGrid').find(">tbody>tr.jqgrow:odd").addClass("jqGridEvenClass");
            },
            onSortCol: function (index, colindex, sortorder) {//填充数据
                var DataView = null;
                if (sortorder == 'desc') {//降序
                    DataView=JSLINQ(jsonData).OrderByDescending(function (x) { return x[index] });
                } else {//升序
                    DataView=JSLINQ(jsonData).OrderBy(function (x) { return x[index] });
                }
                if (DataView != null) {
                    $("#"+gridId).jqGrid("clearGridData");
                    for (var i = 0; i < DataView.items.length; i++) {
                        $("#datagrid").jqGrid('addRowData',i+1,DataView.items[i]);
                    }
                }
                return "stop";
            }
        });
        //第一种绑定数据方法
        $('#'+gridId)[0].addJSONData(gridData);
        //第二种绑定数据方法
        //for (var i = 0; i < gridData.length; i++) {
            //$("#"+gridId).jqGrid('addRowData',i+1,gridData[i]);
        //}
    }

注：

（1）绑定本地数据后，想要使用jqGrid的自动排序只需在onSortCol()事件中往jqGrid填充数据，onSortCol()事件结束后会自动根据该列自动排序。

（2）绑定本地数据后，想要自定义该列的排序方法，需要在onSortCol()事件结束时返回字符串stop，这样就不会在onSortCol()事件结束后触发该列的自动排序方法，导致自定义排序方法失效。

（3）在往jqGrid填充数据之前使用$("\#"+gridId).jqGrid("clearGridData");方法清空jqGrid之前的数据。

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关 jqGrid 实现分页显示2种情况(动态数据、本地数据)

1 jqGrid所需JS、CSS文件 <%--jqGrid的JS、CSS--%> <link href="../script/jqGrid/css/jqu

小灰灰/ 2023年10月07日 13:59/ 0 赞/ 11 阅读

相关 Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

系统管理员/ 2023年10月07日 13:31/ 0 赞/ 38 阅读

相关 EasyUI combobox（多选下拉框）绑定数据2种方式（动态数据绑定，本地数据绑定）

1 多选下拉框动态数据绑定 function BindMultiListCode(objId,codetype){ $('' + objId).c

曾经终败给现在/ 2023年10月05日 16:42/ 0 赞/ 21 阅读

相关 EasyUI combobox（单选下拉框）绑定数据3种方式（动态数据绑定，本地数据绑定，select标签渲染）

1 单选下拉框动态数据绑定 1.1 数据绑定 function BindListCode(objId,codetype,isshowblank,strReq

た入场券/ 2023年10月05日 14:05/ 0 赞/ 38 阅读

相关 jqGrid 实现排序（绑定动态数据和本地数据）

1 实现排序（绑定动态数据） function initGrid(gridId){ jQuery(""+gridId).jqGrid({

逃离我推掉我的手/ 2023年01月03日 06:14/ 0 赞/ 312 阅读

相关 jqGrid 实现分组两种情况（绑定动态数据、绑定本地数据）

1 实现分组（绑定动态数据） function initGrid(gridId,colModel){ jQuery(""+gridId).jqGr

「爱情、让人受尽委屈。」/ 2023年01月02日 05:21/ 0 赞/ 239 阅读

相关 jqGrid绑定Json数据

json： var jsonData = new \{ total = totalPages, page = page, records = totalReco

比眉伴天荒/ 2022年08月30日 04:13/ 0 赞/ 206 阅读

相关动态绑定和静态绑定

为了支持c++的多态性，才用了动态绑定和静态绑定。理解他们的区别有助于更好的理解多态性，以及在编程的过程中避免犯错误，需要理解四个名词： 1、对象的静态类型：对象在声明时采

喜欢ヅ旅行/ 2022年06月10日 01:24/ 0 赞/ 388 阅读

相关 HighCharts实现数据动态绑定（AJAX）

一、HighCharts-下载HighCharts文件包下载地址 [HighCharts7.0.3][HighCharts7.0.3] 如下： ![在这

淡淡的烟草味﹌/ 2022年02月19日 02:15/ 0 赞/ 255 阅读

相关数据绑定

什么是数据绑定呢？把WXML 中的⼀些动态数据分离出来放到对应的js⽂件的 Page 的 data⾥ <view>{ {username}}，您已登录

布满荆棘的人生/ 2021年07月24日 20:11/ 0 赞/ 544 阅读