在dwz中使用ZTree 树形插件
2017-06-02 11:21
399 查看
数据表设计 id,pid,cname,redirect.
DOM结构
引入ZTree 相关js库和样式文件(略去引入dwz的相关文件)
DOM结构
<div class="pageContent" layoutH="15"> <p> <label>菜单树</label> <div class="divider"></div> <div id="areaId"> </div> </p> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div>
引入ZTree 相关js库和样式文件(略去引入dwz的相关文件)
<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="js/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript"> function look(v){ var op= '{max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true}'; $.pdialog.open("getSingleProcedureView?id="+v, "detail", "查看详情",op); } //ztree 全局设置 var setting = { data: { simpleData: { enable: true } } }; //ztree json数据格式 function p(id,pid,name,url,click){ return {"id":id,pId:pid,"name":name,"url":url,"click":click}; } //数据转换 var tree=eval('${tree}');//后台数据 var zNodes =new Array(); for(var i=0; i<tree.length;i++){ zNodes.push(new p(tree[i].id,tree[i].pid,tree[i].cname,"","look("+tree[i].id+")")); } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script>
相关文章推荐
- jquery树形插件zTree使用示例
- zTree树形插件使用 异步加载方法,Struts2框架
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
- jQuery使用zTree插件实现树形菜单和异步加载
- 使用zTree插件构建树形菜单
- zTree:JQuery树形插件使用示例
- jquery树形插件zTree使用示例--入门
- jQuery树形菜单,使用zTree插件,异步载入 & 编辑功能&Check 共存
- vue项目中使用ztree树形插件,ztree请求后台数据渲染Dom
- jQuery树形菜单,使用zTree插件,异步加载 & 编辑功能&Check 共存
- jQuery使用zTree插件实现树形菜单和异步加载
- zTree:JQuery树形插件使用示例
- zTree树形插件使用 同步加载
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
- jquery树形插件zTree高级使用
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
- vim插件:显示树形目录插件NERDTree安装 和 使用
- ztree插件的使用
- zTree -- jQuery 树插件 使用小结
- 一个好用的jquery树形插件zTree