自定义表头按钮和行按钮
按钮的重要性
按钮占据表格50%以上的功能，表头按钮和行按钮的渲染比较复杂。
从源码上来分析这些表格渲染和点击事件的行为。后续要修改或添加按钮就很容易了。
表头按钮
为什么会显示这些按钮？
如何去掉其中部分按钮？
如何添加新的表头按钮？
输入图片说明
为什么会显示这些表头按钮
是在html里的toolbar里定义了的，这个有定义就会出现，还是比较直接的，说明并不是根据什么配置数据来动态渲染的。
如果要添加新按钮或去掉一些按钮，直接修改这里的html就可以。
输入图片说明
按钮的事件
以上的html只定义了按钮的名称、位置，但是看不不出他们的动作事件。
各个按钮的动作事件在require-table.js的Table.api.bindevent来设定的。
各个按钮的className是约定好的，不能去修改，除非同步修改了Table.config里的默认配置。否则就找不到这些按钮来动态设置动作。
输入图片说明
行按钮
为什么会默认显示这些按钮？
如何去掉其中部分按钮？
如何添加新的行按钮？
输入图片说明
默认的行按钮 Table.api.formatter.operate
从如下的js可以看到操作列是使用了Table.api.formatter.operate来格式化。
var Controller = {
index: function () {
// 初始化表格
table.bootstrapTable({
columns: [
...
{field: 'operate', title: __('Operate'), table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}
})
...
}}
Table.api.formatter.operate这个函数实现了默认的三个按钮的渲染。
从这个函数分析下去可以看到，如果对应的url路径不为空才显示这个行按钮，否则就不显示
operate: function (value, row, index) {
var table = this.table;
// 操作配置
var options = table ? table.bootstrapTable('getOptions') : {};
// 默认按钮组
var buttons = $.extend([], this.buttons || []);
// 所有按钮名称
var names = [];
buttons.forEach(function (item) {
names.push(item.name);
});
if (options.extend.dragsort_url !== '' && names.indexOf('dragsort') === -1) {
buttons.push(Table.button.dragsort);
}
if (options.extend.edit_url !== '' && names.indexOf('edit') === -1) {
Table.button.edit.url = options.extend.edit_url;
buttons.push(Table.button.edit);
}
if (options.extend.del_url !== '' && names.indexOf('del') === -1) {
buttons.push(Table.button.del);
}
return Table.api.buttonlink(this, buttons, value, row, index, 'operate');}
从这里可以看到，如果你想要屏蔽行按钮中的删除按钮，只需要删除edit_url: 'studycase/c1001project/edit',
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'studycase/c1001project/index' + location.search,
add_url: 'studycase/c1001project/add',
edit_url: 'studycase/c1001project/edit',
del_url: 'studycase/c1001project/del',
multi_url: 'studycase/c1001project/multi',
import_url: 'studycase/c1001project/import',
table: 'c1001_project',
}
});}
如果想要删除拖拽按钮，发现上面的代码里没有拖拽的url。那就要去删除require-table.js里定义的dragsort_url: 'ajax/weigh'
总不能到删除核心文件里的东西，会影响到其他的页面的。可以在上面的 Table.api.init函数前执行，表示动态去删除这个dragsort_url。
delete Table.defaults.extend.dragsort_url;
以上通过删除url的定义的方式来影响默认行按钮的渲染行为，是一种方式。下面说另外一种，自定义行按钮。
自定义行按钮 Table.api.formatter.bottons
我们知道默认的行按钮是通过Table.api.formatter.operate这个格式化函数来实现的，那自定义的话就可以自定义一个格式化函数。
require-table.js其实也为我们准备了比较便捷的自定义的方式：Table.api.formatter.bottons函数
var Controller = {
index: function () {
// 初始化表格
table.bootstrapTable({
columns: [
...
{field: 'operate', title: __('Operate'), table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'dragsort',
icon: 'fa fa-arrows',
title: __('Drag to sort'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-primary btn-dragsort'
},
{
name: 'del',
icon: 'fa fa-trash',
title: __('Del'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-danger btn-delone'
},
],
formatter: Table.api.formatter.buttons
})
...
}}
注意使用：
1、要定义 buttons
默认的三个按钮，就拷贝这些，可以删减，调整顺序：
buttons:[
{
name: 'edit',
icon: 'fa fa-pencil',
title: __('Edit'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-success btn-editone'
},
{
name: 'del',
icon: 'fa fa-trash',
title: __('Del'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-danger btn-delone'
},
{
name: 'dragsort',
icon: 'fa fa-arrows',
title: __('Drag to sort'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-primary btn-dragsort'
}]
2、要使用formatter: Table.api.formatter.buttons 而不能再使用 formatter: Table.api.formatter.operate
行按钮的url渲染 Table.api.buttonlink
修改按钮的url是如何增加上去？
Table.api.buttonlink这个函数负责渲染行按钮的url，formatter: Table.api.formatter.buttons 和 formatter: Table.api.formatter.operate 最终都会调用这个函数来渲染按钮。
这个函数，检查到每个button定义里，如果有url，就渲染一个url；如果没有，这href就给个javascript:
输入图片说明
行按钮的行为设置
1、点击修改按钮会弹窗，在哪里定义了弹窗呢，是在 Table.api.events.operate
输入图片说明
2、点击删除按钮会提示二次确认，在哪里定义了二次确认呢，也是在 Table.api.events.operate
输入图片说明
3、拖拽按钮可以支持拖拽，在哪里增加的事件呢，
输入图片说明
特别注意：自定义的行按钮（非默认三个），他们的className就不要和默认的一样。
自定义行按钮自定义url
我们从上面的自定义按钮的bottons属性可以看到，也没有体现url属性。修改、删除、拖拽这三个默认的url是从约定好的：
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'studycase/c1001project/index' + location.search,
add_url: 'studycase/c1001project/add',
edit_url: 'studycase/c1001project/edit?name={name}',
del_url: 'studycase/c1001project/del',
multi_url: 'studycase/c1001project/multi',
import_url: 'studycase/c1001project/import',
table: 'c1001_project',
}
});
拖拽的url是在require-table.js里约定了的，如果业务侧js没重新定义，就取require-table.js里的。
那自定义的行按钮的url就要显式的体现:
buttons:[
{
name: 'edit',
icon: 'fa fa-pencil',
title: __('Edit'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-success btn-editone'
},
{
name: 'AddSub',
text: __('Edit'),
classname: 'btn btn-xs btn-success btn-addsub btn-dialog',
icon: 'fa fa-plus',
url: $.fn.bootstrapTable.defaults.extend.addsub_url,
extend: 'data-area=\'["98%","98%"]\'', //这是控制弹窗的弹出的尺寸
refresh: true
},
{
name: 'del',
icon: 'fa fa-trash',
title: __('Del'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-danger btn-delone'
},
{
name: 'dragsort',
icon: 'fa fa-arrows',
title: __('Drag to sort'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-primary btn-dragsort'
}]
里面的AddSub就是自定义的按钮，自定义的url。
如果要为这个行自定义按钮增加点击事件，在页面js里增加：
Table.api.events.operate = $.extend(Table.api.events.operate, {
'click .btn-diy': function (e, value, row, index){
console.log(row);
} })
总结
1、删减行按钮：屏蔽url
2、增加行按钮：显式配置buttons属性，并使用formatter: Table.api.formatter.buttons
3、按钮url：行按钮buttons属性有url属性则显示超链接，无url显示javascrip:
4、按钮classname要注意：和默认的区别开来
5、按钮增加JS事件：扩展Table.api.events.operate