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

时间  2019-11-10
标签 一张 解析 fastadmin 表格 列表 功能 繁體版
原文   原文链接

大图:javascript

一、默认生成的CRUD是没有菜单名称和描述显示的，若是须要显示则能够在后台修改，权限管理->菜单规则，给对应菜单的添加上备注信息后便可显示，支持HTMLphp

 

二、TAB过滤选项卡html


在一键生成CRUD时，若是表中存在status字段且为ENUM类型，则会生成相应的TAB过滤选项卡，若是须要生成其它字段的过滤选项卡则能够在使用php think crud时使用--headingfilterfield=你的字段名称来指定字段java

 

三、.通用搜索jquery

通用搜索的的内容是根据bootstrap-table配置的字段columns决定的，渲染的内容及格式由FastAdmin自动进行渲染，若是须要禁用或删除某一选项，能够在JS中配置operate:false来删除通用搜索中的选项。例如一般状况下咱们的在JS中进行字段的配置以下：ajax

{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添加额外的属性

经常使用配置示例以下：json

//时间区间搜索
{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选项来彻底重写咱们的通用搜索栏，具体请参考开发示例插件中的自定义搜索示bootstrap

 

四、工具栏按钮api

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代码来绑定事件

 

五、动态渲染统计信息

不少时候咱们须要在页面额外显示服务端传回的动态数据，此时咱们只须要在index.html视图中添加

<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
    <i class="fa fa-dollar"></i>
    <span class="extend">
        金额：<span id="money">0</span>
        单价：<span id="price">0</span>
    </span>
</a>

而后在控制器对应的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, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);

经过以上配置便可动态显示服务端返回的额外数据

 

六、搜索框

快速搜索在键入关键词时将实时从服务端搜索数据，若是你的数据表数据较大，建议关闭此功能，关闭的方法是使用search:false，其次快速搜索默认只会搜索主键id这个字段，若是你须要搜索其它字段，则须要在服务端你的控制器中定义$searchFields这个值，以下

protected $searchFields = 'id,name,title';

这样在快速搜索时将会搜索id,name,title这三个字段。
若是须要修改默认文本框的placeholder，能够在表格初始化前定义

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};

 

七、工具按钮 浏览模式、显示隐藏列、导出、通用搜索

浏览模式能够切换卡片视图和表格视图两种模式，若是不须要此功能，能够设置showToggle: false
显示隐藏列能够快速切换字段列的显示和隐藏，若是不须要此功能，能够设置showColumns: false，若是想要表格中的字段列默认隐藏能够设置字段属性visible: false便可默认隐藏
导出按钮默认将导出整个表的全部行，若是须要仅导出当前分页的数据，须要设置exportDataType: 'basic'，若是想导出选中的行，则能够设置为exportDataType: 'selected'，若是不须要此功能，能够设置showExport: false
通用搜索指表格上方的搜索，通用搜索的表单默认是隐藏的，若是须要默认显示，须要设置searchFormVisible: true，若是不须要通用搜索功能，能够设置commonSearch: false。若是想要控制字段列不参考搜索则能够设置字段列属性为operate: false便可。

 

 

八、表头  字段配置

默认字段的控制是根据控制器对应的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},
    ]
]

字段配置的参数有

checkbox:true, //是否为首列复选框
field:'name' //字段名称,若是启用了关联查询这里可使用别名,好比:category.name,请注意服务端返回的字段一一对应，若是使用了一个不存在的字段，将不会渲染任何数据
title:'名称' //字段标题,显示于头部的标题
operate:'=' //通用搜索的操做符,详见上方通用搜索介绍
visible:false //字段是否可见，为false时将默认不可见
formatter:Table.api.formatter.search //格式化显示的内容,FastAdmin内部定义了许多通用的格式化方法
events: //定义元素响应的事件
searchList: //定义通用搜索下拉列表的数据
addclass: //通用搜索文本框或下拉列表的额外class
type: //通用搜索文本框的类型
data: //通用搜索文本框或下拉列表的额外属性

FastAdmin封装了许多经常使用的formatter方法，咱们能够快速的调用便可。

> `Table.api.formatter.icon` 快速将字段渲染成一个按钮，仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展现的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展现的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态，默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的连接，点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的连接，点击后将把连接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志，仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操做栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮

 

九、checked多选框列  

若是咱们须要不须要复选框则移除{checkbox: true}便可

 

 10，分类列  分类名称(关联搜索出分类表的名称)

这里显示的分类名称是根据分类表关联查询出来的结果，若是咱们启用关联查询，咱们必须在当前控制器中设置属性protected $relationSearch = true;，同时咱们的index方法也须要重写，请参考下方的完整代码中PHP部分。若是咱们启用了关联查询，当两个表中的字段有冲突时，咱们必须在字段中加上别名。请参考下方的完整代码中JS部分。

十一、标志

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

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

若是咱们须要扩展额外的值，则可使用

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

 

十二、图片和图片组

咱们可使用

formatter:Table.api.formatter.image
formatter:Table.api.formatter.images

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

 

1三、开关

咱们可使用formatter:Table.api.formatter.toggle来生成开关组件
默认状况下是根据数据库值1和0来表示开和关
咱们能够经过额外的配置和定义开和关，好比

yes: 'open', no: 'close'

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

 

 1四、状态

 

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

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

若是咱们状态有额外的值，咱们可使用custom来进行扩展，以下

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

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

 

·1五、自定义按钮

按钮组的功能是根据第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-标识来控制显示
text 按钮的文本内容,若是不须要显示文本可忽略
title 鼠标移上去的标题或弹窗/选项显示的标题
icon 按钮的图标,请使用font-awesome图标库
classname 按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已经为这几个固定的Class注册了事件，因此能够直接使用，若是想要实现其它功能，须要本身手动编写代码绑定事件才可以使用。
url 按钮的连接/Ajax事件请求的URL/弹窗连接/选项卡连接，直接function和string类型,此连接会自动在连接后添加ids/{ids},{ids}为当行主键ID，若是须要传递其它字段值，请在URL中使用{字段名}占位便可
refresh 自动刷新,只针对btn-ajax事件
confirm 确认框提示文字,配置后会在确认操做再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件
success 事件成功的回调,只针对btn-ajax事件
error 事件失败的回调,只针对btn-ajax事件
callback 弹窗回传的回调,只针对btn-dialog事件
hidden 是否隐藏按钮,按钮默认显示,支持function和bool类型
visible 是否显示按钮,按钮默认显示,支持function和bool类型
extend 按钮扩展信息,能够任意定制按钮的参数,好比咱们想在新窗口中打开连接，则配置extend:' target="_blank"'便可

 

1六、操做

 

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

 

1七、

分页信息显示的文字能够经过在表格初始化前定义

 

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

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

pageSize: 10,
pageList: [10, 25, 50, 'All'],

 

1八、分页工具栏

翻页信息会根据服务端返回的数据行数自动进行渲染，若是返回的行数不知足分页条件时，此项是不会显示的

 

完整代码：

php

 

<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
 * 测试管理
 *
 * @icon fa fa-circle-o
 * @remark 此列表是经过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能，只需在设计表时符合FastAdmin相关字段名称、备注要求，便可生成相关的表单组件
 */
class Test extends Backend
{
    protected $model = null;
    protected $relationSearch = true;
    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Test');
    }
    /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
            $list = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
            $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
            return json($result);
        }
        return $this->view->fetch();
    }
}

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) {
                //这里能够获取从服务端获取的JSON数据
                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', addclas
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程