一张图解析FastAdmin中的表格列表的功能

Karson 2017-8-29 66956

https://cdn.forum.fastadmin.net/uploads/201809/15/a6309f467fcade6c47d226f2890ebe29
点击图片查看高清大图

功能描述

请根据图片上的数字索引查看对应功能说明。

1.菜单名称和描述
默认生成的CRUD是没有菜单名称和描述显示的,如果需要显示则可以修改权限管理->菜单规则,给对应菜单的添加上备注信息后即可显示,支持HTML

2.TAB过滤选项卡
在一键生成CRUD时,如果表中存在status字段且为ENUM类型,则会生成相应的TAB过滤选项卡,如果需要生成其它字段的过滤选项卡则可以在使用php think crud时使用--headingfilterfield=你的字段名称来指定字段

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

{field: 'createtime', title: __('Create Time')},

这里默认是启用的通用搜索,针对通用搜索,有以下几个常用的配置:

operate:'=' //用于查询时的操作符,默认为=,为false表示禁用此字段的通用搜索,支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
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},

如果我们需要完全自定义我们的通用搜索栏,我们可以在配置bootstrap-table时定义searchFormTemplate选项来完全重写我们的通用搜索栏,具体请参考开发示例插件中的自定义搜索示例

4.工具栏按钮
FastAdmin在一键CRUD时会自动生成添加、编辑、删除、导入、更多按钮的HTML,这些按钮会根据用户所拥有的权限控制基是否显示或隐藏。我们可以在控制器对应的index.html视图文件中任意修改或删除对应的按钮。请特别注意这几个自动生成的按钮都通过基拥有的class属性来绑定相关的事件,例如添加按钮拥有btn-add这个class、框架所已经占用的class如下:

btn-add: 添加按钮使用
btn-edit: 编辑按钮使用
btn-del: 删除按钮使用
btn-import: 导入按钮使用
btn-more: 更多按钮使用
btn-multi: 指操作使用
btn-disabled: 添加此class后则只有在列表有选中数据时按钮才会变为可使用

如果我们想点击添加按钮后默认全屏,则可以给添加按钮加上data-area='["100%","100%"]'即可默认全屏
如果我们想自定义按钮并添加事件,我们需要在视图中添加相应的HTML代码,然后在对应的JS文件中添加按钮的执行事件,切记不可在视图中直接编写JS或jQuery代码来绑定事件

5.动态渲染统计信息
很多时候我们需要在页面额外显示服务端传回的动态数据,此时我们只需要在index.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中的index方法中添加以下的JS

//当表格数据加载完成时
table.on('load-success.bs.table', function (e, data) {
    //这里可以获取从服务端获取的JSON数据
    console.log(data);
    //这里我们手动设置底部的值
    $("#money").text(data.extend.money);
    $("#price").text(data.extend.price);
});

注意务必将这段代码添加在var table = $("#table");之后
其中data.extend.moneydata.extend.price就是我们在服务端动态返回的数据,如下

$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);

通过以上配置即可动态显示服务端返回的额外数据

6.快速搜索
快速搜索在键入关键词时将实时从服务端搜索数据,如果你的数据表数据较大,建议关闭此功能,关闭的方法是使用search:false,其次快速搜索默认只会搜索主键id这个字段,如果你需要搜索其它字段,则需要在服务端你的控制器中定义$searchFields这个值,如下

protected $searchFields = 'id,name,title';

这样在快速搜索时将会搜索id,name,title这三个字段。
如果需要修改默认文本框的placeholder,可以在表格初始化前定义

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};

7.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式,如果不需要此功能,可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏,如果不需要此功能,可以设置showColumns: false,如果想要表格中的字段列默认隐藏可以设置字段属性visible: false即可默认隐藏
导出按钮默认将导出整个表的所有行,如果需要仅导出当前分页的数据,需要设置exportDataType: 'basic',如果想导出选中的行,则可以设置为exportDataType: 'selected',如果不需要此功能,可以设置showExport: false
通用搜索指表格上方的搜索,通用搜索的表单默认是隐藏的,如果需要默认显示,需要设置searchFormVisible: true,如果不需要通用搜索功能,可以设置commonSearch: false。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false即可。

8.字段配置
默认字段的控制是根据控制器对应的JS来配置的,因此字段配置是通过JS,而在我们的视图index.html中是没有任何字段配置的,通常我们的配置如下:

