本文旨在分享与做笔记,如有更多需要请点击底部跳转至原文章页面
功能描述
请根据图片上的数字索引查看对应功能说明。
1.菜单名称和描述
默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以修改权限管理->菜单规则，给对应菜单的添加上备注信息后即可显示，支持HTML
2.TAB过滤选项卡
在一键生成CRUD时，如果表中存在status字段且为ENUM类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用php think crud时使用--headingfilterfield=你的字段名称来指定字段
3.通用搜索
通用搜索的的内容是根据bootstrap-table配置的字段columns决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置operate:false来删除通用搜索中的选项。例如通常情况下我们的在JS中进行字段的配置如下：
这里默认是启用的通用搜索，针对通用搜索，有以下几个常用的配置：
常用配置示例如下：
如果我们需要完全自定义我们的通用搜索栏，我们可以在配置bootstrap-table时定义searchFormTemplate选项来完全重写我们的通用搜索栏，具体请参考开发示例插件中的自定义搜索示例
如果希望默认显示通用搜索，可以使用searchFormVisible: true来强制显示通用搜索。
4.工具栏按钮
FastAdmin在一键CRUD时会自动生成添加、编辑、删除、导入、更多按钮的HTML，这些按钮会根据用户所拥有的权限控制基是否显示或隐藏。我们可以在控制器对应的index.html视图文件中任意修改或删除对应的按钮。请特别注意这几个自动生成的按钮都通过基拥有的class属性来绑定相关的事件，例如添加按钮拥有btn-add这个class、框架所已经占用的class如下：
如果我们想点击添加按钮后默认全屏，则可以给添加按钮加上data-area='["100%","100%"]'即可默认全屏
如果我们想自定义按钮并添加事件，我们需要在视图中添加相应的HTML代码，然后在对应的JS文件中添加按钮的执行事件，切记不可在视图中直接编写JS或jQuery代码来绑定事件
5.动态渲染统计信息
很多时候我们需要在页面额外显示服务端传回的动态数据，此时我们只需要在index.html视图中添加
然后在控制器对应的JS中的index方法中添加以下的JS
注意务必将这段代码添加在var table = $("#table");之后
其中data.extend.money和data.extend.price就是我们在服务端动态返回的数据，如下
通过以上配置即可动态显示服务端返回的额外数据
6.快速搜索
快速搜索在键入关键词时将实时从服务端搜索数据，如果你的数据表数据较大，建议关闭此功能，关闭的方法是使用search:false，其次快速搜索默认只会搜索主键id这个字段，如果你需要搜索其它字段，则需要在服务端你的控制器中定义$searchFields这个值，如下
这样在快速搜索时将会搜索id,name,title这三个字段。
如果需要修改默认文本框的placeholder，可以在表格初始化前定义
7.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式，如果不需要此功能，可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏，如果不需要此功能，可以设置showColumns: false，如果想要表格中的字段列默认隐藏可以设置字段属性visible: false即可默认隐藏
导出按钮默认将导出整个表的所有行，如果需要仅导出当前分页的数据，需要设置exportDataType: 'basic'，如果想导出选中的行，则可以设置为exportDataType: 'selected'，如果不需要此功能，可以设置showExport: false
通用搜索指表格上方的搜索，通用搜索的表单默认是隐藏的，如果需要默认显示，需要设置searchFormVisible: true，如果不需要通用搜索功能，可以设置commonSearch: false。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false即可。
8.字段配置
默认字段的控制是根据控制器对应的JS来配置的，因此字段配置是通过JS，而在我们的视图index.html中是没有任何字段配置的，通常我们的配置如下：
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'admin_id', title: __('Admin_id')},
{field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
{field: 'category_id', title: __('Category_id'), visible: false},
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
{field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
{field: 'title', title: __('Title')},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
{field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
{field: 'weigh', title: __('Weigh'), operate: false, visible: false},
{field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
{field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
]
]
字段配置的参数有
FastAdmin封装了许多常用的formatter方法，我们可以快速的调用即可。
9.复选框
如果我们需要不需要复选框则移除{checkbox: true}即可
从FastAdmin1.2.0版本开始已经支持跨页选择功能，如果需要启用跨页选择功能，可以在表格初始化时添加以下参数来启用：
如果我们需要固定表头，可以在初始化表格时给表格添加一个固定的高度即可，例如：
10.分类名称(关联搜索出分类表的名称)
这里显示的分类名称是根据分类表关联查询出来的结果，如果我们启用关联查询，我们必须在当前控制器中设置属性protected $relationSearch = true;，同时我们的index方法也需要重写，请参考下方的完整代码中PHP部分。如果我们启用了关联查询，当两个表中的字段有冲突时，我们必须在字段中加上别名。请参考下方的完整代码中JS部分。
11.标志
我们可以使用formatter:Table.api.formatter.flag来渲染标志字段，默认会将数据库的值渲染以下几种颜色
如果我们需要扩展额外的颜色，则可以使用
这样当值为aaa时会显示为蓝色，bbb时显示为红色
12.图片和图片组
我们可以使用
以上两种方式来渲染图片或图片组
请注意如果是图片组的情况下,数据值应该是以,进行分隔的
13.开关
我们可以使用formatter:Table.api.formatter.toggle来生成开关组件
默认情况下是根据数据库值1和0来表示开和关
我们可以通过额外的配置和定义开和关，比如
则此时会根据数据库值是open还是close来展示开关，
开关在点击的时候默认是只允许修改数据库的status字段的，如果我们开关不是status字段，我们需要在服务端对应的控制器中定义protected $multiFields="id,name,swith";，多个字段以,进行分隔
14.状态渲染
我们可以使用formatter:Table.api.formatter.status来渲染状态
默认根据以下值进行状态的颜色渲染
如果我们状态有额外的值，我们可以使用custom来进行扩展显示的颜色，如下
状态渲染显示的文本是根据searchList配置的值进行渲染的
15.自定义按钮
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下
按钮配置支持的参数有：
name 按钮唯一标识,其中add/edit/del/dragsort已经被占用,如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示，我们可以在HTML视图文件的table添加data-buttons-标识来根据权限控制显示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部分。
如果希望禁用编辑、删除按钮，可以通过修改视图中表格的属性置为空即可。
从FastAdmin 1.2.0版本开发已经支持固定列功能，我们可以将右侧最后一定固定住，当出现横向滚动条时让最后一列始终固定在可视窗口中，如果需要开启此功能，请在初始化表格时添加以下两个参数即可。
17.分页信息
分页信息显示的文字可以通过在表格初始化前定义
分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置
18.翻页信息
翻页信息会根据服务端返回的数据行数自动进行渲染，如果返回的行数不满足分页条件时，此项是不会显示的
完整代码
PHP代码
JS代码：
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
Table.api.init({
extend: {
index_url: 'test/index',
add_url: 'test/add',
edit_url: 'test/edit',
del_url: 'test/del',
multi_url: 'test/multi',
table: 'test',
}
});
var table = $("#table");
table.on('load-success.bs.table', function (e, data) {
console.log(data);
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'weigh',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'admin_id', title: __('Admin_id')},
{field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
{field: 'category_id', title: __('Category_id'), visible: false},
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
{field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
{field: 'title', title: __('Title')},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
{field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
{field: 'weigh', title: __('Weigh'), operate: false, visible: false},
{field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
{field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
{
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) {
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));
},
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
},
{
field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
buttons: [
{
name: 'detail',
title: __('详情'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'test/detail',
callback: function (data) {
Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
}
}],
formatter: Table.api.formatter.operate
}
]
]
});
$('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var field = $(this).closest("ul").data("field");
var value = $(this).data("value");
var options = table.bootstrapTable('getOptions');
options.pageNumber = 1;
options.queryParams = function (params) {
var filter = {};
if (value !== '') {
filter[field] = value;
}
params.filter = JSON.stringify(filter);
return params;
};
table.bootstrapTable('refresh', {});
return false;
});
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});
HTML代码：
【转载自】一张图解析FastAdmin中的表格列表的功能
