FastAdmin中的表格列表常用功能

Posted 2023-02-21 请叫我郝先生

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;">
    <i class="fa fa-dollar"></i>
    <span class="extend">
        金额：<span id="money">0</span>
        单价：<span id="price">0</span>
    </span>
</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弹框提醒：

11.js禁止双击打开编辑界面

dblClickToEdit: false  //默认为true设置为false后生效

12.js双加打开设置的某一界面

table.on('dbl-click-row.bs.table', function (e, row, element, field) 
     $('.btn-detail', element).trigger("click");
);

13.其他

16         showHeader: true,     //是否显示列头
17         //classes: 'table-no-bordered',
18         showLoading: true,
19         undefinedText: '',
20         showFullscreen: true,
21         toolbarAlign: 'left',
22         paginationHAlign: 'right',
23         silent: true,
24         url: url,
25         method: 'get',                      //请求方式（*）
26         toolbar: '#toolbar',                //工具按钮用哪个容器
27         striped: true,                      //是否显示行间隔色
28         cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
29         pagination: true,                   //是否显示分页（*）
30         sortable: false,                     //是否启用排序
31         sortOrder: "asc",                   //排序方式
32         //queryParams: InitTable.queryParams,  //传递参数（*）
33         sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
34         pageNumber: 1,                       //初始化加载第一页，默认第一页
35         pageSize: 10,                       //每页的记录行数（*）
36         pageList: [2, 5, 10, 15],        //可供选择的每页的行数（*）
37         search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
38         strictSearch: true,
39         showColumns: true,                  //是否显示所有的列
40         showRefresh: true,                  //是否显示刷新按钮
41         minimumCountColumns: 2,             //最少允许的列数
42         clickToSelect: true,                //是否启用点击选中行
43         //height: 680,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
44         uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
45         showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
46         cardView: false,                    //是否显示详细视图
47         detailView: false,                   //是否显示父子表
48         showExport: true,
49         //exportDataType: 'all',
50         exportDataType: "selected",        //导出checkbox选中的行数
51         paginationLoop: false,             //是否无限循环