首页 > 网站 > WEB开发 > 正文

Ztree

2024-04-27 15:14:40
字体:
来源:转载
供稿:网友

项目中要用到树,所以找了下,有人推荐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)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表