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

https://forum.fastadmin.net/thread/323


点击图片查看高清大图

功能描述

请根据图片上的数字索引查看对应功能说明。
1.时间筛选器
如果想在搜索栏使用时间区间进行搜索，则可以在JS中修改修改字段属性，如

{field: ‘createtime‘, title: __(‘Create Time‘), formatter: Table.api.formatter.datetime, operate: ‘BETWEEN‘, type: ‘datetime‘, addclass: ‘datetimepicker‘, data: ‘data-date-format="YYYY-MM-DD"‘},

其中type为类型，使用datetime将会把结果转换成时间戳进行搜索，如果你的数据库存储的是日期时间型数据，则移除该type属性，data指附件到input文本框上的属性
最新版FastAdmin已经支持用户体验更好的datetimerange插件，使用方式是：

{field:‘createtime‘, title: __(‘Create Time‘), formatter: Table.api.formatter.datetime, operate: ‘RANGE‘, addclass:‘datetimerange‘}

2.状态列表
默认我们的搜索都是一个文本框，如果需要改成下拉列表框，则需要使用如下代码

{field: ‘status‘, title: __(‘Status‘), formatter: Table.api.formatter.status, searchList: {‘normal‘: __(‘Normal‘), ‘hidden‘: __(‘Hidden‘)}, style: ‘min-width:100px;‘},

其中searchList使用的是一个JSON数据，同时searchList仍然支持数据、JSON对象、Ajax对象、Function函数。
普通搜索栏的搜索荐默认都是全部启用的，如果想禁用字段在普通搜索栏的显示，可以在字段属性中添加operate: false来禁用，如下方代码

{field: ‘status‘, title: __(‘Status‘), operate:false, formatter: Table.api.formatter.status}

3.添加、编辑、删除、导入、批量操作按钮
FastAdmin的添加、编辑、删除按钮默认是由{:build_toolbar()}生成的，默认是全部生成。如果我们只需要其中的部分按钮，则可以传入参数来实现，如{:build_toolbar(‘refresh,add‘)}，这样将只会生成刷新和添加按钮。同时也支持调整参数的位置来调整最后生成的位置，另外请注意{:build_toolbar()}还会根据当前管理员的权限判断按钮是否显示，例如你使用{:build_toolbar(‘refresh,add‘)}，如果当前管理员没有添加的权限，添加按钮仍然不会显示 。
目前build_toolbar支持的按钮有：

refresh: 刷新按钮
add: 添加
edit: 编辑
del: 删除
import: 导入

批量操作按钮是直接在视图页面上添加的HTML代码，直接修改即可。
启用导入请参考：https://forum.fastadmin.net/d/540

4.自定义搜索
FastAdmin中的Bootstrap-table表格的自定义搜索功能是非常强大的，我们可以按需要修改来实现自己的搜索功能，这里实现的功能是点击自定义搜索则发起搜索分类ID为1的数据，代码如下：

$(document).on("click", ".btn-singlesearch", function () {
    var options = table.bootstrapTable(‘getOptions‘);
    options.pageNumber = 1;
    options.queryParams = function (params) {
        return {
            search: params.search,
            sort: params.sort,
            order: params.order,
            filter: JSON.stringify({category_id: 1}),
            op: JSON.stringify({category_id: ‘=‘}),
            offset: params.offset,
            limit: params.limit,
        };
    };
    table.bootstrapTable(‘refresh‘, {});
    Toastr.info("当前执行的是自定义搜索");
    return false;
});

首先我们为自定义搜索这个按钮绑定上点击事件，这样当我们点击按钮时则发起搜索请求。其次注意我们获取了Bootstra-table表格的属性配置，并修改了其中的pageNumber和queryParams，pageNumber指页码置为第一页，queryParams是这里的重点，我们修改了其中的filter和op，filter是我们的过滤条件，op是我们的条件操作符，操作符支持=、!=、LIKE、NOT LIKE、>、>=、<、<=、IN(...)、NOT IN(...)、BETWEEN、NOT BETWEEN、LIKE %...%、IS NULL、IS NOT NULL，这里的filter和op支持同时搜索多个条件。

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

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

这样在快速搜索时将会搜索id,name,title这三个字段。

6.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式，如果不需要此功能，可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏，如果不需要此功能，可以设置showColumns: false，如果想要表格中的字段列默认隐藏可以设置字段属性visible: false即可默认隐藏
导出按钮默认将导出整个表的所有行，如果需要仅导出当前分页的数据，需要设置exportDataType: ‘basic‘，如果想导出选中的行，则可以设置为exportDataType: ‘selected‘，如果不需要此功能，可以设置showExport: false
通用搜索指表格上方的搜索，通用搜索的表单默认是隐藏的，如果需要默认显示，需要设置searchFormVisible: true，如果不需要通用搜索功能，可以设置commonSearch: false。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false即可。
7. 分类名称(关联搜索出分类表的名称)
这里显示的分类名称是根据分类表关联查询出来的结果，如果我们启用关联查询，我们必须在当前控制器中设置属性protected $relationSearch = true;，同时我们的index方法也需要重写，请参考下方的完整代码中PHP部分。如果我们启用了关联查询，当两个表中的字段有冲突时，我们必须在字段中加上别名。请参考下方的完整代码中JS部分。
8.标志和图片
FastAdmin封装了许多常用的方法，我们可以快速的调用即可。

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 快速生成多个按钮
9.状态
此处的状态是根据第8项中的Table.api.formatter.status进行生成的。
10.按钮组
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下

