Ztree异步加载带树节点（带checkbox）

刺骨的言语ヽ痛彻心扉 2022-05-29 07:45 253阅读 0赞

一.简介：实现复选框树型结构，ztree很强大，常用浏览器chrome，firfox支持，IE8+也兼容。

二.静态实现方式：

（1） 效果图：

![Image 1][]

（2）完整代码:需要引入zTreeStyle.css,jquery.ztree.core-3.5.js,jquery.ztree.excheck-3.5.js(支持checkbox复选框)

<!DOCTYPE html>  
<HTML>  
<HEAD>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">  
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>  
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>  
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>  
<SCRIPT type="text/javascript">  
var setting = \{  
check: \{  
enable: true,  
autoCheckTrigger: true  
\},  
data: \{  
simpleData: \{  
enable: true  
\}  
\}  
\};  
var zNodes =\[  
\{ id:2,  pId:1, name:"随意勾选 2"\},  
\{ id:21, pId:2, name:"随意勾选 2-1"\},  
\{ id:22, pId:2, name:"随意勾选 2-2"\},  
\{ id:23, pId:2, name:"随意勾选 2-3"\}  
\];  
$(document).ready(function()\{  
$.fn.zTree.init($("\#treeDemo"), setting, zNodes);  
$.fn.zTree.init($("\#treeDemo1"), setting, zNodes);  
\});  
</SCRIPT>  
</HEAD>  
<BODY>  
<ul id="treeDemo" class="ztree"></ul>  
<ul id="treeDemo1" class="ztree"></ul>  
</BODY>  
</HTML>

三.动态实现方式：

（1）效果图：

![Image 1][]

html页面里面添加一个div标签（js,css引入也一个不能少）：

js核心代码：

var userEntity     = \['userName','passWord','userSex','nickName'\];

var CreditStanderd = \['username','age','workLife','profession','position','income','creditRank','eduDgree','familyAssets'\];

var zNodes =\[\];  
//ztree初始化  
var setting = \{  
check: \{  
enable: true,  
autoCheckTrigger: true  
\},  
data: \{  
simpleData: \{  
enable: true  
\}  
\}

\};

//ajax异步请求

$(document).ready(function()\{  
$.ajax(\{   
type:"get",  
url:rootIp+"getTable?dataBase=mysql",  
dataType:"json",  
success:function(data)\{  
if(data!=null)\{  
console.log(data);  
var list = data;  
initTree(list);  
\}  
\}  
\});  
  
\}

//说明tableList为后台返回的一个list对象，获取对象tbName，来动态加载树结构

最后：如有疑问，和源码给我发邮件373988484@qq.com

[Image 1]: