ztree如何实现左边动态生成树右边为内容
这篇文章主要介绍了ztree如何实现左边动态生成树右边为内容,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
目前成都创新互联公司已为近1000家的企业提供了网站建设、域名、虚拟空间、网站改版维护、企业网站设计、安阳县网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标(依靠css) 。
页面原型图:
功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面
前端代码实现:
引入css文档:
" /> " /> " />
引入js文件:
"> "> "> ">
jsp 部分:HTML部分很简单,就是相当于一个盛放树的div
js 部分:
设置树节点
var setting = { check : { enable : false }, view : { selectedMulti : false, // addHoverDom: addHoverDom, // removeHoverDom: removeHoverDom, }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId" } }, edit : { enable : true, removeTitle : "删除节点", showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false, showRenameBtn : false }, callback : { // onRightClick : onRightClick, // 单击事件 onClick : zTreeOnClick, onNodeCreated : zTreeOnNodeCreated, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove } };
初始化,判断是否展开节点:
var zTreeObj; function initTree() { $.get(basePath + "/system/organ/getOrganTreeList", function(data) { zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree); zTreeObj.expandAll(false); }); } // 给生成的节点添加class属性 // 控制节点是否显示删除图标 function setRemoveBtn(treeId, treeNode) { return treeNode.pId != null; } // 给生成的节点添加class属性 function zTreeOnNodeCreated(event, treeId, treeNode) { var str = treeNode.tId + "_span"; $("#" + str).addClass(treeNode.type); }
单击事件,像后台发起请求,请求右侧的信息
// 单击事件,向后台发起请求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } $("#moreinform").show(); $("#baseinform").hide(); $(".po_phone_num_r").css("display", "none"); $(" .po_email_r").css("display", "none"); if (treeNode.type == "organ") { $("#organ").html("部门名称"); $("#Partman").show(); $("#Email").hide(); $("#sorgan").html("上级部门"); $("#partaddress").html("部门地址"); $("#partman").html("部门负责人"); $("#parttel").html("手机"); if (treeNode.id == "1") { $("#po").hide(); } else { $("#po").show(); } $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "get", success : function(data) { var organ = data.returnData.organ; $("#organId").val(organ.organId); $("#sex").hide(); $("#name").val(organ.organName); $("#diz").val(organ.address); $("#tel").val(organ.phone); $("#manage").val(organ.manager); $("#parentOrgan").val(organ.parentId); } }); } else { $("#po").show(); $("#organ").html("姓名"); $("#sex").show(); $("#Email").show(); $("#Partman").hide(); $("#sorgan").html("所属部门"); $("#partaddress").html("职位"); $("#parttel").html("手机"); $.ajax({ url : basePath + "/system/organ/getStaff/" + treeNode.id, type : "get", success : function(data) { var staff = data.returnData.staff; $("#organId").val(staff.id); $("#name").val(staff.name); $("#diz").val(staff.position); $("#tel").val(staff.tel); $("#profession").val(staff.sex) $("#Email02").val(staff.email); $("#parentOrgan").val(staff.organId); } }); } }
删除事件:
// 删除节点事件 function zTreeOnRemove(event, treeId, treeNode) { if (treeNode.type == "organ") { $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { location.reload(); } } }); } else { $.ajax({ url : basePath + "/system/organ/deleteStaff/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { initTree(); } } }); } }
感谢你能够认真阅读完这篇文章,希望小编分享的“ztree如何实现左边动态生成树右边为内容”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
本文题目:ztree如何实现左边动态生成树右边为内容
网站路径:http://scyanting.com/article/iicpeg.html