动态显示列/隐藏列实现
动态显示列/隐藏列实现
Requied[color=cyan][/color]
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 listdon't include the last two columns in the listsave the visibility state informations for the next visithide the columns one and three by defaulttoggle the columns through the three buttonsuse 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>