columns: [
    [
        {checkbox: true},
        {field: 'id', title: __('Id')},
        {field: 'admin_id', title: __('Admin_id')},
        {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
        {field: 'category_id', title: __('Category_id'), visible: false},
        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
        {field: 'title', title: __('Title')},
        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
    ]
]

字段配置的参数有

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

FastAdmin封装了许多常用的formatter方法,我们可以快速的调用即可。

> `Table.api.formatter.icon` 快速将字段渲染成一个按钮,仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态,默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的链接,点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接,点击后将把链接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志,仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操作栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮

9.复选框
如果我们需要不需要复选框则移除{checkbox: true}即可

10.分类名称(关联搜索出分类表的名称)
这里显示的分类名称是根据分类表关联查询出来的结果,如果我们启用关联查询,我们必须在当前控制器中设置属性protected $relationSearch = true;,同时我们的index方法也需要重写,请参考下方的完整代码中PHP部分。如果我们启用了关联查询,当两个表中的字段有冲突时,我们必须在字段中加上别名。请参考下方的完整代码中JS部分。

11.标志
我们可以使用formatter:Table.api.formatter.flag来渲染标志字段,默认会数据库的值渲染以下几种颜色

{index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'}

如果我们需要扩展额外的值,则可以使用

custom:{aaa: 'info', bbb:'danger'}

12.图片和图片组
我们可以使用

formatter:Table.api.formatter.image
formatter:Table.api.formatter.images

以上两种方式来渲染图片或图片组
请注意如果是图片组的情况下,数据值应该是以,进行分隔的

13.开关
我们可以使用formatter:Table.api.formatter.toggle来生成开关组件
默认情况下是根据数据库值1和0来表示开和关
我们可以通过额外的配置和定义开和关,比如

yes: 'open', no: 'close'

则此时会根据数据库值是open还是close来展示开关,
开关在点击的时候默认是只允许修改数据库的status字段的,如果我们开关不是status字段,我们需要在服务端对应的控制器中定义protected $multiFields="id,name,swith";,多个字段以,进行分隔

14.状态渲染
我们可以使用formatter:Table.api.formatter.status来渲染状态
默认根据以下值进行状态的颜色渲染

{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

如果我们状态有额外的值,我们可以使用custom来进行扩展,如下

custom: {rejected:'danger', agreed:'success'}

状态渲染显示的文本是根据searchList配置的值进行渲染的

15.自定义按钮
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的,代码如下

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

按钮配置支持的参数有:

name 按钮唯一标识,其中add/edit/del/dragsort已经被占用,请勿使用。我们可以在HTML视图文件的table使用data-buttons-标识来控制显示
text 按钮的文本内容,如果不需要显示文本可忽略
title 鼠标移上去的标题或弹窗/选项显示的标题
icon 按钮的图标,请使用font-awesome图标库
classname 按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs,FastAdmin已经为这几个固定的Class注册了事件,所以可以直接使用,如果想要实现其它功能,需要自己手动编写代码绑定事件才可使用。
url 按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接,直接functionstring类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID,如果需要传递其它字段值,请在URL中使用{字段名}占位即可
refresh 自动刷新,只针对btn-ajax事件
confirm 确认框提示文字,配置后会在确认操作再执行对应的事件,只针对btn-ajax/btn-dialog/btn-addtabs事件
success 事件成功的回调,只针对btn-ajax事件
error 事件失败的回调,只针对btn-ajax事件
callback 弹窗回传的回调,只针对btn-dialog事件
hidden 是否隐藏按钮,按钮默认显示,支持functionbool类型
visible 是否显示按钮,按钮默认显示,支持functionbool类型
extend 按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接,则配置extend:' target="_blank"'即可

16.操作
操作区域默认是排序、编辑、删除这三个按钮,此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现,编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。如果我们需要重写编辑(排序、删除)按钮的相关属性,则可以使用buttons来定义编辑(排序、删除)的相关属性。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮,如示例图中的详情按钮。请参考下方完整代码中JS部分。

17.分页信息
分页信息显示的文字可以通过在表格初始化前定义

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
    return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录,总共 ' + totalRows + ' 条记录';
};

分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置

pageSize: 10,
pageList: [10, 25, 50, 'All'],

18.翻页信息
翻页信息会根据服务端返回的数据行数自动进行渲染,如果返回的行数不满足分页条件时,此项是不会显示的

完整代码

PHP代码

<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
 * 测试管理
 *
 * @icon fa fa-circle-o
 * @remark 此列表是通过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能,只需在设计表时符合FastAdmin相关字段名称、备注要求,即可生成相关的表单组件
 */
class Test extends Backend
{
    protected $model = null;
    protected $relationSearch = true;
    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Test');
    }
    /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
            $list = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
            $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
            return json($result);
        }
        return $this->view->fetch();
    }
}

