项目中要用到树,所以找了下,有人推荐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)
新闻热点
疑难解答