jqGrid columnChooser - 按字母顺序右边未选中的列
问题描述:
我一直在使用jqGrid很多,一切正常(排序,重新排序列,添加/删除columnChooser中的列,重新排列columnChooser中的列,... )。但是有一件小事。jqGrid columnChooser - 按字母顺序右边未选中的列
看来,我传递给网格的colModel的初始列表包含显示它们的顺序的列,包括可能的隐藏列的列表,例如,列:
ID,姓名,日期(隐藏),安勤,BValue,CValue(隐藏)
现在,当我打开columnChooser,可见列显示在左侧按预期顺序为它们出现在网格。不可见的列出现在右侧:Date,CValue。如果我删除网格中的所有列,那么列选择器对话框右侧的未选中列的顺序如colModel中所定义:Id,Name,Date,...
我希望看到在屏幕上显示的顺序中选择列进行重新排序,但我希望右侧的未选中列总是按字母顺序显示 - 是否有可能?
答
我很难让这个工作,但最终决定添加我自己的事件处理程序到对话框手动排序右侧。
//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);
}
这个效果如何?我花了一天谷歌冲浪解决方案之后,在可用部分和不可用部分之间交换列时,我偶然发现了这一点。谢谢... – fletchsod 2013-09-10 13:33:13
取决于你正在尝试做什么。目前我正在使用这个网站,并且按字母顺序保留未选中的列窗格效果很好。可能会有很多列慢。 – user1573618 2013-09-11 13:52:38