一张图解析FastAdmin一键生成CRUD表格列表的功能(2)

一张图解析FastAdmin一键生成CRUD表格列表的功能(2)






11、标志
我们可以使用formatter:Table.api.formatter.flag来渲染标志字段，默认会数据库的值渲染以下几种颜色

1. {index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'}

复制代码

如果我们需要扩展额外的值，则可以使用

1. custom:{aaa: 'info', bbb:'danger'}

复制代码

12、图片和图片组
我们可以使用

1. formatter:Table.api.formatter.image
   
2. formatter:Table.api.formatter.images

复制代码

以上两种方式来渲染图片或图片组
请注意如果是图片组的情况下,数据值应该是以,进行分隔的

13、开关
我们可以使用formatter:Table.api.formatter.toggle来生成开关组件
默认情况下是根据数据库值1和0来表示开和关
我们可以通过额外的配置和定义开和关，比如

1. yes: 'open', no: 'close'

复制代码

则此时会根据数据库值是open还是close来展示开关，
开关在点击的时候默认是只允许修改数据库的status字段的，如果我们开关不是status字段，我们需要在服务端对应的控制器中定义protected $multiFields="id,name,swith";，多个字段以,进行分隔

14、状态
我们可以使用formatter:Table.api.formatter.status来渲染状态
默认根据以下值进行状态的颜色渲染

1. {normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

复制代码

如果我们状态有额外的值，我们可以使用custom来进行扩展，如下

1. custom: {rejected:'danger', agreed:'success'}

复制代码

状态渲染显示的文本是根据searchList配置的值进行渲染的

15、自定义按钮
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下

1. {
   
2.     field: 'buttons',
   
3.     width: "120px",
   
4.     title: __('按钮组'),
   
5.     table: table,
   
6.     events: Table.api.events.operate,
   
7.     buttons: [
   
8.         {
   
9.             name: 'detail',
   
10.             text: __('弹出窗口打开'),
    
11.             title: __('弹出窗口打开'),
    
12.             classname: 'btn btn-xs btn-primary btn-dialog',
    
13.             icon: 'fa fa-list',
    
14.             url: 'example/bootstraptable/detail',
    
15.             callback: function (data) {
    
16.                 Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
    
17.             },
    
18.             visible: function (row) {
    
19.                 //返回true时按钮显示,返回false隐藏
    
20.                 return true;
    
21.             }
    
22.         },
    
23.         {
    
24.             name: 'ajax',
    
25.             text: __('发送Ajax'),
    
26.             title: __('发送Ajax'),
    
27.             classname: 'btn btn-xs btn-success btn-magic btn-ajax',
    
28.             icon: 'fa fa-magic',
    
29.             url: 'example/bootstraptable/detail',
    
30.             confirm: '确认发送',
    
31.             success: function (data, ret) {
    
32.                 Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
    
33.                 //如果需要阻止成功提示，则必须使用return false;
    
34.                 //return false;
    
35.             },
    
36.             error: function (data, ret) {
    
37.                 console.log(data, ret);
    
38.                 Layer.alert(ret.msg);
    
39.                 return false;
    
40.             }
    
41.         },
    
42.         {
    
43.             name: 'addtabs',
    
44.             text: __('新选项卡中打开'),
    
45.             title: __('新选项卡中打开'),
    
46.             classname: 'btn btn-xs btn-warning btn-addtabs',
    
47.             icon: 'fa fa-folder-o',
    
48.             url: 'example/bootstraptable/detail'
    
49.         }
    
50.     ],
    
51.     formatter: Table.api.formatter.buttons
    
52. }

复制代码

按钮配置支持的参数有：

1. name 按钮唯一标识,其中add/edit/del/dragsort已经被占用,请勿使用。我们可以在HTML视图文件的table使用data-buttons-标识来控制显示
   
2. text 按钮的文本内容,如果不需要显示文本可忽略
   
3. title 鼠标移上去的标题或弹窗/选项显示的标题
   
4. icon 按钮的图标,请使用font-awesome图标库
   
5. classname 按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。
   
6. url 按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接，直接function和string类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID，如果需要传递其它字段值，请在URL中使用{字段名}占位即可
   
7. refresh 自动刷新,只针对btn-ajax事件
   
8. confirm 确认框提示文字,配置后会在确认操作再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件
   
9. success 事件成功的回调,只针对btn-ajax事件
   
10. error 事件失败的回调,只针对btn-ajax事件
    
11. callback 弹窗回传的回调,只针对btn-dialog事件
    
12. hidden 是否隐藏按钮,按钮默认显示,支持function和bool类型
    
13. visible 是否显示按钮,按钮默认显示,支持function和bool类型
    
14. extend 按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接，则配置extend:' target="_blank"'即可

复制代码

16、操作
操作区域默认是排序、编辑、删除这三个按钮，此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现，编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。如果我们需要重写编辑(排序、删除)按钮的相关属性，则可以使用buttons来定义编辑(排序、删除)的相关属性。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮，如示例图中的详情按钮。请参考下方完整代码中JS部分

17、分页信息
分页信息显示的文字可以通过在表格初始化前定义

1. $.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
   
2.     return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
   
3. };

复制代码

分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置

1. pageSize: 10,
   
2. pageList: [10, 25, 50, 'All'],

复制代码

18、分页工具栏
翻页信息会根据服务端返回的数据行数自动进行渲染，如果返回的行数不满足分页条件时，此项是不会显示的

完整代码：

php

1. <?php
   
2. namespace app\admin\controller;
   
3. use app\common\controller\Backend;
   
4. /**
   
5. * 测试管理
   
6. *
   
7. * @icon fa fa-circle-o
   
8. * @remark 此列表是通过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能，只需在设计表时符合FastAdmin相关字段名称、备注要求，即可生成相关的表单组件
   
9. */
   
10. class Test extends Backend
    
11. {
    
12.     protected $model = null;
    
13.     protected $relationSearch = true;
    
14.     public function _initialize()
    
15.     {
    
16.         parent::_initialize();
    
17.         $this->model = model('Test');
    
18.     }
    
19.     /**
    
20.      * 查看
    
21.      */
    
22.     public function index()
    
23.     {
    
24.         if ($this->request->isAjax())
    
25.         {
    
26.             list($where, $sort, $order, $offset, $limit) = $this->buildparams();
    
27.             $total = $this->model
    
28.                     ->with("category")
    
29.                     ->where($where)
    
30.                     ->order($sort, $order)
    
31.                     ->count();
    
32.             $list = $this->model
    
33.                     ->with("category")
    
34.                     ->where($where)
    
35.                     ->order($sort, $order)
    
36.                     ->limit($offset, $limit)
    
37.                     ->select();
    
38.             $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
    
39.             return json($result);
    
40.         }
    
41.         return $this->view->fetch();
    
42.     }
    
43. }

复制代码

js

1. define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
   
2. 
   
3.     var Controller = {
   
4.         index: function () {
   
5.             // 初始化表格参数配置
   
6.             Table.api.init({
   
7.                 extend: {
   
8.                     index_url: 'test/index',
   
9.                     add_url: 'test/add',
   
10.                     edit_url: 'test/edit',
    
11.                     del_url: 'test/del',
    
12.                     multi_url: 'test/multi',
    
13.                     table: 'test',
    
14.                 }
    
15.             });
    
16. 
    
17.             var table = $("#table");
    
18. 
    
19.             //当表格数据加载完成时
    
20.             table.on('load-success.bs.table', function (e, data) {
    
21.                 //这里可以获取从服务端获取的JSON数据
    
22.                 console.log(data);
    
23.                 //这里我们手动设置底部的值
    
24.                 $("#money").text(data.extend.money);
    
25.                 $("#price").text(data.extend.price);
    
26.             });
    
27. 
    
28.             // 初始化表格
    
29.             table.bootstrapTable({
    
30.                 url: $.fn.bootstrapTable.defaults.extend.index_url,
    
31.                 pk: 'id',
    
32.                 sortName: 'weigh',
    
33.                 columns: [
    
34.                     [
    
35.                         {checkbox: true},
    
36.                         {field: 'id', title: __('Id')},
    
37.                         {field: 'admin_id', title: __('Admin_id')},
    
38.                         {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
    
39.                         {field: 'category_id', title: __('Category_id'), visible: false},
    
40.                         {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
    
41.                         {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
    
42.                         {field: 'title', title: __('Title')},
    
43.                         {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
    
44.                         {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
    
45.                         {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclas

复制代码

上一页：
一张图解析FastAdmin一键生成CRUD表格列表的功能(1)
http://www.admin365.cn/thread-46219-1-1.html  

文章来源：https://www.cnblogs.com/lichihua/p/10466540.html

http://www.admin365.cn/thread-46219-1-1.html  一张图解析FastAdmin一键生成CRUD表格列表的功能(1)