[fastadmin]第六篇 FastAdmin中表格列表功能总结与 表格禁用与显示可视化配置教程
[fastadmin]第六篇 FastAdmin中表格列表功能总结与 表格禁用与显示可视化配置教程
本文将首先引导你了解FastAdmin中如何设置和优化CRUD(创建、读取、更新、删除)操作的默认配置,以及介绍某些功能特性的实用技巧。
FastAdmin中表格列表功能总结
菜单名称与描述
默认情况下,生成的CRUD菜单没有名称和描述显示。如需显示,可进入权限管理 -> 菜单规则
进行设置。对应菜单添加备注信息后即可显示,即支持HTML。
过滤选项卡
一键生成CRUD会利用表内 status
字段且为 ENUM
类型创建相应过滤选项卡。要生成其他字段过滤选项卡,可在使用 php think crud
时输入 --headingfilterfield=你的字段名称
设定字段。
通用搜索
通用搜索的内容继承自bootstrap-table配置字段 columns
。FastAdmin自动渲染内容和格式。若需禁用或删除某选项,可在JS中配置 operate:false
来删除通用搜索选项。
接下来,我们将在JS中配置字段,例如:
{field: 'createtime', title: __('Create Time')}
默认启用通用搜索。针对通用搜索,有以下常见配置:
operate:'=' //查询操作符,默认为=,为false表示禁用此字段的通用搜索,支持其他操作符
searchList: //用于渲染列表的数据,支持多种格式
addclass: //用于给input或select添加额外的class属性
type: //用于定义input文本框的类型,默认为text
data: //用于给input或select添加额外的属性
自定义按钮与事件绑定
如果希望自定义按钮并添加事件,我们需要在视图中添加相应HTML代码,然后在对应的JS文件中添加按钮的执行事件。切记,我们不在视图直接编写JS或jQuery代码来绑定事件。
动态渲染统计信息
在需要服务端返回动态数据的情况下,我们可以在视图中添加对应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中添加以下的JS:
table.on('load-success.bs.table', function (e, data) {
console.log(data);
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
这样我们就可以从服务端获取JSON数据并动态显示。
接下来,我们将介绍字段配置、按钮配置及快速搜索等功能。 详情可参考原文章中的详解。
快乐编程,提升效率。
表格button disable与 visible
代码如下
此代码,放在button下的数组中(新手请参照自己的fastadmin 代码)
{
name: 'commit_ar_manage',
text: __('生成应收'),
title: __('生成应收'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
// classname: 'btn btn-xs btn-info btn-addtabs',
icon: 'fa fa fa-check',
// url:function (data) {
// return Fast.api.fixurl( "medicine/purchase/form/getListByOrderId?order_id=" + data.id); // }, url: 'medicine/purchase/order/commitArManage?order_id={row.id}',
extend: 'data-toggle="tooltip"',
confirm:"是否按照当前已经匹配的数据生成应收?",
// visible: function (row) {
// if ( row.status == 3 ) { // return false; // }else if ( row.status == 4 ) { // return false; // }else { // return true; // } // }, disable:function (row) {
if ( row.status == 3 ) {
return true;
}else if ( row.status == 4 ) {
return true;
}else {
return false;
}
},
success: function (data, ret) {
Layer.alert(ret.msg);
Layer.closeAll('loading');
// 刷新表格
table.bootstrapTable('refresh',{});
// Fast.api.refreshtable('table');
},
error: function (data, ret) {
Layer.alert(ret.msg);
Layer.closeAll('loading');
return false; }
},
效果:
浅色禁用
隐藏就不看了。。就是消失而已
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: