easyui-tree

最新推荐文章于 2020-06-21 23:43:37 发布

丸子的博客

最新推荐文章于 2020-06-21 23:43:37 发布

阅读量282

点赞数

分类专栏：前端 easyui 文章标签： easyui

本文链接：https://blog.csdn.net/cl_fjx_cs/article/details/53317224

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

easyui

2 篇文章 0 订阅

订阅专栏

关于使用easyui的树，整理一下

js代码，使用的是1.5easyui

var relateAnaly = {};
// 初始化树
relateAnaly.initTree = function(modelId) {
	relateAnaly.modelId=modelId;
	$('#relateAnalyTree').tree({
	    url:"relateAnaly/queryListByModelIdAndTreeId?modelId="+modelId,
	    lines:true,
		animate:true,
		onBeforeExpand:function(node,param){  
            $('#relateAnalyTree').tree('options').url = "relateAnaly/queryListByModelIdAndTreeId?modelId="+modelId+"&treeId="+node.id;
        },    
	    formatter:function(node){
	    	node.text=node.name;
	    	if(node.searched){
				return  "<span style='color:red'>"+node.text+"</span>";
	    	}
			return node.text;
		},
		onContextMenu : function(e, row) {
			$("#relateAnalyTree").tree("select",row.target);
			$('#ctree_menu').menu('show', {
 				left : e.pageX,
 				top : e.pageY
 			});
	    	if( $("#relateAnalyTree").tree("getSelected")!=null){
	    		e.preventDefault(); // 屏蔽浏览器的菜单
	    	}
		},
		onClick: function(node){
			relateAnaly.id=node.id;
			relateAnalyRes.queryPagingRes(1);
		}
	});
}

html代码

<ul id='relateAnalyTree'></ul>
<!--右侧菜单-->
<div id="ctree_menu" class="easyui-menu">
	<div οnclick='relateAnaly.flush()'>刷新</div>
	<div>
		<span>新增节点</span>
		<div>
			<div οnclick="relateAnaly.insertTree(4)">新增子节点</div>
			<div οnclick="relateAnaly.insertTree(5)">批量新增子节点</div>
			<div οnclick="relateAnaly.insertTree(2)">新增前一节点</div>
			<div οnclick="relateAnaly.insertTree(3)">新增后一节点</div>
		</div>
	</div>
	<div οnclick="relateAnaly.updateTree()">编辑节点属性</div>
	<div>
		<span>删除节点</span>
		<div>
			<div οnclick="relateAnaly.deleteTree(2)">删除当前节点</div>
			<div οnclick="relateAnaly.deleteTree(1)">删除子节点</div>
		</div>
	</div>
	<div>
		<span>移动节点</span>
		<div>
			<div οnclick="relateAnaly.moveTree(1)">向上移动</div>
			<div οnclick="relateAnaly.moveTree(2)">向下移动</div>
			<div οnclick="relateAnaly.moveTree(3)">节点迁移</div>
		</div>
	</div>
</div>

至于返回格式可以到网上找找，自己的信息和它必须的字段就行了

[{"id":5,"idPath":"1","name":"R1","level":1,"sort":1,"parentId":4,"topTreeId":1,"type":6,"editFlg":1,"note":"test","ctime":1479784542000,"utime":null,"modelId":null,"synFlg":null,"synResExp":null,"splitFlg":null,"splitSymbol":null,"state":"closed","searched":null,"children":null},{"id":6,"idPath":"1","name":"R2","level":1,"sort":2,"parentId":4,"topTreeId":1,"type":6,"editFlg":1,"note":"test","ctime":1479784645000,"utime":null,"modelId":null,"synFlg":null,"synResExp":null,"splitFlg":null,"splitSymbol":null,"state":null,"searched":null,"children":null}]