Ztree

项目中要用到树，所以找了下，有人推荐Ztree，就去试试，没想到，确实非常的实用啊。



Ztree的使用也非常简单，首先，去官网（http://www.ztree.me/v3/api.php）下载插件，都是中文版的，相信都看得懂。

JS引入：

<link type="text/css" rel="stylesheet" href="${ctx}/css/preview/left.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/zTree/css/zTreeStyle/zTreeStyle.css"/>

<script type="text/javascript" src="${ctx}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${ctx}/js/layer-v1.9.3/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/zTree/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="${ctx}/js/zTree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="${ctx}/js/user/preview/left.js"></script>
<script type="text/javascript">
 	var basepath= "<%=basePath%>];
 	var baseImgPath = "<%=basePath%>imgs/";
 </script>

不要遗漏了。

JSP使用：

<div id="tree" class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

JS：

function ztree(){
    var setting = {
data : {
    simpleData : {
        enable : true, 		//数据是否采用简单 Array 格式，默认false
idKey : "id", 		//节点数据中保存唯一标识的属性名称。
pIdKey : "pid" 		//节点数据中保存其父节点唯一标识的属性名称。
    }
},
view : {
    expandSpeed : "",
    showLine : false
},
 	callback: {
// 	    onClick: OnClick,
 	    onDblClick: OnDblClick,
 	    onRightClick: OnRightClick
 	}
    };
    $.ajax({
        async:false,
        dataType:"json",
        cache:false,
        type:"post",
        url : basepath + 'preview/checktree.action',
        success : function(data) {
    if (data != null) {
var zNodes = data;
for(var z = 0; z < zNodes.length; z++){
    if(zNodes[z].id == "r0"){
        zNodes[z].icon =  baseImgPath +"area.png";
    }
}
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
treeObj = $.fn.zTree.getZTreeObj("treeDemo");
}else{
    later.msg("数据加载错误，请重新加载！");
    }
        }
    });
}

即可显示。至于更多的操作，根据自己的需求去官网看API（http://www.ztree.me/v3/api.php）