[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 协议》，转载必须注明作者和本文链接