前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Fastadmin了解一下??

Fastadmin了解一下??

作者头像
benny
发布2018-08-13 17:39:15
5.2K0
发布2018-08-13 17:39:15
举报
基于ThinkPHP5和Bootstrap的极速后台开发框架

详见开发文档:https://doc.fastadmin.net/docs/index.html

benny也是近段时间接触到了它,算是入门理解级别,但觉得这个框架的好处就是可以提高我们的开发效率,一键生成开发文档和后台管理系统,对于长期写后台数据接口开发的你们来说,不用写后台管理系统的html和js代码简直是太完美了。特此介绍完毕,有兴趣的可以去官网了解一下。

以下是框架自带的后台管理系统表格列表功能详解:

1.时间筛选器

如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如

代码语言:javascript
复制
{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插件,使用方式是:

代码语言:javascript
复制
{field:'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass:'datetimerange'}
2.状态列表

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

代码语言:javascript
复制
{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来禁用,如下方代码

代码语言:javascript
复制
{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支持的按钮有:

代码语言:javascript
复制
refresh: 刷新按钮
add: 添加
edit: 编辑
del: 删除
import: 导入

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

4.自定义搜索

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

代码语言:javascript
复制
$(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表格的属性配置,并修改了其中的 pageNumberqueryParamspageNumber指页码置为第一页, queryParams是这里的重点,我们修改了其中的 filteropfilter是我们的过滤条件, op是我们的条件操作符,操作符支持 =、!=、LIKE、NOT LIKE、>、>=、<、<=、IN(...)、NOT IN(...)、BETWEEN、NOT BETWEEN、LIKE%...%、IS NULL、IS NOT NULL,这里的 filterop支持同时搜索多个条件。

5.快速搜索

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

代码语言:javascript
复制
protected $searchFields = 'id,name,title';

这样在快速搜索时将会搜索 id,name,title这三个字段。 如果需要修改默认文本框的 placeholder,可以在表格初始化前定义

代码语言:javascript
复制
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};
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 快速生成多个按钮Table.api.formatter.toggle 快速生成切换按钮

9.状态

此处的状态是根据第8项中的 Table.api.formatter.status进行生成的。如果需要传入其它状态,请使用 custom参数,参数配置为 {状态1:'success',状态2:'grey'}

10.按钮组

按钮组的功能是根据第8项中的 Table.api.formatter.buttons进行生成的,代码如下

代码语言:javascript
复制
{field: 'id', title: __('按钮'), table: table, buttons: [
    {name: 'name1', text: '弹窗', title: '弹窗标题', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail', callback:function(data){}},
    {name: 'name2', 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: 'name3', text: '选项卡', title: '选项卡标题', icon: 'fa fa-flash', classname: 'btn btn-xs btn-info btn-addtabs', url: 'page/detail'}
], operate:false, 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/弹窗链接/选项卡链接,直接 functionstring类型,此链接会自动在链接后添加 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 是否隐藏按钮,按钮默认显示,支持 functionbool类型visible 是否显示按钮,按钮默认显示,支持 functionbool类型extend 按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接,则配置 extend:' target="_blank"'即可

11.操作

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

代码语言:javascript
复制
来源:https://forum.fastadmin.net/thread/323,经验分享,感谢Karson。
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-07-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员的碎碎念 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于ThinkPHP5和Bootstrap的极速后台开发框架
  • 1.时间筛选器
  • 2.状态列表
  • 3.添加、编辑、删除、导入、批量操作按钮
  • 4.自定义搜索
  • 5.快速搜索
  • 6.浏览模式、显示隐藏列、导出、通用搜索
  • 7. 分类名称(关联搜索出分类表的名称)
  • 8.标志和图片
  • 9.状态
  • 10.按钮组
  • 11.操作
相关产品与服务
云数据库 Redis
腾讯云数据库 Redis(TencentDB for Redis)是腾讯云打造的兼容 Redis 协议的缓存和存储服务。丰富的数据结构能帮助您完成不同类型的业务场景开发。支持主从热备,提供自动容灾切换、数据备份、故障迁移、实例监控、在线扩容、数据回档等全套的数据库服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档