FastAdmin中的表格列表常用功能

ゝ一纸荒年。 2023-01-23 11:50 8阅读 0赞

1.通用搜索\_`operate`

通用搜索的的内容是根据`bootstrap-table`配置的字段`columns`决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置`operate:false`来删除通用搜索中的选项。例如通常情况下我们的在JS中进行字段的配置如下：

operate:'=' //用于查询时的操作符，默认为=，
 为false表示禁用此字段的通用搜索，
 支持
 !=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
 例如如下案例：
 {field: 'usercard', title: __('身份证号'),operate:'LIKE'},

额外扩展参数\_addclass  searchlist

searchList: //用于渲染列表的数据，支持的格式有JSON Array、JSON Object、$.getJSON、Function
    addclass: //用于给input或select添加额外的class属性
    type: //用于定义input文本框的类型,默认为text
    data: //用于给input或select添加额外的属性
    代码案例：
    
    //时间区间搜索
    {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},

2.设置搜索模板\_searchFormTemplate

searchFormTemplate: 'planformtpl',

3.弹框百分比\_data-area

data-area='["100%","100%"]'

1.js 弹框 百分比
 $('.btn-add').data('area', ['100%', '100%']);
 
 2.A标签百分比
 <a href="javascript:;" data-area='["100%","100%"]' class="btn btn-success btn-add title="{:__('Add')}" >{:__('Add')}</a>
 
 3.extend: 'data-area=\'["100%", "100%"]\''

4.**动态渲染统计信息**

html代码：
 <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
 
 
 金额：0
 单价：0
 
 </a>
 js代码：
 //当表格数据加载完成时
 table.on('load-success.bs.table', function (e, data) {
 //这里可以获取从服务端获取的JSON数据
 console.log(data);
 //这里我们手动设置底部的值
 $("#money").text(data.extend.money);
 $("#price").text(data.extend.price);
 });

5.**快速搜索**

控制器:protected $searchFields = 'id,name,title';
    js_自定义搜索增加备注：
    $.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.字段是否显示\_visible**

visible: false

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

** 8.自定义按钮**

{
        field: 'operate', title: __('Operate'), table: table,
        buttons: [
            {name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail'}
        ],
        events: Table.api.events.operate, formatter: Table.api.formatter.operate
    }

{
        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
    }

9.弹框确认 confirm

buttons: [
        {
             name: 'ajax',
             title: __('退学回滚信息'),
             classname: 'btn btn-xs btn-primary btn-magic btn-ajax',
             icon: 'fa fa-cogs',
             confirm: '确定要回滚该学生退学信息？',
             url: function(row){return 'url网址'},
                  success: function (data, ret) {
                           Layer.alert("发送内容：" + JSON.stringify(ret.msg));
                           table.bootstrapTable('refresh');
                  },
                  error: function (data, ret) {
                           Layer.alert(ret.msg);
                           return false;
                  }
         }]

10.分页信息\_pagination

js代码：
    pageSize: 10,
    pageList: [10, 25, 50, 'All'],
    pagination：false  禁止分页
    
    html代码：
    
    data-show-export="false" data-show-toggle="false" data-show-columns="false"
    data-search="false" data-common-Search="false"`
    //分页隐藏
    data-pagination="false"

js弹框提醒：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210806142033814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70 1]: /images/20221004/0491edc0f39e4b5197f43ba4e54b17ef.png