一张图解析FastAdmin中的表格列表的功能

功能描述
请根据图片上的数字索引查看对应功能说明。

1.菜单名称和描述
默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以修改权限管理->菜单规则，给对应菜单的添加上备注信息后即可显示，支持HTML

2.TAB过滤选项卡
在一键生成CRUD时，如果表中存在status字段且为ENUM类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用php think crud时使用–headingfilterfield=你的字段名称来指定字段

3.通用搜索
通用搜索的的内容是根据bootstrap-table配置的字段columns决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置operate:false来删除通用搜索中的选项。例如通常情况下我们的在JS中进行字段的配置如下：

{field: ‘createtime’, title: __(‘Create Time’)},
这里默认是启用的通用搜索，针对通用搜索，有以下几个常用的配置：

operate:’=’ //用于查询时的操作符，默认为=，为false表示禁用此字段的通用搜索，支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //用于渲染列表的数据，支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用于给input或select添加额外的class属性
type: //用于定义input文本框的类型,默认为text
data: //用于给input或select添加额外的属性
常用配置示例如下：

//时间区间搜索
{field: ‘createtime’, title: __(‘Createtime’), operate: ‘RANGE’, addclass: ‘datetimerange’, formatter: Table.api.formatter.datetime},
//金额区间搜索
{field: ‘money’, title: __(‘Money’), operate: ‘RANGE’},
//下拉列表搜索
{field: ‘flag’, title: __(‘Flag’), searchList: {“hot”: __(‘Flag hot’), “index”: __(‘Flag index’), “recommend”: __(‘Flag recommend’)}, operate: ‘FIND_IN_SET’, formatter: Table.api.formatter.label},
//动态下拉列表搜索
{field: ‘type’, title: __(‘Type’), searchList: $.getJSON(“ajax/dynamicselect”)},
//禁用通用搜索
{field: ‘keywords’, title: __(‘Keywords’), operate: false},
如果我们需要完全自定义我们的通用搜索栏，我们可以在配置bootstrap-table时定义searchFormTemplate选项来完全重写我们的通用搜索栏，具体请参考开发示例插件中的自定义搜索示例

4.工具栏按钮
FastAdmin在一键CRUD时会自动生成添加、编辑、删除、导入、更多按钮的HTML，这些按钮会根据用户所拥有的权限控制基是否显示或隐藏。我们可以在控制器对应的index.html视图文件中任意修改或删除对应的按钮。请特别注意这几个自动生成的按钮都通过基拥有的class属性来绑定相关的事件，例如添加按钮拥有btn-add这个class、框架所已经占用的class如下：

btn-add: 添加按钮使用
btn-edit: 编辑按钮使用
btn-del: 删除按钮使用
btn-import: 导入按钮使用
btn-more: 更多按钮使用
btn-multi: 指操作使用
btn-disabled: 添加此class后则只有在列表有选中数据时按钮才会变为可使用
如果我们想点击添加按钮后默认全屏，则可以给添加按钮加上data-area=’[“100%”,“100%”]'即可默认全屏
如果我们想自定义按钮并添加事件，我们需要在视图中添加相应的HTML代码，然后在对应的JS文件中添加按钮的执行事件，切记不可在视图中直接编写JS或jQuery代码来绑定事件

5.动态渲染统计信息
很多时候我们需要在页面额外显示服务端传回的动态数据，此时我们只需要在index.html视图中添加

金额：0 单价：0 然后在控制器对应的JS中的index方法中添加以下的JS

//当表格数据加载完成时
table.on(‘load-success.bs.table’, function (e, data) {
//这里可以获取从服务端获取的JSON数据
console.log(data);
//这里我们手动设置底部的值
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
注意务必将这段代码添加在var table = $("#table");之后
其中data.extend.money和data.extend.price就是我们在服务端动态返回的数据，如下

$result = array(“total” => $total, “rows” => $list,"ex$