您的位置:首页 > 其它

在dwz中使用ZTree 树形插件

2017-06-02 11:21 399 查看
数据表设计  id,pid,cname,redirect.

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>







                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dwz ZTree 插件