动态显示列/掩藏列实现

jquery.clickmenu.js (15kb)
jquery.clickmenu.pack.js (4kb)
clickmenu.css (2kb - it won’t work without this)

Example zero (all-in-one):

create the column header list inside the element with the ID "targetone"
define on and off classes for the column header list
don't include the last two columns in the list
save the visibility state informations for the next visit
hide the columns one and three by default
toggle the columns through the three buttons
use custom show/hide functions when using the buttons
 
    $('#tableall').columnManager({listTargetID:'targetall', onClass: 'advon', offClass: 'advoff', hideInList: [4,5],  
                    saveState: true, colsHidden: [1,3]}); 
     
    var opt = {listTargetID: 'targetall', onClass: 'advon', offClass: 'advoff',  
            hide: function(c){ 
                $(c).fadeOut(); 
            },  
            show: function(c){ 
                $(c).fadeIn(); 
            }}; 
    $('#buttonone').click(function(){ $('#tableall').toggleColumns(1, opt); }); 
    $('#buttontwo').click(function(){ $('#tableall').toggleColumns(2, opt); }); 
    $('#buttonthree').click(function(){ $('#tableall').toggleColumns(3, opt); }); 
    $('#buttonshowall').click(function(){ $('#tableall').showColumns(null, opt); }); 
    $('#buttonshow').click(function(){ $('#tableall').showColumns([1], opt); }); 
    $('#buttonhide').click(function(){ $('#tableall').hideColumns([2, 3], opt); }); 

<script type="text/javascript">  
$(document).ready(function()  
{  
    $.fn.clickMenu.setDefaults({arrowSrc:'arrow_right.gif', onClick: function(){/*do something*/}});  
    $('selector1').clickMenu(); /* use default values */  
    $('selector2').clickMenu({arrowSrc:''}); /* dont use an arrow for submenus */  
    $('selector3').clickMenu({subDelay: 1000, mainDelay: 500}); /* slow menu */  
});  
</script>