js tree树

源代码下载地址：https://download.csdn.net/download/heqinghua217/10621217

类似easyui的 combotree,

但是功能没有它的强大，

combotree有一个缺点，超过1000个节点全部，你勾选保存速度还好，

但是如果修改，那么在全部张开所有节点之后，再调用setValues方法赋值，能吧浏览器弄崩溃，所以才自己写了一个。

后台封装json的方法

首先顶一个实体类

package com.huating.uimp.model;

import java.util.List;

public class TreeData {
	 private String id;

	 private String pID;

	 private String text;
	 
	 private List<TreeData> menulist;
	 
	 private String check;//1表示选中，0表示不选中
	 
	
	 public String getCheck() {
		return check;
	}

	public void setCheck(String check) {
		this.check = check;
	}

	public List<TreeData> getMenulist() {
		return menulist;
	}

	public void setMenulist(List<TreeData> menulist) {
		this.menulist = menulist;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getpID() {
		return pID;
	}

	public void setpID(String pID) {
		this.pID = pID;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	
	 
	 


}

之后查询出数据后，用递归方法封装json

/**
	 * @desc 初始化树
	 * 
	 * */
	public void initTree() {
		Object obj = getRequest().getParameter("idsStr");
		String ids = "";
		if(obj != null) {
			ids = obj.toString() + ",";
		}
		
		Map<String, List<FCPAllContent>> ca = allcontentService.cacheData();
		List<FCPAllContent> list = ca.get("0");
		TreeData treeData = null;
		if(list != null) {
			FCPAllContent f = list.get(0);
			treeData = new TreeData();
			treeData.setId(String.valueOf(f.getConUnid()));
			treeData.setpID(String.valueOf(f.getConParentUnid()));
			treeData.setText(f.getConText());
			treeData.setCheck("1");
		}
		
		treeData = dg("0", ca, treeData, ids);
		System.out.println(getJSON(treeData));
		ResponseJson(getJSON(treeData));
		
		/*if(obj == null)
			obj = "";
		Gson g = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();   
		return g.toJson(obj);*/
	}
	
	/**
	 * 递归拼接json数据
	 * 
	 * */
	public TreeData dg(String key, Map<String, List<FCPAllContent>> ca, TreeData parentTree, String ids) {
		List<FCPAllContent> list = ca.get(key);
		if(list != null) {
			for (FCPAllContent f : list) {
				TreeData treeData = new TreeData();
				treeData.setId(String.valueOf(f.getConUnid()));
				treeData.setpID(String.valueOf(f.getConParentUnid()));
				treeData.setText(f.getConText());
				//id是否是已经共有的，如果已经有了，就设置为选中状态
				if(ids.indexOf(String.valueOf(f.getConUnid())+",") != -1){
					treeData.setCheck("1");
				}else {
					treeData.setCheck("0");
				}
				if(parentTree.getMenulist() == null) {
					List<TreeData> treeList = new ArrayList<TreeData>();
					parentTree.setMenulist(treeList);
				}
				parentTree.getMenulist().add(treeData);
				dg(treeData.getId(), ca, treeData, ids);
			}
		}
		return parentTree;
	}
	

前端js调用代码

	/************************针对树的操作******************************/
	$.ajax({
					url:'f_all_content!initTree.action',
					type:'post',
					dataType:'json',
					data: {'idsStr':rows[0].allcontentUnid},
					success:function(data){
						$(".ul-con").html("");
						var showlist = $("<ul class='parent'></ul>");
					    showall(data.menulist, showlist);
					    $(".ul-con").append(showlist);
					    initTree();
					    
					    //只能这么赋值选中或者不选中，不能在html代码中一进来就写死样式
					    var arr = rows[0].allcontentUnid.split(",");
					    for ( var i = 0; i < arr.length; i++) {
							$("#"+arr[i]).attr("class","toggle1 checked");
						}
					    
					}
				});
  	function initTree(){
  	//点击收缩
        $(".toggle").click(function(){
			if($(this).hasClass("down")){
				$(this).removeClass("down").addClass("up");
				$(this).next().next("a").find("img").attr({"src":"<%=basePath%>public/tree-demo/images/p_icon.png"});
				$(this).next().next().next("ul").hide();
			}else {
				$(this).addClass("down").removeClass("up");				
				$(this).next().next("a").find("img").attr({"src":"<%=basePath%>public/tree-demo/images/c_icon.png"});
				$(this).next().next().next("ul").show();
			}
		});

        //点击span标签选中
		$("span.toggle1").click(function(){
			if($(this).hasClass("unchecked")){
				$(this).attr({"class":"toggle1 checked"});
				$(this).next().next("ul").find("span.unchecked").attr({"class":"toggle1 checked"});
			}else {
				$(this).attr({"class":"toggle1 unchecked"});
				$(this).next().next("ul").find("span.checked").attr({"class":"toggle1 unchecked"});
			}

			//var $this = $(this);
			//checked($this);
		});
	}
	
  	function checked(item){
		var liCon = item.parent("li");
		liCon.each(function(){
			var liLen = $(this).parent("ul.parent").find("li").length;
			var checked = $(this).parent("ul.parent").find("li").find("span.checked").length;
			if(liLen == checked && $(this).find("ul").length == 0) {
				$(this).parent("ul.parent").prev().prev("span.toggle1").attr("class","toggle1 checked");
			}else {
				$(this).parents("ul.parent").prev().prev("span.toggle1").attr("class","toggle1 unchecked");
			}
		});
	}
	
	 //menu_list为json数据
	 //parent为要组合成html的容器
	 function showall(menu_list, parent) {
	     for (var menu in menu_list) {
	         //如果有子节点，则遍历该子节点
	         if (menu_list[menu].menulist != null && menu_list[menu].menulist != "undefined" && menu_list[menu].menulist.length > 0) {
	             //创建一个子节点li
	             var li = $("<li></li>");
	             //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
	             if(menu_list[menu].check == "1") {
	            	 var aText = "<span class='toggle up'></span><span id='"+menu_list[menu].id+"' class='toggle1 unchecked'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon.png' />"+menu_list[menu].text+"</a>";
	             } else {
	            	 var aText = "<span class='toggle up'></span><span id='"+menu_list[menu].id+"' class='toggle1 unchecked'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon.png' />"+menu_list[menu].text+"</a>";
	             }
	            
	             $(li).append(aText).append("<ul class='parent hide'></ul>").appendTo(parent);
	             //将空白的ul作为下一个递归遍历的父亲节点传入
	             showall(menu_list[menu].menulist, $(li).children().eq(3));
	         }
	         //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
	         else {
	        	if(menu_list[menu].text != null && menu_list[menu].text != "undefined"){
	        		
	        		 if(menu_list[menu].check == "1") {
	 	        		var aText1 = "<span id='"+menu_list[menu].id+"' class='toggle1 unchecked' style='margin-left: 10px;'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon1.png' />"+menu_list[menu].text+"</a>";
		             } else {
			        	var aText1 = "<span id='"+menu_list[menu].id+"' class='toggle1 unchecked' style='margin-left: 10px;'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon1.png' />"+menu_list[menu].text+"</a>";
		             }
	        		
		            $("<li></li>").append(aText1).appendTo(parent);
	        	}
	         }
	     }
	 }

html的代码就很简单了：

<div class="main" id="updateTree" >
                                <div class="ul-con"></div>
</div>

==========

=======================================注意点=========================================

这里最需要注意的是，选中和不选中，刚开始想的是，后台直接查询出数据，设置checked属性，然后前台直接设置span标签的样式，是否为checked即可，但是这招试了无数遍，不可行。只能在所以标签初始化之后，再用js，动态设置span的选中样式。