1、easyui + zTree +ThinkPHP6 修改zTree默认显示name字段
2、ThinkPHP6后台代码
//获取菜单json
public function menu(){
$data = Db::name('auth_rule')->where('menu_id','0')->select();
return json_encode($data);
}打印的json内容：
[
{
"id": 0,
"name": "index",
"title": "系统管理",
"status": 1,
"condition": "",
"type": 1,
"create_time": null,
"update_time": null,
"class": null,
"icon": "/static/zTree_v3/css/zTreeStyle/img/diy/1_open.png",
"menu_id": "0"
},
{
"id": 1,
"name": "menu/index",
"title": "菜单-列表",
"status": 1,
"condition": "",
"type": 1,
"create_time": 1583675725,
"update_time": 1583999174,
"class": "menu",
"icon": "/static/zTree_v3/css/zTreeStyle/img/diy/5.png",
"menu_id": "0"
},
{
"id": 6,
"name": "admin/index",
"title": "管理员-列表",
"status": 1,
"condition": "",
"type": 1,
"create_time": 1583989284,
"update_time": 1583989284,
"class": "admin",
"icon": "/static/zTree_v3/css/zTreeStyle/img/diy/5.png",
"menu_id": "0"
},
{
"id": 11,
"name": "authgroup/index",
"title": "管理组-列表",
"status": 1,
"condition": "",
"type": 1,
"create_time": 1583989284,
"update_time": 1583989284,
"class": "authgroup",
"icon": "/static/zTree_v3/css/zTreeStyle/img/diy/5.png",
"menu_id": "0"
},
{
"id": 16,
"name": "authrule/index",
"title": "权限规则-列表",
"status": 1,
"condition": "",
"type": 1,
"create_time": 1583989284,
"update_time": 1583989284,
"class": "authrule",
"icon": "/static/zTree_v3/css/zTreeStyle/img/diy/5.png",
"menu_id": "0"
}
]引入easyui、zTree相关js、css
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/static/layui/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" href="/static/easyui/themes/color.css">
<link rel="stylesheet" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui/extend/extJquery.js"></script>
<!--<script type="text/javascript" src="/static/easyui/extend/extEasyui.js"></script>-->
<script type="text/javascript" src="/static/easyui/extend/datagrid.extend.js"></script>
<link rel="stylesheet" href="/static/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.exedit.js"></script>
3、主页布局
{include file="/public/header"}
<html lang="en">
<head>
<title>后台管理</title>
<script type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
showIcon: true,
showLine: true,
showTitle: true
},
data: {
key: {
isParent: "isParent",
children: "children",
name: "title", //设置数据表返回json中的title字段，默认是zTree指定的name字段
title: "",
icon: "icon"
},
render: {
name: null,
title: null,
},
simpleData: {
enable: true,
idKey: "id", //主键id字段
pIdKey: "menu_id", //父级菜单menu_id字段
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
// iframe.attr("src", treeNode.name);
addTab(treeNode.title, treeNode.name, treeNode.icon);
console.info(treeNode.icon+" "+treeNode.name );
return true;
}
},
onclick:Onclick
}
};
//单击父节点展开折叠
function Onclick(e,treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.expandNode(treeNode);
}
var zNodes =[];
$(document).ready(function(){
doTree();
});
-->
//从数据表读取json
function doTree() {
$.ajax({
url:"{:url('/admin/index/menu')}",
type:"post",
dataType:"json",
success:function (data) {
// console.info(dataJson);
// console.info(data);
var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
// var json1 = jQuery.parseJSON(data);
var json = JSON.parse(data);
zNodes=json;
$.fn.zTree.init($("#tree"), setting, zNodes);
// $.each(json ,function (key,value) {
// console.info(value.name +' , '+value.title);
// });
}
});
}
function addTab(title, href,icon){
var tt = $('#tabs');
var content = '<iframe id="iframe" name="iframe" scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>';
tt.tabs('add',{
title:title,
closable:true,
content:content,
iconCls:icon ?'icon-cut' :''
});
}
</script>
</head>
<body>
<div id="index_window" class="easyui-window" style="padding:5px;" title="后台管理" iconCls="icon-ok" fit="true" minimizable="false"
draggable="false" modal="true" resizable="true" collapsible="true" data-options=" ">
<div class="easyui-layout" fit="true">
<div region="west" split="true" title="导航功能" style="width:180px;" iconCls="icon-ok">
<ul id="tree" class="ztree"></ul>
</div>
<div id="content" region="center" style="padding:5px;" iconCls="icon-ok">
<div id="tabs" class="easyui-tabs" ></div>
</div>
</div>
</div>
</body>
</html>4、运行