zTree看别人的代码理解

<div>
          <ul id="permissionTree" class="ztree"></ul>
</div>
<script src="${APP_PATH}/ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        $(function () {

		    var setting = {
	    		async: {//异步获取数据用的
	    			enable: true,
	    			url:"${APP_PATH}/permission/loadData",
	    			autoParam:["id", "name=n", "level=lv"]
	    		},
				view: {  //就是当鼠标放在一个菜单条目上的显示
					//tId、level都是zTree自动生成的,
					//当前所在的目录上,treeId对 应 zTree 的 treeId,便于用户操控      treeNode需要显示自定义控件的节点 JSON 数据对象
					selectedMulti: false,
					//添加自定义的图标控件
					addDiyDom: function(treeId, treeNode){
						var icoObj = $("#" + treeNode.tId + "_ico"); //tId = permissionTree_1, $("#permissionTree_1_ico")
                                                        //tId是zTree自动生成的,当前节点的图标,有图标是图标,没图标就是文件夹图标
						if ( treeNode.icon ) {//json对象里面有没有icon,数据库里面增加对应的图标样式就可以应用过来
							//把数据库中的样式增加到图标 
							icoObj.removeClass("button ico_docu ico_open").addClass(treeNode.icon).css("background","");
						}
                        
					},
					//用于当鼠标移动到节点上时,做用户自定义控件
				addHoverDom: function(treeId, treeNode){  //添加自定义的控件功能   
                                                  //   <a><span></span></a>
						var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")         treeNode节点的唯一标识 tId。
						aObj.attr("href", "javascript:;");
						if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
						var s = '<span id="btnGroup'+treeNode.tId+'">';
						if ( treeNode.level == 0 ) {//根节点
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode('+treeNode.id+')" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						} else if ( treeNode.level == 1 ) {//第一层,
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode('+treeNode.id+')" href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							if (treeNode.children.length == 0) {//叶子节点(多一个删除功能)
								s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteNode('+treeNode.id+')" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
							}
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode('+treeNode.id+')" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						} else if ( treeNode.level == 2 ) {//第二层为叶子节点,直接删除和编辑功能两个
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode('+treeNode.id+')" href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteNode('+treeNode.id+')" href="#">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
						}
		
						s += '</span>';
						aObj.after(s);
					},
				removeHoverDom: function(treeId, treeNode){//鼠标不在节点上时候,隐藏节点的自定义控件,如增加,修改,删除等控件功能
						$("#btnGroup"+treeNode.tId).remove();
					}
				}
		    };
		    // 异步获取树形结构数据
		    $.fn.zTree.init($("#permissionTree"), setting);
        });
        
        function addNode(id) {
        	window.location.href = "${APP_PATH}/permission/add?id="+id;//传入当前节点
        }
        
        function editNode(id) {
        	window.location.href = "${APP_PATH}/permission/edit?id="+id;
        }
        
        function deleteNode(id) {
			layer.confirm("删除许可信息, 是否继续",  {icon: 3, title:'提示'}, function(cindex){
				// 删除选择的用户信息
				$.ajax({
					type : "POST",
					url  : "${APP_PATH}/permission/delete",
					data : {
						id : id
					},
					success : function(result) {
						if ( result.success ) {
							// 刷新数据
							var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
							treeObj.reAsyncChildNodes(null, "refresh");
						} else {
                            layer.msg("许可信息删除失败", {time:2000, icon:5, shift:6}, function(){
                            	
                            });
						}
					}
				});
				
				layer.close(cindex);
			}, function(cindex){
			    layer.close(cindex);
			});
        }
    </script>
posted @ 2020-06-04 17:08  堕落先锋  阅读(95)  评论(0编辑  收藏  举报