按钮配置
DataTables 扩展提供一个 预配置按钮,无需任何自定义即可使用。但是,您不可避免地希望更改按钮属性以满足您的需求 - 这可能像更改显示文本一样简单,或者像提供自定义回调函数以修改 PDF 文档的布局一样复杂!
自定义按钮
[索引](初始化指南)展示了如何通过引用与按钮名称匹配的简单字符串来使用按钮
$('#myTable').DataTable( {
buttons: [
'copy', 'excel', 'pdf'
]
} );
这告诉按钮简单地使用该名称按钮的默认选项。字符串由按钮自动扩展到一个按钮定义对象 - 这个对象包含按钮的各个属性。
我们还可以传递从可用按钮扩展的对象
$('#myTable').DataTable( {
buttons: [
{
extend: 'copy',
text: 'Copy to clipboard'
},
'excel',
'pdf'
]
} );
请注意,我们仍然像以前一样有三个按钮,但是第一个按钮最初用字符串表示已被一个对象替换。 buttons.buttons.extend
选项用于告诉按钮将哪种按钮类型用作按钮的基准(如果您希望 定义自定义按钮,这是可选的!)。
在上述情况下,buttons.buttons.text
选项已被用于设置按钮文本。此选项适用于所有按钮 - 有许多通用选项(见下文),并且每种按钮类型还能够定义特定于其自身的选项 - 应参阅每个按钮的参考文档以了解可用的完整选项。
基于这一概念-使用 { extend: 'excel' }
(即没有其他参数)与单纯使用 'excel'
的功能是等效的!
内置选项
Buttons 库提供一些适用于所有按钮类型的一些核心选项。其中最常用的是
buttons.buttons.action
- 激活按钮时要执行的动作buttons.buttons.className
- 设置按钮的类名称buttons.buttons.extend
- 定义按钮应基于哪种按钮类型buttons.buttons.key
- 为按钮定义激活键buttons.buttons.text
- 要显示在按钮中的文本
初始化选项参考 中提供了完整选项列表。
键访问
按钮的一个比较有趣的内置选项是 buttons.buttons.key
选项。这提供了给按钮操作指定自定义按键的能力。例如可以设置按压 e
(是否使用任何修饰键都可以)触发选中行的编辑。
仅在页面上没有其他焦点元素时,按键才会产生作用。所以,例如,如果把某个按钮绑定到 e
按键,当用户正在 DataTables 搜索框中输入文字时,按 e
按键就不会触发!
buttons.buttons.key
选项可以作为字符串(简单字符绑定)或对象来给定,后者允许同时需要修饰键。
例如,考虑
$('#myTable').DataTable( {
buttons: [
{
extend: 'copy',
text: '<u>C</u>opy',
key: {
key: 'c',
altKey: true
}
}
]
} );
在这种情况下,复制操作在按下 alt 键 + c 组合键时触发。还请注意,已经使用 text
属性强调给最终用户,c
按键能执行某些操作。