FastAdmin表格列表小技巧

2022-03-11

FastAdmin表格列表小技巧

1.自定义排序规则

1.1单一排序规则

sortName属性默认为id,sortOrder属性默认为DESC

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',//排序字段
    sortOrder: 'ASC',//排序规则,此项不写时默认为DESC
    fixedColumns: true,
    fixedRightNumber: 1,
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},

1.2 复合排序规则

sortName属性为复合排序规则时，sortOrder属性无效

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'date DESC,weigh ASC,id DESC',//复合排序规则
    fixedColumns: true,
    fixedRightNumber: 1,
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},

2.开启字段排序功能

字段上添加 sortable:true属性以启用字段排序功能

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',
    sortOrder: 'ASC',
    fixedColumns: true,
    fixedRightNumber: 1,
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id'), sortable:true},//字段开启排序功能

3.右上方功能栏设置

代码如下:

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',
    fixedColumns: true,//启用固定列
    fixedRightNumber: 1,//固定右侧列数
    search: false,//ID快速搜索开关
    showToggle: false,//浏览模式切换开关
    showColumns: false,//列表字段显隐开关
    showExport: false,//导出功能开关
    exportDataType: "auto",//导出类型:auto=表中所有行,basic=导出当前分页,selected=导出选中行
    exportTypes: ['json', 'xml', 'csv', 'txt', 'doc', 'excel'],//导出文件类型
    commonSearch: true,//是否使用表格上方的通用搜索
    searchFormVisible: false,//默认显示通用搜索
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},

4.操作栏生成下拉列表

操作栏按钮过多时可选择给按钮添加dropdown属性,将按钮隐藏在下拉列表中

4.1 操作栏生成下拉列表

给操作栏按钮添加dropdown属性,值为下拉列表显示的文字
生成多个下拉列表:添加不同的dropdown值

{
    field: 'operate', 
    title: __('Operate'), 
    table: table, 
    events: Table.api.events.operate,
    buttons: [
    	{
            name: 'good',
            dropdown: '更多1',//操作栏添加名称为更多2的按钮下拉列表
            icon: 'fa fa-pencil',
            title: '商品管理',
            extend: 'data-area=\'["90%", "80%"]\'',//弹窗尺寸调整为宽度90%,高度80%
            classname: 'btn btn-xs btn-success btn-editone'
        },
        
    	{
            name: 'good',
            dropdown: '更多2',//操作栏添加名称为更多2的按钮下拉列表
            icon: 'fa fa-pencil',
            title: '商品管理',
            extend: 'data-area=\'["90%", "80%"]\'',//弹窗尺寸调整为宽度90%,高度80%
            classname: 'btn btn-xs btn-success btn-editone'
        }
    ]
}

4.2 下拉列表显示在后面

下拉列表默认显示在最左侧，根据添加先后顺序展示

修改public/assets/js/require-table.js第694行

1 2	//html.unshift(dropdownHtml); html.push(dropdownHtml);//下拉列表按钮改为从右到左显示

重新压缩打包后在生产环境下才会生效官方文档

//一键压缩打包前后台的JS和CSS
php think min -m all -r all

//一键压缩打包后台的JS和CSS
php think min -m backend -r all

//一键压缩打包前后台的JS
php think min -m all -r js

//一键压缩打包后台的CSS
php think min -m backend -r css

//使用uglify进行一键压缩打包后台的JS文件
php think min -m backend -r js -o uglify

5.调整按钮弹出弹窗的大小

5.1 工具栏按钮

a标签增加data-area='["90%","80%"]'属性

1	<a href="javascript:;" class="btn btn-success btn-add title="{:__('Add')}" data-area='["90%","80%"]'><i class="fa fa-pencil"></i> {:__('Add')}</a>

5.2 操作栏按钮

button添加extend: 'data-area=\'["90%", "80%"]\''属性

{
    field: 'operate', 
    title: __('Operate'), 
    table: table, 
    events: Table.api.events.operate,
    buttons: [
    	{
            name: 'good',
            dropdown: '更多1',//操作栏添加名称为更多2的按钮下拉列表
            icon: 'fa fa-pencil',
            title: '商品管理',
            extend: 'data-area=\'["90%", "80%"]\'',//弹窗尺寸调整为宽度90%,高度80%
            classname: 'btn btn-xs btn-success btn-editone'
        }
    ]
}

本文作者： 小蜗牛
本文链接： https://vitaminvi.github.io/2022/03/11/FastAdmin表格列表小技巧/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！