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"></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"></i>展开全部
</button>
<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></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"></i> 刷新</button>
</div >
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">
<i class="layui-icon"></i>编辑
</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
<i class="layui-icon"></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文件, 自己去下载(百度)