jqGrid columnChooser-右侧未按字母顺序排列的列 [英] jqGrid columnChooser - unselected columns on the right in alphabetical order
问题描述
我一直在使用jqGrid,并且一切正常(排序,对列进行重新排序,在columnChooser中添加/删除列,对columnChooser中的列进行重新排序,...).但是,有一件小事.
I have been working with the jqGrid a lot and everything works (sorting, reordering of columns, adding/remove columns in the columnChooser, reordering columns in the columnChooser, ...). However there is one minor thing.
看来,我传递给网格的colModel的初始列表按显示顺序包含列,包括可能的隐藏列的列表,例如列:
It appears, the initial list of the colModel that I pass to the grid contains the columns in the order they are displayed including a list of the possible hidden columns, e.g. columns:
Id,名称,日期(隐藏),AValue,BValue,CValue(隐藏)
Id, Name, Date(hidden), AValue, BValue, CValue(hidden)
现在,当我打开columnChooser时,可见的列将按预期顺序显示在左侧,就像它们出现在网格中一样.不可见的列在右侧显示为:日期,CValue.如果我从网格中删除所有列,则列选择器对话框右侧未选择列的顺序如colModel中所定义:Id,Name,Date,...
Now when I open the columnChooser, the visible columns are shown on the left in the expected order as they appear in the grid. The not visible columns appear on the right as: Date, CValue. If I remove all columns from the grid, then the order of the unselected columns on the right of the column chooser dialog is as defined in the colModel: Id, Name, Date, ...
我想按屏幕上显示的顺序对选定的列进行重新排序,但是我想让右侧的未选定列始终按字母顺序显示-可以吗?
I would like to see the selected columns in the order as they appear on the screen for reordering, but I would like to have the unselected columns on the right always appear in alphabetical order - is that somehow possible?
推荐答案
我很难使它起作用,但最终决定将我自己的事件处理程序添加到对话框中,以手动对右侧进行排序.
I had trouble getting this to work but eventually decided to add my own event handlers to the dialog to manually sort the right side.
//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);
}
这篇关于jqGrid columnChooser-右侧未按字母顺序排列的列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!