thinkphp6.0 layui3.2 加载树型表格 treeTable

Test、

已于 2022-03-19 17:30:17 修改

阅读量1.2k

点赞数

文章标签： PHP layui

于 2022-03-19 17:27:04 首次发布

本文链接：https://blog.csdn.net/weixin_42280053/article/details/123598616

版权

在这里插入图片描述

html

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>Category-list</title>
    {include file="common/headerStyle" /}
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <div class="demoTable">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="UserName" id="demoReload" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block" id="demoTable">
                                <button class="layui-btn" id="search" data-type="reload" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </div>
                    </div>



                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-hide" id="menu" lay-filter="menu"></table>
                    </div>

                    <script type="text/html" id="switchTpl">
                        <!-- 这里的 checked 的状态只是演示 -->
                        <input id="checkShow" type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用"{{ d.state == "1" ? "checked" : "" }} lay-filter="ShowDemo">
                    </script>

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



</body>

<script type="text/html" id="toolbarDemo">
    <div class = "layui-btn-container" >

        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
        <button class="layui-btn" id="OpenMenuAdd" >
            <i class="layui-icon"></i>添加</button>
        <button class="layui-btn" onclick="javascript:location.replace(location.href);"><i class="iconfont">&#xe6aa;</i>&nbsp;刷新</button>

    </div >
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn   layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
</script>

<script>


    layui.config({
        //   base: '/js/'存放treeTable.js的文件夹
        base: '{__PUBLIC__}/layui/'
    }).use(['layer', 'util', 'treeTable'], function () {
        //var table = layui.table
        //, form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable, form = layui.form;

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#menu',
            url: '{:url("Category/getCategoryList")}',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            height: 'full-200',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'id',//父ID
                pidName: 'pid',//子ID
                openName: 'open',// 是否默认展开的字段名
                //public bool open { get; set; }open字段是bool类型
            },
            defaultToolbar: ['filter', 'print', 'exports']
            ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{ field:'id',title: 'ID' , width:60, sort: true}
            , { field:'name',    title: '职位分类名称'   }
            , { field:'state', templet: '#switchTpl', title: '状态' }
                ,{ field: '', title: '操作', toolbar: '#barDemo'  }

        ]]
            ,style: 'margin-top:0;'
        });

        //监听状态操作
        form.on('switch(ShowDemo)', function (data) {
            var swithcData = data;
            var id = data.value;// 获取要修改的ID
            var IsShow = this.checked ? '启用' : '停用';// 当前状态值
            $.ajax({
                type: 'post',
                url: '/api/menuApi/postUpdMenu',
                data: {
                    "id": id,
                    "IsShow": IsShow
                },
                error: function (data) {
                    console.log(data);
                    layer.msg('数据异常，操作失败！');
                },
                // 修改失败，请填写对应的参数
                success: function (data) {
                    layer.alert("操作成功", {
                        icon: 6
                    });
                    //window.location.reload();
                }
            });
        });

        //监听行工具事件
        treeTable.on('tool(menu)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //var id = data['id'];
                    var param = { id: data['id'] };
                    $.ajax({
                        type: 'post',
                        url: '/api/menuApi/postDeleMenu',
                        async: false,
                        data: param,
                        success: function (data) {
                        }
                    })
                    layer.msg('已删除数据!', { icon: 1, time: 1000 });
                    setTimeout('window.location.reload()', 1000);
                    //alert(id);
                });
            } else if (obj.event === 'edit') {
                //xadmin.open('修改用户', '/User/UserUpd?id=' + data['id'], 600, 400);//flag=edit&id=
                layer.open({
                    type: 2,
                    title: "修改菜单",
                    shadeClose: true,
                    shade: 0.5,
                    area: ['600px', '600px'],
                    content: ['/menu/menuOper?flag=edit&id=' + data['id'], 'no'],
                    //end: function () { location.reload(); }
                })
            }
        });

        // 搜索
        $('#search').click(function () {
            var keywords = $('#demoReload').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
            return false;
        });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        $("#OpenMenuAdd").click(function () {
            //alert(1);
            //var url = "{:url('/menu/menuAdd')}";
            layer.open({
                type: 2,
                title: "添加菜单",
                shadeClose: true,
                shade: 0.5,
                area: ['600px', '600px'],
                content: ['/menu/menuOper?flag=add', 'no'],
                //end: function () { location.reload(); }
            })
        })
    });

</script>


</html>

PHP model

<?php
/**
 * @file  Category
 * =======================================
 * @author  lei
 * @date  2022/3/18 21:18
 * @version  1.1
 *
 */

namespace app\model;


use think\Model;

class Category extends Model
{
    protected $schema = [
        'id'          => 'int',
        'pid'        => 'int',  //父级id   0：最高级
        'name'      => 'string',
        'path' => 'string',   //路径 可能用不到
        'state'       => 'int', //1开启  0关闭
    ];
    //新增前
    public static function onBeforeInsert($model)
    {
        $model->state = 1;//1正常
    }

    /**
     * 获取 树型 数组数据
     * @return array
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */
    public function getCategoryAll(){
        $all=$this->where('state','=','1')->select();
        $res=$this->getTree($all,0);
        return $res;
    }

    /**
     * 递归 构建树
     * @param $data
     * @param $pId
     * @return array
     */
    function  getTree($data, $pId ){
        $tree  =  array() ;
        foreach ( $data  as  $v )
        {
            if ( $v ['pid'] ==  $pId )
            {  //父亲找到儿子
                $v ['child'] = $this->getTree( $data,$v['id']);
                array_push($tree,$v);
            }
        }
        return  $tree ;
    }


}

php controller

<?php
/**
 * @file  Category
 * =======================================
 * @author  lei
 * @date  2022/3/18 21:43
 * @version  1.1
 *
 */

namespace app\admin\controller;

use app\model\Category as CategoryModel;
use think\facade\View;

class Category extends Base
{


    public function categoryList(){
        return View::fetch();
    }
    public function getCategoryList(){
        $model = new CategoryModel();
        $res=$model->where('state','=','1')->select();
        $count = $model->where('state','=','1')->count('id');
        $jsonData['code']=0;
        $jsonData['length']=$count;
        $jsonData['data']=$res;
        return json($jsonData);
    }

}