jqGrid columnChooser - unselected columns on the right in alphabetical order

问题

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.

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, Name, Date(hidden), AValue, BValue, CValue(hidden)

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?

回答1:

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);
}

来源：https://stackoverflow.com/questions/11526893/jqgrid-columnchooser-unselected-columns-on-the-right-in-alphabetical-order

标签

jqgrid