項(xiàng)目中要用到樹,所以找了下,有人推薦Ztree,就去試試,沒想到,確實(shí)非常的實(shí)用啊。
Ztree的使用也非常簡單,首先,去官網(wǎng)(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, //數(shù)據(jù)是否采用簡單 Array 格式,默認(rèn)false idKey : "id", //節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識的屬性名稱。 pIdKey : "pid" //節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識的屬性名稱。 } }, 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("數(shù)據(jù)加載錯誤,請重新加載!"); } } });}即可顯示。至于更多的操作,根據(jù)自己的需求去官網(wǎng)看API(http://www.ztree.me/v3/api.php)
新聞熱點(diǎn)
疑難解答