jqGrid columnChooser - 按字母順序右邊未選中的列

Question

我一直在使用jqGrid很多，一切正常（排序，重新排序列，添加/刪除columnChooser中的列，重新排列columnChooser中的列，... ）。但是有一件小事。

看來，我傳遞給網格的colModel的初始列表包含顯示它們的順序的列，包括可能的隱藏列的列表，例如，列：

ID，姓名，日期（隱藏），安勤，BValue，CValue（隱藏）

現在，當我打開columnChooser，可見列顯示在左側按預期順序爲它們出現在網格。不可見的列出現在右側：Date，CValue。如果我刪除網格中的所有列，那麼列選擇器對話框右側的未選中列的順序如colModel中所定義：Id，Name，Date，...

我希望看到在屏幕上顯示的順序中選擇列進行重新排序，但我希望右側的未選中列總是按字母順序顯示 - 是否有可能？

Answer 1

我很難讓這個工作，但最終決定添加我自己的事件處理程序到對話框手動排序右側。

//Add the button to the jqGrid toolbar 
$('#MyGridId').jqGrid('navButtonAdd', '#MyGridToolbar', { 
    buttonicon: 'ui-icon-transferthick-e-w', 
    caption: 'Select Columns', 
    title: 'Select Columns', 
    onClickButton: function() { 
     $(this).jqGrid('columnChooser', { 
      done: function (perm) { 
       if (perm) { 
        this.jqGrid('remapColumns', perm, true); 
       } 
      } 
     }); 

     //Setup custom event bindings and give the right side an initial sort 
     BindColPickerActions($.jgrid.jqID(this.id)); 
     SortColPickerAvailable($.jgrid.jqID(this.id)); 
    } 
}); 

//function to add click event bindings to the dialog actions 
function BindColPickerActions(gridId) { 
    var colpickerId = 'colchooser_' + gridId; 

    //When moving an item from selected to available (Hiding) 
    $('#' + colpickerId + ' .selected a:not(.SortModifier)').bind('click', function(){ 
     SortColPickerAvailable(gridId); 
     BindColPickerActions(gridId); 
    }); 

    //When moving an item from available to selected (Showing) 
    $('#' + colpickerId + ' .available a:not(.SortModifier)').bind('click', function(){ 
     BindColPickerActions(gridId); 
    }); 

    //add a class to the actions that have been modified to keep track 
    $('#colchooser_' + colpickerId + ' .available a:not(.SortModifier), #' + colpickerId + ' .available a:not(.SortModifier)').addClass('SortModifier'); 
} 

//function to sort the available list 
function SortColPickerAvailable(gridId) { 
    //get the list of li items 
    var colpickerId = 'colchooser_' + gridId; 
    var available = $('#' + colpickerId + ' .available .connected-list'); 
    var li = available.children('.ui-element'); 

    //detatch and sort the li items 
    li.detach().sort(function(a, b) { 
     return $(a).attr('title').toUpperCase().localeCompare($(b).attr('title').toUpperCase()); 
    }); 

    //re-attach the li items   
    available.append(li); 
}