动态显示列/隐藏列实现

最新推荐文章于 2022-12-23 23:59:43 发布

原创最新推荐文章于 2022-12-23 23:59:43 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

JavaScript，jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用jQuery库实现动态显示和隐藏表格列的功能，包括代码示例、关键函数和配置选项。

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