代码编织梦想

在这里插入图片描述

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);
    }

}

treeTable.js

第三方treeTable.js文件, 自己去下载(百度)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42280053/article/details/123598616

Thinkphp+layui数据表格-爱代码爱编程

利用layui数据表格实现异步获取数据 首先看一下效果:   前端的话可以参考layui官方文档:https://www.layui.com/doc/modules/code.html 下面代码中已经包含数据分页、数据操作等。必须将后台数据转化为json数据才能被layui表格接受。 以下是我的代码 html: <table i

ThinkPHP6.0 多应用模式 部署 Layuiadmin 单页版-爱代码爱编程

QQ:23426945 PHP技术群: 159789818 个人技术博客:https://www.itqaq.com TP6.0中的路由省略应用名只能用入口文件绑定应用 和 域名绑定应用,经过测试,最后得出域名绑定应用是最合适的部署方式。如果有更好的部署方案,欢迎分享。QQ:23426945 1. 下载TP6.0,引入多应用模式扩展 com

基于ThinkPHP6.0 +Layui 开发的一套后台管理框架-爱代码爱编程

RXThinkCMF_TP6_PRO旗舰版 基于 ThinkPHP6 +Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、布局管理、广告管理、配置管理、字典管理、切图管理、CMS内容管理等常用功能模块,以方

一款基于ThinkPHP6.0和Layui的开发的后台管理系统-爱代码爱编程

RXThinkCMF_TP6_PRO旗舰版 基于 ThinkPHP6 +Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、布局管理、广告管理、配置管理、字典管理、切图管理、CMS内容管理等常用功能模块,以方

一款基于ThinkPHP6.0和Layui的后台开发框架-爱代码爱编程

RXThinkCMF_TP6_PRO旗舰版 基于 ThinkPHP6 +Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、布局管理、广告管理、配置管理、字典管理、切图管理、CMS内容管理等常用功能模块,以方

Layui+thinkPHP6.0文件上传-爱代码爱编程

1、写在前面 Layui文件上传逻辑:异步上传(点击按钮就将文件上传到服务器,然后再返回线上图片地址,等提交表单提交时 ,将其它表单信息和图片的线上地址一起提交 )先给我自己的代码2、Layui前端代码说明 <form class="layui-form"> <div class="layui-form-item">

layui表头和内容不能对齐问题处理-爱代码爱编程

网上查询“layui表头和内容不能对齐”问题搜到的竟然都是说多了个逗号的问题,并且都是互相抄袭,甚至还有人说是多了两个逗号,真是好奇葩, 一般会有以下情况造成无法对齐(自己总结的可能不全) 1、表格内容不多的情况 当内容不多的时候或者表格列比较少的时候,layui默认的最大单元格宽度是400px,这时候就会出现无法对齐的情况。此时只需要去掉最大宽度限

thinkphp+layui系统开发笔记(一)——数据表格-爱代码爱编程

一、参考资料: 1.thinkphp: https://www.kancloud.cn/special/thinkphp5_quickstart 2.layui: http://www.layui.com/doc/modules/table.html 二、代码: 主体html <table id="demo" lay-filter="tes