Fastadmin

表格

表格依赖 BootstrapTable

树形表格数据展开与收缩

假如你的表结构有下列三个关键字段

• id ID
• name 名称
• pid 上级 ID

首先你得实现树结构的查询

<?php
namespace app\admin\controller\baomin;

use app\common\controller\Backend;
use fast\Tree;

class Unit extends Backend
{
    
    /**
     * Unit模型对象
     * @var \app\admin\model\baomin\Unit
     */
    protected $model = null;
    protected $unitlist = [];

    public function _initialize()
    {
        parent::_initialize();
       
        $this->model = new \app\admin\model\baomin\Unit();
        // 必须将结果集转换为数组
        $unitlist = collection($this->model->order('weigh DESC,id ASC')->select())->toArray();
        Tree::instance()->init($unitlist);
        $this->unitlist = [];
        $this->unitlist = Tree::instance()->getTreeList(Tree::instance()->getTreeArray(0));
 
        // 下拉框数据 (如果有需要)
        $unitdata = [
            0       => '无'
        ];
        foreach ($this->unitlist as $k => $v) {
            $unitdata[$v['id']] = $v['name'];
        }
        $this->assign('unitdata', $unitdata);
        // 表单项渲染:
        // {:build_select('row[pid]', $unitdata, $row['pid'], ['class'=>'form-control selectpicker', 'data-rule'=>'required'])}
    }

    
    public function index()
    {
        if ($this->request->isAjax()) {
            $list = $this->unitlist;
            $total = count($this->unitlist);
            $result = array("total" => $total, "rows" => $list);
            return json($result);
        }
        return $this->view->fetch();
    }

js 代码部分

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        index: function () {
            // ...

            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        { field: 'id', title: __('ID') },
                        { field: 'id', title: '展开', operate: false, formatter: Controller.api.formatter.subnode },
                        {
                            field: 'name',
                            title: __('Name'),
                            operate: 'LIKE',
                            align:'left',
                            formatter: function (value, row, index) {
                                return value.toString().replace(/(&|&)nbsp;/g, ' ');
                            }
                        },
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ],
                pagination: false,          // 隐藏分页
                search: false,              // 隐藏搜索框
                commonSearch: false,        // 隐藏搜索按钮
            });

            // 为表格绑定事件
            Table.api.bindevent(table);

            // 参考：https://ask.fastadmin.net/article/27247.html
            // 当内容渲染完成后
            table.on('post-body.bs.table', function (e, settings, json, xhr) {
                // 默认隐藏所有子节点
                $("a.btn[data-id][data-pid][data-pid!=0]").closest("tr").hide();
                // $(".btn-node-sub.disabled").closest("tr").hide();
                // 显示隐藏子节点
                $(".btn-node-sub").off("click").on("click", function (e) {
                    var status = $(this).data("shown") ? true : false;
                    $("a.btn[data-pid='"   $(this).data("id")   "']").each(function () {
                        $(this).closest("tr").toggle(!status);
                    });
                    $(this).data("shown", !status);
                    return false;
                });
                // 点击切换/排序/删除操作后刷新左侧菜单
                $(".btn-change[data-id],.btn-delone,.btn-dragsort").data("success", function (data, ret) {
                    Fast.api.refreshmenu();
                    return false;
                });
            });
            // 批量删除后的回调
            $(".toolbar > .btn-del,.toolbar .btn-more~ul>li>a").data("success", function (e) {
                Fast.api.refreshmenu();
            });
            // 展开隐藏一级
            $(document.body).on("click", ".btn-toggle", function (e) {
                $("a.btn[data-id][data-pid][data-pid!=0].disabled").closest("tr").hide();
                var that = this;
                var show = $("i", that).hasClass("fa-chevron-down");
                $("i", that).toggleClass("fa-chevron-down", !show);
                $("i", that).toggleClass("fa-chevron-up", show);
                $("a.btn[data-id][data-pid][data-pid!=0]").not('.disabled').closest("tr").toggle(show);
                $(".btn-node-sub[data-pid=0]").data("shown", show);
            });
            //展开隐藏全部
            $(document.body).on("click", ".btn-toggle-all", function (e) {
                var that = this;
                var show = $("i", that).hasClass("fa-plus");
                $("i", that).toggleClass("fa-plus", !show);
                $("i", that).toggleClass("fa-minus", show);
                $(".btn-node-sub.disabled").closest("tr").toggle(show);
                $(".btn-node-sub").data("shown", show);
            });
 
            // 关闭双击编辑，参考：https://blog.csdn.net/qq_35310543/article/details/115450768
            table.off('dbl-click-row.bs.table');
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            formatter: {
                subnode: function (value, row, index) {
                    return '<a href="javascript:;" data-toggle="tooltip" title="'   __('展开与收缩')   '" data-id="'   row.id   '" data-pid="'   row.pid   '" class="btn btn-xs '
                          (row.haschild == 1 ? 'btn-success' : 'btn-default disabled')   ' btn-node-sub"><i class="fa fa-sitemap"></i></a>';
                }
            },
       }
    };
    return Controller;
});

表格头部 tab 选项卡筛选

index.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="{:$Think.get.status === null ? 'active' : ''}">
                <a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a>
            </li>
            {foreach name="pay_status_map" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}">
                <a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a>
            </li>
            {/foreach}
        </ul>
    </div>

    <div class="panel-body">
        ...
    </div>
</div>

• data-field="status" 为筛选字段
• pay_status_map 为关联数组，$this->assign('pay_status_map', ['paid' => '已支付', ...])

筛选使用远程下拉组件

示例代码 js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        index: function () {
            // ...

            // 在普通搜索渲染后
            table.on('post-common-search.bs.table', function (event, table) {
                var form = $('form', table.$commonsearch)
                $("input[name='user_id']", form).addClass('selectpage').data('source', 'user/user/selectpage').data('primaryKey', 'id').data('field', 'nickname').data('orderBy', 'id desc')
                Form.events.cxselect(form)
                Form.events.selectpage(form)
            })

            // 初始化表格
            table.bootstrapTable({
                columns: [
                    [
                        // ...
                        {
                            field: 'user_id',
                            title: __('用户信息'),
                            operate: '=',
                            formatter: function (value, row, index) {
                                return row.nickname
                            }
                        },
                        // ..
                    ],
                ],
            })

            // ...
        },
    }
    return Controller
})