一张图解析FastAdmin中的表格列表的功能之三
功能描述
15.自定义按钮
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下
{
field: 'buttons',
width: "120px",
title: __('按钮组'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('弹出窗口打开'),
title: __('弹出窗口打开'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
},
visible: function (row) {
//返回true时按钮显示,返回false隐藏
return true;
}
},
{
name: 'ajax',
text: __('发送Ajax'),
title: __('发送Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'example/bootstraptable/detail',
confirm: '确认发送',
success: function (data, ret) {
Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
//如果需要阻止成功提示，则必须使用return false;
//return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
text: __('新选项卡中打开'),
title: __('新选项卡中打开'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.buttons
}
按钮配置支持的参数有：
name 按钮唯一标识,其中add/edit/del/dragsort已经被占用，如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示，我们可以在HTML视图文件的table添加data-buttons-标识来根据权限控制显示，如果是在field: 'operate'里增加buttons[]数组，则需要使用data-operate-标识来配置text 按钮的文本内容,如果不需要显示文本可忽略,支持function和string类型title 鼠标移上去的标题或弹窗/选项显示的标题,支持function和string类型icon 按钮的图标,请使用font-awesome图标库,比如 fa fa-homeclassname 按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs、btn-click，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。url 按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接，直接function和string类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID，如果需要传递其它字段值，请在URL中使用{字段名}占位即可refresh 自动刷新,只针对btn-ajax事件且不存在success回调confirm 确认框提示文字,配置后会在确认操作再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件success 事件成功的回调,只针对btn-ajax事件error 事件失败的回调,只针对btn-ajax事件callback 弹窗回传的回调,只针对btn-dialog事件,需要在对应打开的页面中使用Fast.api.close(data);进行回传数据hidden 是否隐藏按钮,按钮默认显示,支持function和bool类型visible 是否显示按钮,按钮默认显示,支持function和bool类型disable 是否禁用按钮,按钮默认不禁用,支持function和bool类型click 当classname包含btn-click时的点击回调事件extend 按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接，则配置extend:' target="_blank"'即可dropdown 下拉列表分组的名称,当多个按钮需要显示为一级时,该值为显示的文字
16.操作
操作区域默认是排序、编辑、删除这三个按钮，此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现，编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。如果我们需要重写编辑(排序、删除)按钮的相关属性，则可以使用buttons来定义编辑(排序、删除)的相关属性。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮，如示例图中的详情按钮，配置参数请参考第
15.自定义按钮。请参考下方完整代码中JS部分。
如果希望禁用编辑、删除按钮，可以通过修改视图中表格的属性置为空即可。
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="" data-operate-del="" width="100%"> </table>
从FastAdmin 1.2.0版本开发已经支持固定列功能，我们可以将右侧最后一定固定住，当出现横向滚动条时让最后一列始终固定在可视窗口中，如果需要开启此功能，请在初始化表格时添加以下两个参数即可。
//启用固定列 fixedColumns: true, //固定右侧列数 fixedRightNumber: 1,
17.分页信息
分页信息显示的文字可以通过在表格初始化前定义
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatShowingRows'] = function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
};
分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置
pageSize: 10, pageList: [10, 25, 50, 'All'],
18.翻页信息
翻页信息会根据服务端返回的数据行数自动进行渲染，如果返回的行数不满足分页条件时，此项是不会显示的