zTree是利用JQuery的核心代码，实现一套能完成大部分常用功能的树插件，兼容工业工程，火狐、铬合金等浏览器在一个页面内可同时生成多个树实例支持JSON数据支持一次性静态生成和埃阿斯异步加载两种方式支持多种事件响应及反馈支持树的节点移动、编辑、删除支持任意更换皮肤/个性化图标（依靠css)。

页面原型图：

功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面

前端代码实现：

引入钢性铸铁文档：

链接rel='样式表'类型='text/css' href='c:url值=' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '/js/global/plugins/datatables/plugins/bootstrap/datatables。自举。CSS '/link rel='样式表'类型=' text/CSS ' href=' c 3360 URL值=' rel=' external no follow ' rel=' external no follow ' rel=' rel=' external no follow '/js/bow引入射流研究…文件：

脚本类型=' text/JavaScript ' src=' http : c : URL值='/js/bower _ components/z tree _ v3/js/jquery。z树。核心-3.5。量滴js '/脚本脚本类型=' text/JavaScript ' src=' http : c : URL值='/js/bower _ components/z tree _ v3/js/jquery。z树。exedit-3.5部分：HTML部分很简单，就是相当于一个盛放树的差异

ul id='风琴树' class=' z树' style='溢出： auto/uljs部分：

设置树节点

定义变量设置={ check : { enable : false }，view : { selected Muli : false，//addhouseddom : addhouseddom，//removehousedom : removehousedom，}，data : { key : { name : ' name }，simpleData 3: { enable 33: true，idKey : 'id '，pIdKey : 'pId '删除节点，showRemoveBtn : $('#pdelete ').val()=="删除"?setRemoveBtn : false，showRenameBtn : false }，回调： {//onRightClick : onRightClick，//单击事件onClick : zTreeOnClick，onNodeCreated : zTreeOnNodeCreated，在移除前： ztree在移除前，在移除后： zTreeOnRemove } }初始化，判断是否展开节点：

var zTreeObj函数initTree() { $ .get(基路径/system/organize/getorgitserist '，function(data){ ztreeObj=$。fn。ztree。init($(' #器官树')，设置，数据。返回数据。器官树)；ztreobj。expandall(false)；});}//给生成的节点添加班级属性//控制节点是否显示删除图标函数setRemoveBtn(treeId，treeNode) { return treeNode.pId！=null} //给生成的节点添加班级属性函数zTreeOnNodeCreated(event，treeId，TreeNode){ var str=TreeNode。TiD ' _ span$("#"字符串)。添加类(TreeNode。类型)；}单击事件，像后台发起请求，请求右侧的信息

//单击事件，向后台发起请求函数zTreeOnClick(事件，treeId，树节点){ if(树节点。id==' 1 '){ return；} $('#moreinform ').show()；$('#baseinform ').hide()；$('.po _ phone _ num _ r ').css('display '，' none ')；$(' .po _ email _ r’).css('display '，' none ')；if (treeNode.type=='风琴'){ $(' #风琴')。html(")部门名称');$('#Partman ').show()；$('#Email ').hide()；$('#sorgan ').html(")上级部门');$('#partaddress ').html(")部门地址');$('#partman ').html(")部门负责人');$('#parttel ').html(")手机');if (treeNode.id=='1') { $('#po ').hide()；} else { $('#po ').show()；} $.Ajax({ URL :基本路径'/系统/组织/' treenode。id，键入： 'get '，成功：函数(数据){ var organization=data。返回数据。组织；$('#organId ').val(有机的。organid)；$('#sex ').hide()；$(“# name”).val(器官。器官名称);$('#diz ').val(器官。地址);$('#tel ').val(风琴。电话)；$('#manage ').val(风琴。经理);$(' # ParentOrgance ').val(组织者。parent id)；} });} else { $('#po ').show()；$(' #风琴')。html(")姓名');$('#sex ').show()；$('#Email ').show()；$('#Partman ').hide()；$('#sorgan ').html(")所属部门');$('#partaddress ').html(")职位');$('#parttel ').html(")手机');$.Ajax({ URL :基本路径'/系统/组织/getStaff/' treenode。id，键入： 'get '，成功：函数(data){ var staff=data。返回数据。工作人员；$('#organId ').val(工作人员。id)；$(“# name”).val(工作人员。姓名)；$('#diz ').val(职员。职位);$('#tel ').val(工作人员。电话)；$(' #专业').val(staff.sex) $('#Email02 ').val(工作人员。电子邮件)；$(' # ParentOrgance ').val(工作人员。organid)；} });} }删除事件：

//删除节点事件函数ztreeornemove(事件，treeId，树节点){ if(树节点。type==' organize '){ $ .Ajax({ URL :基本路径'/system/organize/' treenode。id，键入： 'DELETE '，成功：函数(数据){ $('#confirmDialog ').情态(“隐藏”)；//点击删除按钮，隐藏弹框if(customglobal。AJaxcall back(数据)){ location。重载()；} } });} else { $ .Ajax({ URL :基本路径'/系统/组织/DELETE staff/' treenode。id，键入： 'DELETE '，成功：函数（数据){ $('#confirmDialog ').情态(“隐藏”)；//点击删除按钮，隐藏弹框if(customglobal。Ajax call back(data)){ initTree()；} } });} }总结

以上所述是小编给大家介绍的ztree实现左边动态生成树右边为内容详情功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！