jqGrid置顶所有选中行

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

本篇文章要讲的是当利用jqGrid提供的api接口，实现Grid内容多选时，所有所选行置顶的显示效果，方便查看所有选中内容。

前提：jqGrid设置为多选，表格行较多表格出现滚动条，尤其当不分页显示数据较多，而所选项目比较分散；

需求：用户想要查看一共选中哪些行，需要拖动滚动条，从中查看哪些选中（加载表格后，用户需将滚动条从最顶部拖动到最下方才能确定后面的内容哪些已经选中，且肉眼观察可能由于拖动问题观察出错）；

结果：所选行比较分散时不利于查看；

解决方式：提供一个选中置顶功能的按钮，点击按钮，表格所有选中项集中排序到表格置顶位置，且表格自动滚动到置顶查看，所有选中行集中分布，方便观察。

原理：利用jqGrid提供的列排序setGrid功能和setGridParam设置配置项功能，实现选中行指定功能。

以下是功能对应的js代码：

<script>
(function($){
    var $setGrid = $('#setMonitorGrid'); // 表格元素
    var rowName = []; // 记录所有选中行的名称，用于排序时比较行是否选中
    $setGrid.jqGrid({
        url :'/获取数据的url',
        datatype: "json",
        colNames: [ 'uuid', '名称', '类型' ],
        colModel: [ {
            name: 'uuid',
            index: 'uuid',
            hidden: true,
            formatter: function (value, options, object) { // 将数据的name值赋给uuid，用于实现刷新页面默认选择行功能
                return object.name;
            },
            sorttype: function(value,row){ // 排序时触发，根据此函数返回值进行排序，若此行选中则返回0否则返回1.
                if(rowName.indexOf(row.name) > -1){
                    return 0;
                }else{
                    return 1;
                }
            }
        }, {
            name: 'name',
            index: 'name'
        }, {
            name: 'type',
            index: 'type'
        } ],
        altRows: true,
        scrollrows: true,
        rowNum: 999999,  // 此表格无页脚不分页，设置当前页最多显示为行为999999，默认为10
        scrollrows: true, // 设置此属性，表格滚动条自动滚动到选中行处进行显示
        autowidth: true,
        loadonce: true, // 此置顶功能为前端实现功能，不设置此项会导致点击置顶按钮表格重新向后台请求数据，无法实现置顶功能。
        viewrecords: true,
        multiselect: true, // 多选属性，设置此属性表格可多选
        onSelectRow: function (rowid) {
            var rowId = $(this).jqGrid('getGridParam','selarrrow'); // 选中行ID
            rowName = []; // 所有选中行的名称
            for(var i = 0; i < rowId.length; i++){ // 将选中行的name值添加到rowName中
                rowName.push($(this).jqGrid('getCell',rowId[i],'name'))
            }
        },
        onSelectAll: function(rowId,status){
            rowName = []; // 所有选中行的名称
            if(status){
                for(var i = 0; i < rowId.length; i++){ // 将选中行的name值添加到rowName中
                    rowName.push($(this).jqGrid('getCell',rowId[i],'name'))
                }
            }
        },
        caption: ""
    })
    $('#monitorSelTop').bind('click',function(){ // monitorSelTop为按钮的ID，绑定click函数，点击触发
        $setGrid.sortGrid('uuid'); // 让表格按照uuid列进行排序（此uuid对应表格列头中设置的uuid列）
        $setGrid.jqGrid('setGridParam',{
            sortorder: 'asc'
        }).trigger('reloadGrid'); // 设置表格排序为升序，不设置此项点击按钮选中行也会统一分布，但会在统一分布在表格顶部或者底部，来回切换
    })
})(jQuery)
</script>

实现效果大概如图所示（PS:表格css样式是个人修改了的，和功能无关，忽略就好）：

点击“选中项置顶”按钮，所有选中项置顶显示