一个按钮触发另一组的下拉按钮
注意:这个需要使用Bottons扩展
当你有很多按钮时,使用这个会很方便,把按钮进行分类,比如新增、修改、删除分组为操作, 这样不会使表格看起来太复杂,按钮太多
这个按钮有以下选项配置:
名称 | 默认 |
---|---|
text |
Collection |
用文字显示,使用
buttons.buttons.textOption
配置显示的文字内容
或者 buttons.print ,关于语言的配置参考
languageOption
|
|
className |
buttons-collection |
按钮的class名称,详细参考
buttons.buttons.classNameOption
|
|
action |
|
background |
true |
Show (true) a background element, which can be styling using CSS to visually highlight the collection by fading out the rest of the page, or not (false). | |
backgroundClassName |
dt-button-background |
给background元素添加class名称,需要把background 配置为true
|
|
buttons |
[] |
这是一个按钮集合。这个和
buttons.buttonsOption
同样的规则。
这个数组可以包含 string 、object 和 function 。
使用 Buttons 1.1 ,可以包含按钮,触发其他按钮集合
|
|
prefixButtons |
undefined |
为buttons添加前缀,和
buttons.buttonsOption
同样的规则
|
|
postfixButtons |
undefined |
为buttons添加后缀,和
buttons.buttonsOption
同样的规则
|
|
collectionLayout |
|
集合中按钮的布局选项。是一个
多栏布局默认使用的是绝对定位,或者使用定位布局选项。
使用固定定位和多栏布局,通过空格来隔开,例如 这些选项可以使用Datatables默认的样式,或者Bootstrap、Foundation、 jQuery UI。 |
|
fade |
400 |
动画速度。这个代表动画的持续时间,以毫秒为单位,如果不要动画则使用值 0
|
Datatables初始化:创建一个导出集合的按钮
$('#myTable').DataTable( { buttons: [ { extend: 'collection', text: 'Export', buttons: [ 'csv-flash', 'xls-flash', 'pdf-flash' ] } ] } );
直接初始化:自定义的按钮集合
new $.fn.dataTable.Buttons( table, { buttons: [ { extend: 'collection', text: 'Flag', buttons: [ { text: 'High priority', action: function () { ... } }, { text: 'Medium priority', action: function () { ... } }, { text: 'Low priority', action: function () { ... } } ], fade: true } ] } );
Translation from DataTables.net, with permission