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

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之前的数据。