datatable的动态列隐藏按钮及实现方式

最新推荐文章于 2021-10-21 11:21:07 发布

MelodyFreedom

最新推荐文章于 2021-10-21 11:21:07 发布

阅读量1w

点赞数

本文链接：https://blog.youkuaiyun.com/MelodyFreedom/article/details/51545119

版权

这篇博客介绍了如何在Datatable中实现动态列隐藏功能，包括CSS样式、添加按钮事件、过滤列显示以及处理按钮点击事件的方法。通过示例代码展示了如何在表格中添加隐藏/显示列的按钮，并根据用户选择动态调整列的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下参照datatable中文网api中的例子编写而成。

其中用到的css如下：

.showColumn{
position:relative;
display:inline-block;
z-index:9999;
height:100%;
padding-left:0px;
}
.showColumn .margin-comm.span-btn{
height:23px;
vertical-align:middle;
display:inline-block;
}
.showColumn .showul{
list-style:none;
display:none;
position:absolute;
left:6px;
border:1px solid #ccc;
}
.showul ul li{
width: 115px;
height: 23px;
border: 0;
background: #666464;
}
.showul ul li:hover{
background: #eef9f9;
cursor: pointer;
}
.showul ul li input{
margin-left: 5px;
vertical-align: middle;
}

1、添加按钮事件

<div class="showColumn" style="position:relative;display:inline-block;z-index:9999;height:100%;padding-left:0px;">

</ul>
</div> -->
</div>

2、编写对列的过滤，其中隐藏的列不显示在是否隐藏的菜单中，项目中使用的列使用json数据写好的，方便起见，直接粘贴过来了。

3、写个公用方法，对其中列的表头的文字过滤出来，将表头的文字放在按钮点击出来的框中，以下方法的调用时再datatable绘成以后的回调函数中调用，其中的参数是表的列的json数组。

//的回调函数中使用的动态改变列的方法
function cloumsTitle(columJson){
var insertHtml = '<span class="margin-comm span-btn"><i class="icon-set"></i>显示/隐藏列</span><div class="showul"><ul>';
for (var i = 1; i < columJson.length; i++){
if(columJson[i].bVisible){
var stitle = columJson[i].sTitle;
insertHtml += '<li><input type="checkbox" class="toggle-vis" checked=checked data-column="'+i+'"><span style="margin-left:5px;width:30px;overflow:hidden;text-overflow:ellipsis;line-height:23px;">'+stitle+'</span></li>';
}
}
insertHtml +='</ul></div>';
$('.showColumn').html(insertHtml);
}

4、对按钮点击事件的处理。

//隐藏table列的方法

//如果当前的这个弹出框在，就隐藏，否则相反。

//隐藏table列的方法
$(document).on('click', '.showColumn', function(e){
e.stopPropagation();
if($('.showul').hide()){
$('.showul').show();
} else{
$('.showul').hide();
}
});
//隐藏table列的方法，在选项外点击，打开的选项收起来
$(document).click(function(e) {
if (!$(e.target).is(".showColumn") && !$(e.target).is(".showul")) {
$('.showul').hide();
}
});

5、datatable定义完毕以后，用以下代码实现对datatable表列的隐藏或出现。

$('.toggle-vis').on('change',function(e){
e.preventDefault();
var column = table.api().column($(this).attr('data-column'));
column.visible(!column.visible());
});