fastadmin-tablelink 左右列表联动

胡萝卜的兔

于 2024-07-23 10:42:56 发布

阅读量105

点赞数 6

分类专栏： thinkphp thinkphp5.1 文章标签： fastadmin

本文链接：https://blog.csdn.net/xxpxxpoo8/article/details/140627222

版权

thinkphp5.1 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

thinkphp

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html代码
application/admin/view/zccms/mod/index.html

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">
                <div id="1" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="toolbar1" class="toolbar">
                                {:build_toolbar('refresh')}
                            </div>
                            <table id="table1" class="table table-striped table-bordered table-hover" width="100%">

                            </table>


                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">
                <div id="myTabContent2" class="tab-content">
                    <div class="tab-pane fade active in" id="two">
                        <div class="widget-body no-padding">
                            <div id="toolbar2" class="toolbar">
                                {:build_toolbar('refresh,add')}
                            </div>

                            <table id="table2" class="table table-striped table-bordered table-hover"
                                   data-operate-edit="{:$auth->check('zccms/mod/edit')}"
                                   data-operate-del="{:$auth->check('zccms/mod/del')}"
                                   width="100%">

                            </table>


                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

js代码
public/assets/js/backend/zccms/mod.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var mid = 0;
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                pageSize: 15,
                pageList: [10, 25, 50, 'All'],

            });
            this.first();
            this.second();
            $(".btn-add").data("area",["1000px","600px"]);
            $(".btn-edit").data("area",["1000px","600px"]);
        },

            first: function () {
                // 表格1
                var table1 = $("#table1");

                table1.bootstrapTable({
                    url: 'zccms/mod/getModList' + location.search,
                    toolbar: '#toolbar1',
                    sortName: 'id',
                    showToggle: false,
                    showColumns: false,
                    showExport: false,
                    commonSearch: false,
                    sortOrder: 'asc',
                    search: false,
                    columns: [
                        [

                            {field: 'id', title: __('Id')},
                            {field: 'name', title: __('Mid')},
                            {field: 'table_name', title: __('Table_name'), operate: 'LIKE', table: table1, class: 'autocontent', formatter: Table.api.formatter.content},
                            {
                                field: 'operate', title: __('Operate'), table: table1, events: Table.api.events.operate, buttons: [
                                    {
                                        name: 'zc',
                                        title: '资产列表',
                                        text: '资产列表',
                                        icon: 'fa fa-list',
                                        classname: 'btn btn-primary btn-xs btn-click',
                                        click: function (e, data) {
                                            $("#myTabContent2 .form-commonsearch input[name='mid']").val(data.id);
                                            $("#myTabContent2 .btn-refresh").trigger("click");

                                        }
                                    }
                                ], formatter: Table.api.formatter.operate
                            }
                        ]
                    ]
                });

                // 为表格1绑定事件
                Table.api.bindevent(table1);
            },
            second: function () {
                // 表格2
                var table2 = $("#table2");


                table2.bootstrapTable({
                    url: 'zccms/mod/index' + location.search,
                    extend: {
                        index_url: '',
                        add_url: 'zccms/mod/add',
                        edit_url: 'zccms/mod/edit',
                        del_url: 'zccms/mod/del',
                        table: '',
                    },
                    toolbar: '#toolbar2',
                    sortName: 'id',
                    search: false,
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'id', title: __('Id')},
                            {field: 'mid', title: __('Mid')},
                            {field: 'mname', title: __('Mid'),visible:false},
                            {field: 'cid', title: __('Department'),visible:false},
                            {field: 'cname', title: __('Department')},
                            {field: 'tname', title: __('Asset Type')},
                            {field: 'nums', title: __('Asset Number')},
                            {field: 'custodian', title: __('Custodian')},
                            {field: 'brand', title: __('Brand')},
                            {field: 'purchase_date', title: __('Purchase Date')},
                            {field: 'show_time', title: __('Show_time'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                            {field: 'admin_id', title: __('Admin_id')},
                            {field: 'author', title: __('Author'), operate: 'LIKE'},
                            {field: 'sort', title: __('Sort')},
                            {field: 'status', title: __('Status')},
                            {
                                field: 'operate', title: __('Operate'), table: table2,
                                buttons: [
                                    {name: 'edit', text: '', title: '编辑', icon: 'fa fa-pencil', classname: 'btn btn-xs btn-primary btn-dialog', url: "zccms/mod/edit/ids/{row.id}/mid/{row.mid}",callback:function (data) {
                                        console.log('回调',data);
                                        }},
                                    {name: 'del', text: '', title: '删除', icon: 'fa fa-trash', classname: 'btn btn-xs btn-danger btn-delone', url: 'zccms/mod/del'}
                                ],
                                events: Table.api.events.operate, formatter: Table.api.formatter.operate
                            }
                        ]
                    ]
                });

                $(".btn-add").off("click").on("click", function () {
                    let mid  = $(".commonsearch-table input[name=mid]").val();
                    console.log('mid',mid);
                    if (!mid){
                        Backend.api.toastr.error( __('Please select the model list on the right'));
                        return false;
                    }
                    let url = 'zccms/mod/add?mid=' +　mid;
                    Fast.api.open(url, __('Add'), $(this).data() || {});
                    return false;
                });
                // 为表格2绑定事件
                console.log('为表格2绑定事件');

                Table.api.bindevent(table2);

            },
            add: function () {
                Controller.api.bindevent();
            },
            edit: function () {
                Controller.api.bindevent();
            },
            api: {
                bindevent: function () {
                    Form.api.bindevent($("form[role=form]"), function(data, ret){
                        //这里是表单提交处理成功后的回调函数，接收来自php的返回数据
                        console.log('这里是表单提交处理成功后的回调函数',data);
                        Fast.api.close(data); //关闭弹窗

                    }, function(data, ret){
                        //PHP返回失败时处理
                        console.log('PHP返回失败时处理',data,ret);
                    }, function(success, error){
                        console.log('bindevent的第三个参数为提交前的回调',success,error);
                        //bindevent的第三个参数为提交前的回调
                        //如果我们需要在表单提交前做一些数据处理，则可以在此方法处理
                        //注意如果我们需要阻止表单，可以在此使用return false;即可
                        //如果我们处理完成需要再次提交表单则可以使用submit提交,如下
                        //Form.api.submit(this, success, error);
                        // return false;
                    });
                }

            },

    };

    return Controller;
});

