colvisGroup
自 Buttons 1.0.0 起
显示和隐藏多列。
请注意 - 此属性需要 Buttons 扩展,供 DataTables 使用。
说明
使用列可见性时,您可能希望向最终用户展示一个控件,该控件允许同时设置多个显示和隐藏的列 - 允许执行分组。对于 Buttons,colvisGroup
按钮类型提供了此功能。此按钮准确地提供了此选项。
此按钮的 show
和 hide
参数都是 column-selector
类型,分别定义了应该显示或隐藏的表格中的列。如果这两个参数中未定义某列,那么该列的可见性不会改变。
请注意,与大多数其他按钮不同,按钮文本 (buttons.buttons.text
) 选项没有预定义,因为没有可以应用的合理默认值。您必须为该按钮设置一个文本属性。
选项
除了可用于所有按钮的选项(例如 buttons.buttons.text
),此按钮可以在其配置对象中设置以下选项以自定义操作和显示
名称 | 类型 | 默认值 |
---|---|---|
action | ||
设置列的可见性。 | ||
className | buttons-colvisGroup | |
按钮的类名。有关详细信息,请参见 | ||
hide | [] | |
从可见显示中移除的列 | ||
show | [] | |
要显示的列 |
实例
DataTables 初始化:使用类名进行列分组
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: '.office',
hide: '.hr'
},
{
extend: 'colvisGroup',
text: 'HR info',
show: '.hr',
hide: '.office'
}
]
}
}
});
DataTables 初始化:显示全部/不显示按钮
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
},
{
extend: 'colvisGroup',
text: 'Show none',
hide: ':visible'
}
]
}
}
});