{field: ‘id‘, title: __(‘按钮‘), table: table, buttons: [
    {name: ‘detail‘, text: ‘弹窗‘, title: ‘弹窗标题‘, icon: ‘fa fa-list‘, classname: ‘btn btn-xs btn-primary btn-dialog‘, url: ‘page/detail‘, callback:function(data){}},
    {name: ‘detail‘, text: ‘Ajax‘, title: ‘Ajax标题‘, icon: ‘fa fa-flash‘, classname: ‘btn btn-xs btn-success btn-ajax‘, url: ‘page/detail‘, success:function(data, ret){}, error:function(){}},
    {name: ‘detail‘, text: ‘选项卡‘, title: ‘选项卡标题‘, icon: ‘fa fa-flash‘, classname: ‘btn btn-xs btn-info btn-addtabs‘, url: ‘page/detail‘}
], operate:false, formatter: Table.api.formatter.buttons}

其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。
btn-dialog的按钮会自动注册callback事件
btn-ajax的按钮会自动注册成功和失败的事件
11.操作
操作区域默认是排序、编辑、删除这三个按钮，此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现，编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮，如示例图中的详情按钮。请参考下方完整代码中JS部分。

原文地址：https://www.cnblogs.com/bluealine/p/8818043.html

时间： 2024-11-09 00:07:39

一张图解析FastAdmin中的表格列表的功能的相关文章

通过三张图了解Redux中的重要概念

上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比较容易理解的,结合着Redux的单向数据流模型,很多概念就比较清晰了. 下面就按照自己的理解整理出了Redux中相关的内容,如果你也刚开始学习Redux,希望能给你一个直观的认识. Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.R

一张图解析如何让img垂直居中对齐

测试代码: <!DOCTYPE html> <html> <head> <style> .dd { background-color: gray; position: relative; line-height: 120px; } .d1 { font-size: 120px; } .d2 { font-size: 80px; } .d3 { font-size: 40px; } .d4 { font-size: 0px; } div { float: le

一张图说明实践中该如何使用 git workflow

ref: https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md

WinRT中实现回到列表顶部功能

WinRT中常用的数据列表显示控件大略就是ListBox,ListView,GridView.在应用中,有的时候用户在长时间浏览 列表内容之后想回到列表顶部,那么针对于这种需求该如何实现呢? 最重要的是利用列表控件的ScrollIntoView方法. 好了,啥都不说了,代码如下. XAML: <Page x:Class="DragDemo.BlankPage1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pr

20151008-20151101学习内容之二：用ps把一张图做成HTML页面

用ps把一张图做成HTML页面 table 表格 div+css 切图.切片工具.切图.文件.存储为web所用格式.修改图片大小.GIF.存储.格式: HTML和图像.选择存储位置 1.在ps中打开一个网页模板,利用切片工具进行剪裁 2存储方式是:存储为web所用格式 3设置存储像素1366.GIF格式 4保存到文件夹中以html+图像 的格式 5打开html,打开方式为DW方式打开 6根据网页在进行对其修改 设置超链接:加上超链接网址,然后设置boder="0" <td row

两张图解读Java异常与断言

两张图解读Java异常与断言                                 --转载请注明出处:coder-pig 本节引言: 前天发布的"七张图解析Java多线程"大家的反响不错,嗯呢,今天再来两张吧, 关于Java异常与断言的,涉及到的东西有: ①什么是异常,为什么会出现异常,异常处理机制模型,常见异常信息总结,检验异常与非检验异常; 异常的捕获:try-catch块,finally块,多重catch块,try-catch块的嵌套; 异常的声明:throws回避异

一张图深度解析Linux共享内存的内核实现

一张图深度解析Linux共享内存的内核实现 Sailor_forever  sailing_9806#163.com http://blog.csdn.net/sailor_8318/article/details/39484747 (本原创文章发表于Sailor_forever 的个人blog,未经本人许可,不得用于商业用途.任何个人.媒体.其他网站不得私自抄袭:网络媒体转载请注明出处,增加原文链接,否则属于侵权行为.如有任何问题,请留言或者发邮件给sailing_9806#163.com)

一张图让你明白IOS中bounds和frame的区别

很多人在学习的就搞混了bounds和frame的区别,大家可以看看这张图就会明白它俩的区别: frame: 该view在父view坐标系统中的位置和大小.(参照点是,父亲的坐标系统) bounds:该view在本地坐标系统中的位置和大小.(参照点是,本地坐标系统,就相当于ViewB自己的坐标系统,以0,0点为起点) center:该view的中心点在父view坐标系统中的位置和大小.(参照点是,父亲的坐标系统) 看上图中,如果将ViewA的bounds设置为(-200,-100,550,400)

python—networkx：在一张图中画出多个子图

通过plt.subplot能够在一张图中画出多个子图 #coding: utf-8 #!/usr/bin/env python """ Draw a graph with matplotlib. You must have matplotlib for this to work. """ __author__ = """Aric Hagberg ([email protected])"""