JS代码:

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'test/index',
                    add_url: 'test/add',
                    edit_url: 'test/edit',
                    del_url: 'test/del',
                    multi_url: 'test/multi',
                    table: 'test',
                }
            });

            var table = $("#table");

            //当表格数据加载完成时
            table.on('load-success.bs.table', function (e, data) {
                //这里可以获取从服务端获取的JSON数据
                console.log(data);
                //这里我们手动设置底部的值
                $("#money").text(data.extend.money);
                $("#price").text(data.extend.price);
            });

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'admin_id', title: __('Admin_id')},
                        {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
                        {field: 'category_id', title: __('Category_id'), visible: false},
                        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
                        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
                        {field: 'title', title: __('Title')},
                        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
                        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
                        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
                        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
                        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
                        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
                        {
                            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
                        },
                        {
                            field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    title: __('详情'),
                                    classname: 'btn btn-xs btn-primary btn-dialog',
                                    icon: 'fa fa-list',
                                    url: 'test/detail',
                                    callback: function (data) {
                                        Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"});
                                    }
                                }],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    var filter = {};
                    if (value !== '') {
                        filter[field] = value;
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

HTML代码:

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('test/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>

                        <div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
                        <a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定义搜索</a>
                        <a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> 启动</a>
                        <a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> 暂停</a>
                        <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>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('test/edit')}" 
                           data-operate-del="{:$auth->check('test/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
最后于 1月前 被F4NNIU编辑 (错别字修正)
感谢以下的小伙的赞赏支持
最新回复 (100)
  • 胡导 2017-8-29
    感谢TA
    0 引用 2

    现在点击进入页面就直接显示所有的数据,那如果我想点击进去时就加入我的搜索条件呢,这样的话我是要在哪里把搜索条件加进去呢?也就是说我的表格数据只需要显示某个字段按搜索条件得出的数据。@Karson

  • likcoc 2017-8-29
    感谢TA
    0 引用 3

    正需要这个,MARK了

  • Karson 楼主 打赏 2017-8-29
    感谢TA
    0 引用 4

    @胡导 参考上方的第4条,自定义搜索,把queryParams放在表格实例化的配置中去,而不是用按钮点击触发。

  • 胡导 2017-8-29
    感谢TA
    0 引用 5

    补充一下,例如我现在有上万条的数据,而我现在只需要显示部分筛选出来的数据,那我这筛选条件加到什么地方。例如,某个字段"状态":“OPEN”和“CLOSE”,那我只想在打开表格时只显示OPEN状态的数据。@Karson

  • 胡导 2017-8-29
    感谢TA
    0 引用 6

    @Karson OK

  • 胡导 2017-8-29
    感谢TA
    0 引用 7

    我把它加到js里的index方法后面,搜索被正确执行了,满足之前的需求。但是会弹出警告信息:未知的数据格式。@Karson

  • Karson 楼主 打赏 2017-8-29
    感谢TA
    0 引用 8
  • 胡导 2017-8-29
    感谢TA
    0 引用 9

    不好意思,问题已解决,应该是我位置放错了。

  • threettiger 2017-8-29
    感谢TA
    0 引用 10

    很好,很强大

  • lnlingyuan 2017-8-29
    感谢TA
    0 引用 11

    mark

  • Doscript 2017-8-30
    感谢TA
    0 引用 12

    mark

  • wudi 2017-9-20
    感谢TA
    0 引用 13

    哪位大神知道多条件搜索怎么写,很急

  • ynew 2017-9-23
    感谢TA
    0 引用 14

    怎么在js里修改列宽呢?{field: 'shop.name', title: __('Shop'),'min-width':'200px'}和{field: 'shop.name', title: __('Shop'),‘width':'200px'},都不起作用。

  • cncbec 2017-9-27
    感谢TA
    0 引用 15

    这么好的帖子,没有收藏功能吗?

  • lirozsmrwm 2017-9-27
    感谢TA
    0 引用 16

    好东西啊~!~必须收藏:heart_eyes:

  • 岳绮罗 2017-10-10
    感谢TA
    0 引用 17

    https://cdn.forum.fastadmin.net/uploads/201710/10/9309d4b18d19b345f780de39de07a131
    框架怎么根据不同的判断条件显示可操作的按钮?
    我没开票之前操作显示开票,开过之后显示详情?

  • Karson 楼主 打赏 2017-10-10
    感谢TA
    0 引用 18

    @岳绮罗 自己定义formatter使用function来实现。

    最后于 2017-10-10 被Karson编辑
  • 岳绮罗 2017-10-11
    感谢TA
    0 引用 19

    @Karson OK,搞定了!多谢
    https://cdn.forum.fastadmin.net/uploads/201710/11/2c1d2037403dfd6547e6d5b94d3e9530

    最后于 2017-10-11 被岳绮罗编辑
  • 岳绮罗 2017-10-11
    感谢TA
    0 引用 20

    @Karson
    搞定了,多谢

  • 谐戏 2017-10-12
    感谢TA
    0 引用 21

    非常好,让我豁然开朗!

  • kevin222 2017-10-17
    感谢TA
    0 引用 22

    能否支持表格单列多个字段的显示https://cdn.forum.fastadmin.net/uploads/201710/17/755c3f483b2c13b25e0fc4591ab8d3cf

  • Karson 楼主 打赏 2017-10-17
    感谢TA
    0 引用 23

    @kevin222 单例多个字段 可以使用formatter函数来格式化。

  • 谐戏 2017-10-20
    感谢TA
    0 引用 24

    赋值:$this->assignconfig("aa", "bb");
    使用:Config.aa

  • huff 2017-10-21
    感谢TA
    0 引用 25

    自定义搜索带下拉框的怎么做?

  • chance 2017-10-25
    感谢TA
    0 引用 26

    自定义搜索中:
    点击自定义搜索则发起搜索分类ID为1的数据,无法点击分页,就是说分页失效了,只能看看第一页的数据
    https://cdn.forum.fastadmin.net/uploads/201710/25/625ddd8c6557e21d2a7bd6f8ec2619a7

  • slysjun 2017-10-31
    感谢TA
    0 引用 27

    编辑时js如何获取编辑行的数据?

  • yangliu 2017-11-2
    感谢TA
    0 引用 28

    as大家好的就看撒谎短时几十块大和的就看撒谎端口数多久卡上的就看撒谎的就看撒谎加上就看撒谎的空间撒谎打卡拉升阶段卡视角昆仑决奥斯卡了多久萨克雷即可拉伸觉得是克拉就大神昆仑决的上课啦觉得是克拉大家快来撒进的空气礼物就诶欧文噢诶我就可怜群文件昆仑决萨迪克连接的快乐撒娇的快乐撒娇的快乐撒娇的快乐撒娇的快乐撒娇打开了撒即可拉伸卡拉胶打开

  • yang57861637 2017-11-2
    感谢TA
    0 引用 29

    @Karson .添加、编辑、删除按钮 是 {:build_toolbar()} 生成的 ,我要是想打印添加的数据,在哪里打印?

  • ryante 2017-11-6
    感谢TA
    0 引用 30

    那个自定义的按钮的参数怎么改变,第10点那里

  • shadowaix 2017-11-13
    感谢TA
    0 引用 31

    mark

  • April 2017-11-14
    感谢TA
    0 引用 32

    mark

  • 人定胜天 2017-11-21
    感谢TA
    0 引用 33

    https://cdn.forum.fastadmin.net/uploads/201711/21/6d0af73e73c5a7548712458eb8450be0
    当一行中有个字段的数据太长了,如何限制他的展示长度

  • Karson 楼主 打赏 2017-11-22
    感谢TA
    0 引用 34

    @人定胜天 使用formatter进行字符串截取。试试

    formatter: function(value){
        return value.substr(0, 20);
    }
  • ruisen 2017-11-25
    感谢TA
    0 引用 35

    如果我index()中获取列表数据时采用join 后 返回的别名字段,那么在js配置文件中field值就是这个字段的别名了,而通用查询中查询的也是这个字段的别名,就无法查询了

  • korai 2017-12-4
    感谢TA
    0 引用 36

    通用搜索 commonSearch 的时候 怎么获取到 页面本来的 分页数量 limit的值 呢

  • Karson 楼主 打赏 2017-12-10
    感谢TA
    0 引用 37

    @ruisen 如果需要使用关联查询,记得把$relationSearch置为true

  • flashboycn 2017-12-10
    感谢TA
    0 引用 38

    @Karson 请教下,我完全照抄的代码(替换了完整代码中的3段),为什么没有显示图中3上面的 1和2两部分(3上面的检索区域都没有出现)?

    最后于 2017-12-10 被flashboycn编辑
  • bwqyujianweilai 2017-12-13
    感谢TA
    0 引用 39

    mark一下

  • 感谢TA
    0 引用 40

    SQLSTATE[42S22]: Column not found: 1054 Unknown column 'supplier.supplier_name' in 'where clause'

  • olfy 11月前
    感谢TA
    0 引用 41

    nice。解决大部分问题。3Q.:pray:

  • xxyalx 11月前
    感谢TA
    0 引用 42

    赞一个 , 感谢分享

  • xuaimin 11月前
    感谢TA
    0 引用 43

    mark

  • jadeglorious 11月前
    感谢TA
    0 引用 44

    如果想根据某一个或者某个字段格式化整行数据的显示样式应该怎么做。

  • jadeglorious 11月前
    感谢TA
    0 引用 45

    @jadeglorious 比如根据库存、报警库存两个字段,如果库存小于或者等于报警库存的值,则将整行数据加背景,字体加粗等设置特殊样式怎么处理

  • jiangpengju 11月前
    感谢TA
    0 引用 46

    全部代码中没有model,不会报错么,控制器不存在:app\common\model\Page

  • jiangpengju 11月前
    感谢TA
    0 引用 47

    @kevin222 你这个实现没,具体formatter的设计代码是什么呀,可以分享一下么

  • 感谢TA
    0 引用 48

    mark

  • 湛蓝天空 10月前
    感谢TA
    0 引用 49
    @Karson Table.api.formatter.status 快速将字段渲染成状态,仅支持normal/hidden/deleted/locked这四个状态
    如果我用户的性别存储的是 1 和2 怎么将表格中的状态转为 1- 男 2-女 3-保密
  • xpxwcn 10月前
    感谢TA
    0 引用 50

    data-operate-edit="{:$auth->check('page/edit')}" 是不是没权限就会不显示编辑按钮?

  • Karson 楼主 打赏 10月前
    感谢TA
    0 引用 51

    @xpxwcn 是的。

  • 哼哼哈嗨 9月前
    感谢TA
    0 引用 52

    想问下btn-ajax使用ajax之后后台需要返回什么格式的参数呢,处理后返回回来都只有个OK的显示没法提示成功
    还有就是绑定的success方法重写了没有用

  • ngu98 9月前
    感谢TA
    0 引用 53

    我自定义了一个按钮 用于审核 执行完ajax我想刷新一下 表格 但是window.location.reload(),直接重新加载了表格 有没有什么方法是只刷新一下本页面 不跳回到第一页

  • royliuforever 9月前
    感谢TA
    0 引用 54

    很详细细致。mark

  • paitson 9月前
    感谢TA
    0 引用 55

    想问一下,我的footerFormatter没有生效,已经指定了true属性,在论坛上也没有看见关于这方面的话题,能否出一个指点的帖子或者其他的东西呢?

  • wwy 8月前
    感谢TA
    0 引用 56

    请问表格中的“联动搜索”如何使用,例子中的那个好像没有传递参数。image.png
    这里面把管理员组改了个名字。而且只能选择第一个。
    能解释下这段的意思吗?
    $("input[name='title']", form).addClass("cxselect").data("source", "auth/adminlog/selectpage").data("primaryKey", "title").data("field", "title").data("orderBy", "id desc");

    OK了,是因为Bootstraptable.php 中的cxselect 的文件107行换成 $list = \app\admin\model\Admin::where('id', 'in', $adminIds)->field('id as value, username AS name, loginfailure, logintime')->select();
    增加 loginfailure, logintime两项,否则会出现问题。

    最后于 8月前 被wwy编辑
  • Hien 8月前
    感谢TA
    0 引用 57
    Karson [@岳绮罗](/user/426) 自己定义formatter使用function来实现。

    @岳绮罗 根据条件判断显示按钮的formatter怎么写,求附上代码

  • tanyl2006 8月前
    感谢TA
    0 引用 58

    茅塞顿开,豁然开朗!必须收藏。

  • lvshun 7月前
    感谢TA
    0 引用 59

    非常好!感谢分享!

  • ajw333 6月前
    感谢TA
    0 引用 60

    QQ截图20180531165521.png
    “关闭”输成“关键”了,建立楼主改改

  • MorningBOBO 6月前
    感谢TA
    0 引用 61

    MARKUP

  • yulinzhihou 6月前
    感谢TA
    0 引用 62

    1.jpg
    2.jpg
    3.jpg
    使用TP5.1,不知道怎么将列表显示页面里面的实体符号转换成正常的空格.新增和编辑页面因为有具体的html结构,在模板变量后面加一个raw可以转换,那么问题是在首页没有HTML结构体的情况下怎么去将这个实体符号转换成空格呢.

  • yulinzhihou 6月前
    感谢TA
    0 引用 63

    @Karson 大神,帮忙看一下.

  • Erasme 5月前
    感谢TA
    0 引用 64
    chance 自定义搜索中: 点击自定义搜索则发起搜索分类ID为1的数据,无法点击分页,就是说分页失效了,只能看看第一页的数据 ![https://cdn.forum.fastadmin.net/uploads/2 ...

    我要选出category_id为1和2的怎么写?

  • Erasme 5月前
    感谢TA
    0 引用 65

    @Karson 自定义搜索要搜索category_id为1和2的怎么写?

  • orcish 5月前
    感谢TA
    0 引用 66

    改了js 不生效,netWork不更新

  • F4NNIU 打赏 5月前
    感谢TA
    0 引用 67
    orcish 改了js 不生效,netWork不更新

    #FastAdmin 开发第一步 (只有一句话)

  • 潘阿贵 5月前
    感谢TA
    0 引用 68

    导出出数据过大,会变成计数法,这个在哪里解决@Karson

  • F4NNIU 打赏 5月前
    感谢TA
    0 引用 69
    潘阿贵 导出出数据过大,会变成计数法,这个在哪里解决@Karson

    #导出 Excel 文件时身份证号变成科学计数法怎么办?

  • zjc348 5月前
    感谢TA
    0 引用 70

    表格中加一列input输入框怎么做?

  • azui007 4月前
    感谢TA
    0 引用 71

    你好,请问我点击data-operate-edit的按钮时,直接调用后台的edit,不想出现新的Alert界面,请问文档里面有写吗。

  • ag1992 4月前
    感谢TA
    0 引用 72

    请问怎么设置默认的搜索时间

  • ag1992 4月前
    感谢TA
    0 引用 73

    @Karson

  • xayah 4月前
    感谢TA
    0 引用 74

    @Karson 主从表样式有问题 按钮会跑到从表的上边,再点击就消失了

  • Chellog 4月前
    感谢TA
    0 引用 75
    ag1992 请问怎么设置默认的搜索时间

    ces

  • iis 4月前
    感谢TA
    0 引用 76

    queryParams:function (params) {

        return {
            search: params.search,
            sort: params.sort,
            order: params.order,
            filter: JSON.stringify({area_id: 1}),
            op: JSON.stringify({area_id: '='}),
            offset: params.offset,
            limit: params.limit,
        };
    };

    系统所有信息都要根据用户所在区域id进行显示,表格init的时候只想匹配区域id为1的数据,除了filer和op其他参数要带着吗,init中定义的话自带的搜索功能就失效了@Karson

  • 198845aa 4月前
    感谢TA
    0 引用 77

    我想买网站上面的支付免签源代码,XV18520244520 希望能联系

  • dameng 4月前
    感谢TA
    0 引用 78

    请教,我想为 普通表单 搜索 添加提交事件。我在对应的js 添加了 //提交之前验证手机号

            $(document).on("submit", "form.form-commonsearch", function () {
                Layer.alert('123456');
                Toastr.info("当前执行的是自定义搜索");
                evt.preventDefault();
                return false;
            });
    

    对应的 view 是这样的

    <script id="customformtpl" type="text/html">

    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">

    。。。。
    </form>
    </script>

    结果时没有任何反应。我这样添加有什么问题么,或者还有其他更好的实现方式。谢谢。

  • 小哥哥 3月前
    感谢TA
    0 引用 79

    grinning

  • hary 3月前
    感谢TA
    0 引用 80
    湛蓝天空 > [@Karson](/user/1) Table.api.formatter.status 快速将字段渲染成状态,仅支持normal/hidden/deleted/locked这四个状态 如 ...

    你做出来了》?

  • Lnews 3月前
    感谢TA
    0 引用 81

    @Karson 大哥啊,求指导,导入数据库不走文件上传,如何正确操作?我现在直接掉那个import方法数据进去了,但是返回报错,原因好像是不是ajax提交的,求正确方法

  • 猎人2018 3月前
    感谢TA
    0 引用 82

    怎么给表单的input添加onchange事件啊,大佬们

  • sjj329 2月前
    感谢TA
    0 引用 83
    胡导 现在点击进入页面就直接显示所有的数据,那如果我想点击进去时就加入我的搜索条件呢,这样的话我是要在哪里把搜索条件加进去呢?也就是说我的表格数据只需要显示某个字段按搜索条件得出的数据。[@Karson]( ...

    @胡导 你这个怎么写的js,写在哪里的,能不能截图给我看一下

  • 广州_liang 2月前
    感谢TA
    0 引用 84

    @Karson 大佬 4里面的按钮没有反应是什么情况

  • gzshengsheng 2月前
    感谢TA
    0 引用 85

    非常好,非常实用。

  • 共票码 2月前
    感谢TA
    0 引用 86

    table中tbody中的后台数据库中的遍历出来的数据怎末操作呀?望大佬解析哦?

  • chasen 1月前
    感谢TA
    0 引用 87

    想隐藏按钮,自定义按钮中的visible参数不生效是什么原因引起?
    image.png

  • Moran丶佳哥 1月前
    感谢TA
    0 引用 88

    请问,如何修改编辑按钮的提示信息

  • Moran丶佳哥 1月前
    感谢TA
    0 引用 89

    @Karson 能单独删除某列表页的这个编辑按钮吗?或者单独改这个页的编辑按钮的提示

  • guomengtao 1月前
    感谢TA
    0 引用 90

    分享一下找通用搜索JS文件的路径,如果js找到了就好下手接着这个文档改对应的数值了。

    在控制器章节我们有提到每个控制器都对应一个JS模块,控制器名称和JS中模块名称是一一对应的。

    比如我们的控制器是application/admin/controller/Article.php,则我们JS中对应的JS模块是public/assets/js/backend/article.js

    希望帮助到大家

  • cdria 1月前
    感谢TA
    0 引用 91

    标记下

  • ocean 1月前
    感谢TA
    0 引用 92

    @Karson 麻烦问一下,通用搜索要怎么配置和导入相关的js文件啊,我试了一下,弄不出来

  • ocean 1月前
    感谢TA
    0 引用 93

    image.png
    这是我引入的js文件

    最后于 1月前 被ocean编辑
  • 小凯凯 1月前
    感谢TA
    0 引用 94

    很秀, 我已经深深的被这后台给吸引

  • 爱好者 1月前
    感谢TA
    0 引用 95

    很棒啊!

  • 听风飞雪 29天前
    感谢TA
    0 引用 96
    最后于 29天前 被听风飞雪编辑
  • lh800 29天前
    感谢TA
    0 引用 97

    如果能实现bootstrapTable 动态表头生成就更好了,可以根据用户自己的需求保存表头和排序,下次这个用户再打开的时候动态加载表头就完美了。@Karson

  • jingling 22天前
    感谢TA
    0 引用 98

    @Karson 请教大神,fastadmin如何整合autocomplete插件,类似官方搜索功能

  • zhouxiaoqiaocq 14天前
    感谢TA
    0 引用 99

    @Karson,抽时间看看https://forum.fastadmin.net/thread/7861

  • zhouxiaoqiaocq 14天前
    感谢TA
    0 引用 100
  • 未登录
    102
返回