1

我一直在使用 jqGrid 并且一切正常（排序、重新排序列、添加/删除 columnChooser 中的列、重新排序 columnChooser 中的列……）。然而，还有一件小事。

看来，我传递给网格的 colModel 的初始列表包含按显示顺序排列的列，包括可能隐藏列的列表，例如列：

Id、名称、日期（隐藏）、AValue、BValue、CValue（隐藏）

现在，当我打开 columnChooser 时，可见列以预期的顺序显示在左侧，因为它们出现在网格中。不可见的列在右侧显示为：Date、CValue。如果我从网格中删除所有列，则列选择器对话框右侧未选择列的顺序与 colModel 中定义的相同：Id、Name、Date、...

我希望看到所选列在屏幕上出现的顺序以进行重新排序，但我希望右侧未选择的列始终按字母顺序显示 - 这有可能吗？

4

1 回答 1

0

我很难让它工作，但最终决定将我自己的事件处理程序添加到对话框中以手动对右侧进行排序。

//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);
}
于 2013-07-03T14:57:41.417 回答