最好是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API。
JQuery最好官网
只要引入jquery和最好的库js,然后给最好提供需要的json数据,并且设置好ztress的属性,就可以即刻展示出树形目录。
总结下来,要使用最好的话,必须要完成以下几步:
<强> 1。引入库文件
jquery.js
ztree.js
ztree.css
<强> 2。获取数据
你要思考数据来源问题了。
如果要自己从数据库查询树形结构这时候你需要知道甲骨文的递归查询连接:<强> 递归查询简单来讲就是一个表中要具备2个基本字段:id和pid(子节点和父节点id),使用关键字连接之前,来连接id和pid,先定义数据行查询的初始点,由此获取一棵或者多棵树的树形结构。(这里顺便回忆一下sql里的分组查询集团,由区跟连接分开来。)
拿实际项目举例,项目中要获取如下的目录树:
执行以下SQL:
选择级别,t。dir_id, t。dir_name, t.parent_id
从T_RES_OWNER t
在t。IS_FOLDER=' 0 '
从1=1开始
和t。parent_id=' 0 '
和t。owner_type=' 0 '
和t。ac7a7ad624692a5b94d93e0634952 USER_ID=' 136 '
连接之前,t。dir_id=t.parent_id
按级别asc, t。dir_name asc;
执行结果:
<强> 3。封装json输入
下面一段引用最好官网演示的描述:
那么,从接口获取到存放数据的名单之后,按照如上组织json给最好使用即可,参考以下代码:
JSONArray JSONArray树=new ();
List列表=resOwnerService.selectFolderTree(所有者);
JSONObject obj=零;
(复种复种:列表){
obj=new JSONObject ();
obj。put (" id ", resOwner.getDirId ());
obj。put (“pId”, resOwner.getParentId ());
obj。把(“名字”,resOwner.getDirName () . length()比;24 & # 63;resOwner.getDirName () .substring (0, 24) +“…”: resOwner.getDirName ());
obj。put(“图标”,SysConf.getString (“webapp.jspconfigUrl”) +“共同/css/zTreeStyle2/img/leaf_ico.png”);
tree.add (obj);
}
结果。put(“成功”,新布尔(真));
结果。(“数据”,树);
返回结果;
4。设置最好属性
var zNodes=data.data;={var设置
观点:{
showLine:假的,
showIcon:真
},
数据:{
simpleData: {
启用:真
}
},
编辑:{
启用:没错,
showRemoveBtn:没错,
showRenameBtn:没错,
removeTitle:“删除”,
renameTitle:“重命名”
},
回调:{>
& lt; div class=" zTreeDemoBackground2左”比;
& lt; ul类id=皌reeDemo_mydoc”=皕tree2祝辞& lt;/ul>
& lt;/div>
可以在设置。回调里面可以设置各种回调函数,用以实现更加复杂的功能,详见最好api文档经过以上步骤,用最好实现一个具有基本功能的目录树就完成了。
<强>总结:
实现一个基本功能的目录树其实很简单,说白了就是要提供最好需要的json数据,然后设置一些属性,其他工作就交给最好插件来完成了,其难点在于用甲骨文的连接由获取数据源,另外,页面交互也比较考验JavaScript功底,毕竟很多地方是需要异步加载来提高用户体验。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
