在表格初始化的字段列配置中我们通常可以看到以下的代码
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'type', title: __('Type'), operate: false, searchList: Config.searchList, formatter: Table.api.formatter.normal},
{field: 'name', title: __('Name'), align: 'left'},
{field: 'nickname', title: __('Nickname')},
{field: 'intro', title: __('Intro'), formatter: Table.api.formatter.content, class: 'autocontent', hover:true},
{field: 'flag', title: __('Flag'), formatter: Table.api.formatter.flag},
{field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
{field: 'weigh', title: __('Weigh')},
{field: 'status', title: __('Status'), operate: false, formatter: Table.api.formatter.status},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});其中formatter有以下可配置的方法，用好以下的渲染方法可以让你的开发更加便捷。
| 方法 | 参数 | 描述 |
|---|---|---|
| Table.api.formatter.icon | 无 | 将字段值渲染成一个Font-Awesome图标 |
| Table.api.formatter.image | 无 | 将字段值渲染成一张图片 |
| Table.api.formatter.images | 无 | 将字段值渲染成多图 |
| Table.api.formatter.file | 无 | 将字段值渲染成附件下载 |
| Table.api.formatter.files | 无 | 将字段值渲染成多附件下载 |
| Table.api.formatter.content | width:250, class:'autocontent', hover: true | 将字段值渲染成固定宽度的文本,class和hover属性只支持FastAdmin1.4.0+版本 |
| Table.api.formatter.status | custom:{"值":"颜色标签"} | 将字段值渲染成状态 |
| Table.api.formatter.normal | custom:{"值":"颜色标签"} icon:"fa fa-home" searchList:{"normal":"正常","hidden":"隐藏"} |
将字段值渲染成常规标签 |
| Table.api.formatter.toggle | color:"danger", yes:"1", no:"0", url:"点击开关请求的URL", confirm: "点击切换提示语", disable:function(value, row, index){ //返回true表示禁用 return true; }, | 将字段值渲染成开关组件标签 |
| Table.api.formatter.url | 无 | 将字段值渲染成URL链接文本框，不适用于附件文件 |
| Table.api.formatter.search | customField:'自定义字段' | 将字段值渲染成可点击搜索的形式,此时operate不能为false |
| Table.api.formatter.addtabs | atitle:'选项卡的标题' | 将字段值渲染成可点击新选项卡打开的链接 |
| Table.api.formatter.dialog | atitle:'选项卡的标题' | 将字段值渲染成可点击弹窗打开的链接 |
| Table.api.formatter.flag Table.api.formatter.label |
custom:{"值":"颜色标签"}, customField:"自定义字段", searchList:{"new":"新","hot":"热门"} | 将字段值渲染成可点击弹窗打开的链接 |
| Table.api.formatter.datetime | datetimeFormat:'YYYY-MM-DD HH:mm:ss' | 将字段值渲染成日期时间值 |
| Table.api.formatter.operate | buttons:[按钮组配置] | 将字段值渲染成操作列(编辑、删除) |
如果框架自带的格式化不满足的使用，可以使用自定义的格式化方法，格式如下：
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'intro', title: __('Intro'), formatter: function(value, row, index) {
//value：intro字段的值
//row：当前行所有字段的数据
//index：当前行索引
//示例：
return value + " - " + row.id;
}
]
]
});buttons按钮组配置支持使用数组，格式如下：
buttons: [
{
name: 'add', //唯一标识、权限标识
dropdown: '', //按钮下拉分组，默认为不分组
text: '同意', //按钮显示的文字，支持function
title: '我是标题', //按钮显示的文字，支持function
classname: 'btn btn-info btn-xs btn-dialog', //按钮的class，支持btn-dialog/btn-ajax/btn-addtabs
icon: 'fa fa-plus', //按钮的图标
url: 'department/index/add/parent_id/{ids}', //按钮的链接，支持使用{字段名}来占位替换，支持function
confirm: '是否同意该请求？', //点击按钮后的确认框，支持function
refresh: true, //操作完成后是否刷新列表
disable: function(row){}, //判断按钮是否禁用，支持function
visible: function(row){}, //判断按钮是否可见，支持function
hidden: function(row){}, //判断按钮是否隐藏，支持function
extend: '', //扩展的扩展属性，FastAdmin1.4.0+支持function
},
{
...
}
]