php代码

 public function _initialize()
    {
        parent::_initialize();
        $this->mod = new \app\admin\model\zccms\Mod;
        $this->model =  $this->mod;
        $this->mod = new \app\admin\model\zccms\Mod;
        $this->modelsList = (new ModelsModel())->getModelsList();
        $this->models = (new ModelsModel());

        $this->categorys = (new \app\admin\model\zccms\Category())->getCategoryTreeList($this->mid);
        $this->typeData = (new \app\admin\model\zccms\Type())->getParentNode();

        foreach ($this->categorys as &$cate) {
            $this->category_for_name[$cate['id']] = $cate['icon_name'];
        }

        foreach ($this->modelsList as $v) {
            $this->modelsArr[$v['id']] = $v['name'];
        }

        foreach ($this->typeData as $v) {
            $this->typeArr[$v['id']] = $v['name'];
        }



        $this->assignconfig('category_for_name', $this->category_for_name);
    }



 public function index()
    {
        //当前是否为关联查询
        $this->relationSearch = false;
        //设置过滤方法
        $this->request->filter(['strip_tags', 'trim']);
        $this->mid = $this->request->param('mid');
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }

            /*修改选择栏目包含子栏目*/
            $filter = json_decode($this->request->get('filter'), true);
            if (isset($filter['cid'])) {
                $filter['cid'] = CategoryModel::instance()->getChildrenIds($filter['cid'], true);
                $this->request->get(['filter' => json_encode($filter)]);
            }

            if (!isset($this->mid) && isset($filter['mid'])) {
                $this->mid = $filter['mid'];
            }

            /*去掉自动生成的状态where*/
            $whereExt = [];
            if (isset($filter['status'])) {
                $whereExt['mod.status'] = $filter['status'];
                unset($filter['status']);
                $this->request->get(['filter' => json_encode($filter)]);
            }
            list($where, $sort, $order, $offset, $limit, $alias) = $this->buildparams();
            $list = $this->mod->order('sort mod.desc,mod.id desc')
                ->paginate($limit);
            $result = array("total" => $list->total(), "rows" => $list->items());

            return json($result);
        }
        $this->assignconfig('fields', $this->fields);
        $this->view->assign('categorys', $this->categorys);
        return $this->view->fetch('index');
    }