jQuery插件TreeView异步加载树

最新推荐文章于 2018-10-15 02:45:09 发布

阿_布

最新推荐文章于 2018-10-15 02:45:09 发布

阅读量343

点赞数

分类专栏： jQuery 文章标签： jQuery CSS JavaScript json JSP ViewUI

本文链接：https://blog.youkuaiyun.com/zhoupuyue/article/details/83737776

版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

前端jsp页面：

    <link rel="stylesheet" href="jquery.treeview.css" type="text/css"></link>
    <link rel="stylesheet" href="screen.css" type="text/css"></link>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript" src="jquery.treeview.js"></script>
    <script type="text/javascript" src="jquery.treeview.async.js"></script>
    <style type="text/css">
    a{
    	text-decoration:none;
    	color:#000000;
    }
    a:active{
    	color:#ff0000;
    }
    </style>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#treeview").treeview({
    			url:"/treeviewtest/user/servlet/treeajax"
    		});
    	});
    </script>
  </head>
  
  <body>
    <ul id="treeview" class="filetree"></ul>
  </body>

后台代码：

String id = request.getParameter("root"); //treeview自动提交root参数为当前节点的id，如果是根节点，则为source

//生成json格式数据
private String toJSONString(Category category){
		StringBuilder sb = new StringBuilder();
		sb.append("{");
		sb.append("\"id\":\""+category.getCatId()+"\"");
		sb.append(",\"text\":\""+generateLinkString(category)+"\"");
		sb.append(",\"classes\":\""+category.getCssClass()+"\"");
		sb.append(",\"expanded\":false");
		sb.append(",\"hasChildren\":"+category.hasChild());
		if(!"".equals(category.getImageName())){
			sb.append(",\"imagepath\":\"url("+category.getImageName()+")\"");
//imagepath是自己加的，用于显示不同的图标，jquery.treeview.async.js文件需要修改
		}
		sb.append("}");
		return sb.toString();
	}

修改jquery.treeview.async.js显示个性化图标：

function load(settings, root, child, container) {
	$.getJSON(settings.url, {root: root}, function(response) {
		function createNode(parent) {
			var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
			if (this.classes) {
				current.children("span").addClass(this.classes);
			}
			if(this.imagepath) {//这里是加的，后台代码是如果显示默认图标，没有imagepath这项，如果显示子定义图标，imagepath是图标的路径。
				current.children("span").css("background-image", this.imagepath);
			}
			if (this.expanded) {
				current.addClass("open");
			}
			if (this.hasChildren || this.children && this.children.length) {
				var branch = $("<ul/>").appendTo(current);
				if (this.hasChildren) {
					current.addClass("hasChildren");
					createNode.call({
						text:"placeholder",
						id:"placeholder",
						children:[]
					}, branch);
				}
				if (this.children && this.children.length) {
					$.each(this.children, createNode, [branch])
				}
			}
		}
		$.each(response, createNode, [child]);
        $(container).treeview({add: child});
    });
}