How to properly attach event to “close dialog” for “columns chooser” of jqGrid?

问题

I'm having some trouble properly using the close dialog event for the columns chooser plugin/widget of jqGrid. Here's what I have - I start with the jqGrid initialization with the column chooser attached at the end, like so

ticketsTable = tableWrap.jqGrid({
    url: ... ,
    datatype: ... ,
    ...
    loadComplete: function(d) {
        ...
    }
})
.navGrid('#ticketsList_footer', {edit:false, add:false, del:false, cloneToTop:true})
.navButtonAdd('#ticketsList_toppager', {
    caption: "Columns",
    title: "Reorder Columns",
    id: "colButton",
    onClickButton: function(){ ticketsTable.jqGrid('columnChooser'); }
});

Then, in the loadComplete function (above) I find the dialog and attach an alert to its close event, like so.

$('#colButton').click(function(e){
    setTimeout(function(){
        log($( ".ui-dialog" ).length);
        $( ".ui-dialog" ).bind( "dialogclose", function(event, ui) {
          log('close dialog event captured!');
        });
    }, 500);
});

For some reason the alert only comes up when I close the dialog via the "x" button in the corner. When I click "ok" or "cancel" there's no alert. What am I missing?

BTW, the reason I'm doing this is that I need to update table's size (setGridWidth) after the dialog closes to adjust for added/removed columns. Maybe there is a more elegant way to do that?

回答1:

You can use the following code

tableWrap.jqGrid (
    'navButtonAdd',
    '#pager',
     {
         caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
         onClickButton: function() {
             tableWrap.jqGrid('columnChooser', {
                     done: function(perm) {
                         if (perm) {
                             tableWrap.jqGrid("remapColumns", perm, true);
                             alert("The column chooser closed with 'OK' button");
                         } else {
                             alert("The column chooser closed with 'Cancel' button");
                         }
                     }
                 }
             );
        }
     });

See the demo

来源：https://stackoverflow.com/questions/6996602/how-to-properly-attach-event-to-close-dialog-for-columns-chooser-of-jqgrid