layuimini +thinkphp实现点击 tree 重载table

<style type="text/css">
    table tr td {
        height: 50px;
    }

    .layui-row .layui-col-sm2 {
        margin: 0 20px;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layuimini-search">
            <legend>Tags标签</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <button type="button" class="layui-btn edm-add">
                                <i class="layui-icon"></i>
                                上传
                            </button>
                        </div>

                        <div class="layui-inline">
                            <button type="button" class="layui-btn  layui-btn-primary ">下载选中</button>
                        </div>

                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary edm-delete ">删除选中</button>
                        </div>


                        <div class="layui-inline" style="float: right">
                            <div class="layui-input-inline" style="width: 280px;">
                                <input type="text" name="name" lay-verify="" lay-reqtext=""
                                       placeholder="文件名称" autocomplete="off" class="layui-input">
                            </div>
                            <button type="submit" class="layui-btn " lay-submit=""
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>

                        </div>

                    </div>
                </form>
            </div>
        </fieldset>


    </div>


    <div class="layuimini-main">
        <div class="layui-row">

            <div class="layui-col-xs6 layui-col-md2">
                <div id="edm_table_index9" class="demo-tree demo-tree-box"
                     style=" overflow: scroll;"></div>

            </div>

            <div class="layui-col-xs12 layui-col-md10">
                <table id="demo" lay-filter="edm_table_index"></table>

            </div>
        </div>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
        </script>
    </div>
</div>
<script>
    var ids = []; /*导出  ID*/

    var treeData = [];
    layui.use(['form', 'table', 'jquery', 'upload', 'tree', 'util'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tree = layui.tree
            , layer = layui.layer
            , util = layui.util;


        $(function (e) {
            reloadTreeMenus();
        });


        var ins1 = table.render({
            elem: '#demo',
            url: "/edm/lists",
            defaultToolbar: true,
            cols: [[
                {type: "checkbox",},
                {field: 'id', width: 80, title: 'ID'},
                {field: 'name', minWidth: 80, title: '文件夹',templet:function (e) {
                        try{
                            return e.menus.name;
                        }catch (e) {
                            return '-';
                        }
                    }},
                {field: 'name', minWidth: 200, title: '文件名称'},
                {
                    field: 'filepath_formal', minWidth: 80, title: '缩略图', templet: function (e) {
                        if(e.filepath_type_formal == true){
                            // image
                            return '<img id="driimg" lay-event="show-img" style="display: inline-block; width: 50%; height: 100%;" src="'+e.filepath_formal+'">';

                        }else{
                            return '不当前支持浏览';
                        }
                    }
                },
                {field: 'filepath_formal', minWidth: 80, title: '链接'},
                {field: 'update_time', minWidth: 80, title: '最后修改时间'},
                {field: 'create_time', width: 200, title: '添加时间'},
                {field: 'admin_name_formal', width: 200, title: '操作人'},
                {title: '操作', width: 80, toolbar: '#currentTableBar', align: "center"},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
        });

        // 表格里面的事件
        table.on('tool(edm_table_index)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    edit(data.id)
                    break;
                case 'show-img':
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: '516px',
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: '<img style="display: inline-block; width: 100%; height: 100%;" src="'+data.filepath_formal+'">'
                    });
                    break;

            }

        });

        //监听行双击事件
        table.on('rowDouble(edm_table_index)', function (obj) {
            var data = obj.data;
            edit(data.id);
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('demo', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        $('.edm-add').on('click', function (e) {
            var content = layuimini.getHrefContent("/edm/add");
            var openWH = layuimini.getOpenWidthHeight();
            var index = layer.open({
                title: '上传EDM资源',
                type: 1,
                shade: 0.2,
                maxmin: true,
                // shadeClose: true,
                area: ['30%', '80%'],
                content: content
                , btn: [ '保存并关闭', '取消']
                , yes: function (index, layero) {
                    var data = form.val("add");
                    // 发送请求
                    $.post('/edm/store', data, function (res) {
                        if (res.code == 1) {
                            layer.msg(res.data);
                            layer.close(index);
                        } else {
                            layer.msg(res.data);
                            return false;
                        }
                    }, 'json');

                }
                , btn2: function (index, layero) {


                },
                btnAlign: 'l'

            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        })


        $('.edm-delete').on('click',function (e) {
            var ids = [];
            var checkStatus = table.checkStatus('demo'); //idTest 即为基础参数 id 对应的值

            checkStatus.data.forEach(function (item,index) {
                ids.push(item.id)
            })
            ids = ids.join(',');
            //发送请求 进行删除
            $.get('/edm/delete?ids='+ids,function (e) {
                layer.msg(e.data)
                //删除当前的数据
                table.reload('demo', {}, 'data');
            },'json')

        })


        form.render();

        function edit(id) {
            var content = layuimini.getHrefContent("/edm/edit?id="+id);
            var openWH = layuimini.getOpenWidthHeight();
            var index = layer.open({
                title: '单张编辑',
                type: 1,
                shade: 0.2,
                maxmin: true,
                // shadeClose: true,
                area: ['30%', '50%'],
                content: content
                , btn: ['保存并关闭', '取消']
                , yes: function (index, layero) {
                    var data = form.val("edm-edit");
                    console.log(data)
                    $.post('/edm/update', data, function (res) {
                        layer.msg(res.data);
                        layer.close(index);

                    }, 'json');
                    return false;
                }
                , btn2: function (index, layero) {


                },
                btnAlign: 'l'

            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        }

        function reloadTreeMenus(){
            $.get('/edm/getAllTreeMenusList',function (e) {
                //开启节点操作图标
                tree.render({
                    elem: '#edm_table_index9'
                    , edit: ['add', 'update', 'del']
                    , data: e.data
                    , click: function (obj) {
                        // 按照分类的ID进行,搜索当前分类下面id下面的数据
                        var searchParams = {
                            edm_menu_id:obj.data.id,
                        };
                        searchParams = JSON.stringify(searchParams);
                        table.reload('demo', {
                            page: {
                                curr: 1
                            }
                            , where: {
                                searchParams: searchParams
                            }
                        }, 'data');
                        // 点击的时候  重载页面  触发搜索
                        // layer.msg(JSON.stringify(obj.data));
                    }
                    , operate: function (obj) {
                        var type = obj.type; //得到操作类型:add、edit、del
                        var data = obj.data; //得到当前节点的数据

                        console.log(data)
                        switch (type) {
                            case 'add':
                                $.post('/edm_menu/store',{name:'未命名',parent_id:data.id},function (e) {
                                    layer.msg(e.msg)
                                },'json')

                                break;
                            case 'update':
                                $.post('/edm_menu/update',{
                                    id:data.id,
                                    name:data.title
                                },function (e) {
                                    layer.msg(e.msg)
                                },'json')

                                break;
                            case 'del':
                                $.get('/edm_menu/delete?ids='+data.id,function (e) {
                                    layer.msg(e.msg)
                                },'json')
                                break;
                        }

                        reloadTreeMenus()

                        return false;

                    }
                });

            },'json')
        }


    });


</script>

Controller


<?php
/**
 * Created by.
 * User: Jim
 * Date: 2020/12/8
 * Time: 10:00
 */

namespace app\admin\controller;


use app\admin\controller\master\Common;
use app\admin\libs\traits\AdminCrud;
use app\admin\model\EdmMenu;
use think\Db;
use think\Exception;
use think\exception\PDOException;

class Edm extends Common
{
    use AdminCrud;



    public function initialize()
    {
        parent::initialize(); // TODO: Change the autogenerated stub
        $this->model = new \app\admin\model\Edm();

    }


    /**
     * 这个是显示在首页的
     */
    public function getAllTreeMenusList()
    {
        $edmMenus = new EdmMenu();
        $data = $edmMenus->getAllTreeMenusList();

        success_json($data);
    }
    /**
     * 信息列表
     */
    public function lists()
    {
        $_where = $this->model->search();
        // 页数
        $lists = $this->model->with(['menus'])->where($_where)->paginate($this->limit);
        _lists($lists);
    }


    public function add()
    {
        $edmMenus = new EdmMenu();
        $menus = $edmMenus->getAllChildTreeMenusList();

        $this->assign(compact('menus'));

        return $this->fetch();

        
    }
    public function edit($id = '')
    {
        $edmMenus = new EdmMenu();
        $menus = $edmMenus->getAllChildTreeMenusList();

        $data = $this->model->with(['menus'])->get($id);


        foreach ($menus as &$row){
            if ($row['id'] == $data['edm_menu_id']){
                $row['selected'] = true;
            }else{
                $row['selected'] = false;
            }
        }

        $this->assign(compact('data','menus'));

        return $this->fetch();


    }
    public function update()
    {
        if ($this->request->isPost()) {

            Db::startTrans();
            try {
                $params = $this->request->param();
                $result = $this->model->allowFIeld(true)->isUpdate(true)->save($params);
                Db::commit();
                $result ? _success('更新成功') : _error('更新失败');
            } catch (PDOException $e) {
                Db::rollback();
                _error($e->getMessage());
            } catch (Exception $e) {
                Db::rollback();
                _error($e->getMessage());
            }

        }

    }



    public function store()
    {
        if ($this->request->isPost()) {
            Db::startTrans();
            try {
                $params = $this->request->post();

                $datas = [];
                foreach ($params['files'] as $file){
                    $datas[] = [
                        'filepath'=>$file,
                        'name'=>$this->model->getFileName($file),
                    ];

                }

                $result = $this->model->allowFIeld(true)->saveAll($datas);
                Db::commit();
                $result ? _success('添加成功') : _error('添加失败');


            } catch (PDOException $e) {
                Db::rollback();
                _error($e->getMessage());
            } catch (Exception $e) {
                Db::rollback();
                _error($e->getMessage());
            }

        }

    }





}

Model

<?php
/**
 * Created by.
 * User: Jim
 * Date: 2020/10/30
 * Time: 9:09
 */

namespace app\admin\model;


use think\Db;
use think\facade\Request;

class Edm extends Base
{
    protected $name = 'edm_email';


    protected $append = [
        'filepath_formal',
        'filepath_type_formal',
        'admin_name_formal',
    ];

    protected static function init()
    {
        self::beforeInsert(function ($user) {
            $user->admin_id = session('admin_id');
            $user->edm_menu_id = $user->edm_menu_id ??1;
        });


        self::afterInsert(function ($user) {
            $user->admin_id = session('admin_id');
            $user->save();
        });

        self::beforeUpdate(function ($user) {
            $user->admin_id = session('admin_id');
        });

    }

    public function getAdminNameFormalAttr($value, $data)
    {
        $value = $value ?? $data['admin_id'] ?? '';
        if ($value == '') return '';
        $data = Db::name('admin')->where(['id'=>$value])->value('username');

        return $data;
    }
    public function getFilepathFormalAttr($value, $data)
    {
        $value = $value ?? $data['filepath'] ?? '';
        if ($value == '') return '';
        return config('app.kk_images_domain') . $value;
    }

    public function getFilepathTypeFormalAttr($value, $data)
    {
        // 判断是否为图片类型

        $value = $value ?? $data['filepath'] ?? '';
        if ($value == '') return false;

        $imaInfo = explode('.', $value);
        $prefix = array_pop($imaInfo);
        if (in_array($prefix, ['jpg', 'jpeg', 'gif', 'bmp', 'png'])) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 搜索
     * @return array
     */
    public function search()
    {
        $params = Request::get();
        if (!isset($params['searchParams'])) return [];

        $searchParams = json_decode($params['searchParams'], true);

        $where = [];
        // 获取当前id下面的子id
        if (isset($searchParams['edm_menu_id'])) {
            if ($searchParams['edm_menu_id'] ==1) return []; // 1 所有文件
            $datas = EdmMenu::getParentAllChildId($searchParams['edm_menu_id']);
            return ['edm_menu_id' => $datas];
        }

        unset($searchParams['parent_id']);

        foreach ($searchParams as $field => $value) {
            $value = trim($value);
            if ($value == '') continue;
            $where[] = [$field, 'like', "%{$value}%"];
        }
        return $where;
    }

    /**
     * 获取文件名称
     * @param $file
     * @return mixed
     */
    public function getFileName($file)
    {
        // 进行分割,然后返回文件名
        $infos = explode('/',$file);

        return array_pop($infos);

    }


    public function menus()
    {
        return $this->hasOne(EdmMenu::class, 'id', 'edm_menu_id');

    }

}



Model EdmMenu


<?php
/**
 * Created by.
 * User: Jim
 * Date: 2020/10/30
 * Time: 9:09
 */

namespace app\admin\model;


use think\Db;
use think\facade\Request;

class EdmMenu extends Base
{
    protected $name = 'edm_menu';

    static $treeList = [];


    /**
     * 获取所有的分类,并与树形显示
     */
    public function getAllChildTreeMenusList()
    {
        $datas = self::select()->toArray();
        $datas = self::columnTree($datas);

        foreach ($datas as &$row) {
            $row['name'] = str_repeat("|----&nbsp;", $row['count']) . $row['name'];
        }
        return $datas;
    }

    /**
     * 获取所有的分类,并与树形显示
     */
    public function getAllTreeMenusList()
    {
        $data = self::select()->toArray();
        return self::_generateTree($data);

    }


    /**
     * 获取当前id下面所有的子分类
     * @param $id
     */
    public static function getParentAllChildId($id)
    {
        $lists[] = $id;
        $data = self::select()->toArray();
        $datas = self::columnTree($data,$id);

        foreach ($datas as $row){
            $lists[] = $row['id'];
        }
        return $lists;
    }

    /**
     * 获取树形结构的edm分类列表
     * @param $data
     * @param int $pid
     * @return array
     */
    private static function _generateTree($data, $pid = 0)
    {
        $tree = [];
        if ($data && is_array($data)) {
            foreach ($data as $v) {
                if ($v['parent_id'] == $pid) {
                    $tree[] = [
                        'id' => $v['id'],
                        'title' => $v['name'],
                        'parent_id' => $v['parent_id'],
                        'children' => self::_generateTree($data, $v['id']),
                        'spread' => true,
                    ];
                }
            }
        }
        return $tree;
    }

    private static function columnTree(&$data, $pid = 0, $count = 1)
    {
        foreach ($data as $key => $value) {
            if ($value['parent_id'] == $pid) {
                $value['count'] = $count;
                self::$treeList [] = $value;
                unset($data[$key]);
                self::columnTree($data, $value['id'], $count + 1);
            }
        }
        return self::$treeList;
    }





}

Controller EdmMenu

<?php
/**
 * Created by.
 * User: Jim
 * Date: 2020/12/8
 * Time: 10:00
 */

namespace app\admin\controller;


use app\admin\controller\master\Common;
use app\admin\libs\traits\AdminCrud;
use think\Db;
use think\Exception;
use think\exception\PDOException;

class EdmMenu extends Common
{
    use AdminCrud;



    public function initialize()
    {
        parent::initialize(); // TODO: Change the autogenerated stub
        $this->model = new \app\admin\model\EdmMenu();

    }


    public function store()
    {
        if ($this->request->isPost()) {
            Db::startTrans();
            try {
                $params = $this->request->param();
                $result = $this->model->allowFIeld(true)->save($params);
                Db::commit();
                $result ? _success([],1,'添加成功') : _error('添加失败');

            } catch (PDOException $e) {
                Db::rollback();
                _error($e->getMessage());
            } catch (Exception $e) {
                Db::rollback();
                _error($e->getMessage());
            }

        }

    }



    public function update()
    {
        if ($this->request->isPost()) {

            Db::startTrans();
            try {
                $params = $this->request->param();
                $result = $this->model->allowFIeld(true)->isUpdate(true)->save($params);
                Db::commit();
                $result ? _success([],1,'更新成功') : _error('更新失败');
            } catch (PDOException $e) {
                Db::rollback();
                _error($e->getMessage());
            } catch (Exception $e) {
                Db::rollback();
                _error($e->getMessage());
            }

        }

    }



    /**
     * 可能存在问题
     * @param null $ids 17 / 12,1,2,11
     */
    public function delete($ids = null)
    {
        Db::startTrans();
        try {
            if ($ids == null) _error('ID不能为空');
            if ($ids == 1) _error('删除失败,当前目录禁止删除');

            $datas = $this->model->getParentAllChildId($ids);
            $result = $this->model->destroy($datas);
            Db::commit();
            $result ? _success([],1,'删除成功') : _error('删除失败');
        } catch (PDOException $e) {
            Db::rollback();
            _error($e->getMessage());
        } catch (Exception $e) {
            Db::rollback();
            _error($e->getMessage());
        }

    }



}

效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值