java动态生成树_ztree实现左边动态生成树右边为内容详情功能

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实现左边动态生成树右边为内容详情功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！