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樣式是個人修改了的，和功能無關，忽略就好）：

點選“選中項置頂”按鈕，所有選中項置頂顯示