javascript从数据库获取数据后，生成EasyUI树

最新推荐文章于 2018-01-23 16:41:00 发布

恐龍

最新推荐文章于 2018-01-23 16:41:00 发布

阅读量6.2k

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/l30961171/article/details/25119305

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

不用管是什么数据库，php还是java语言

只要数据库表字段是有自身指向的结构的都行。

废话少说，直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyOA</title>
<link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/material-teal/easyui.css">
<link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/icon.css">
</head>
<body>
<ul id="tt" class="easyui-tree" data-options="data:menuData"></ul>
</body>
<script type="text/javascript" src="http://jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function makeEasyTree(data){
	if(!data)
		return [];
	var _newData = []; //最终返回结果
	var _treeArray = {}; //记录一级节点
	var _root = 1; //最顶层fid
	var _idKey = "id"; //主键的键名
	var _fidKey = "fid"; //父ID的键名
	_getChildren(_root);
	function _getChildren($root){
		var $children = [];
		for (var i in data){
			if($root == data[i][_fidKey]){
				data[i]["children"] = _getChildren(data[i][_idKey]);
				$children.push(data[i]);
			}
			//只要一级节点
			if(_root == data[i][_fidKey] && !_treeArray[data[i][_idKey]]){
				_treeArray[data[i][_idKey]] = data[i];
				_newData.push(data[i]);
			}
		}
		return $children;
	}
	return _newData;
}
 
var menuData =  [
{"id":"2","fid":"1","text":"系统设置","nodeUrl":"Admin"},
{"id":"5","fid":"1","text":"笔记本","nodeUrl":"Admin"},
{"id":"3","fid":"2","text":"系统角色管理","nodeUrl":"Admin&m=Sys&a=manageRole"},
{"id":"4","fid":"2","text":"系统菜单管理","nodeUrl":"Admin&m=Sys&a=manageNode"},
{"id":"8","fid":"2","text":"用户管理","nodeUrl":"Admin&m=Sys&a=manageUser"},
{"id":"6","fid":"5","text":"笔记列表","nodeUrl":"Admin&m=LjbNote"},
{"id":"7","fid":"5","text":"添加笔记","nodeUrl":"Admin&m=LjbNote&a=saveNote"},
{"id":"9","fid":"7","text":"管理分类","nodeUrl":"Admin&m=LjbNote&a=manageType"},
{"id":"10","fid":"9","text":"test","nodeUrl":""}];
menuData = makeEasyTree(menuData);
</script>
</html>