读书人

动态显示列/掩藏列实现

发布时间: 2012-11-25 11:44:31 作者: rapoo

动态显示列/隐藏列实现
动态显示列/隐藏列实现
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>

读书人网 >Web前端

热点推荐