2023年6月22日发(作者：)

zTree的使⽤教程2、之后引⼊：3、写js：⽂本框的代码：树状图显⽰的地⽅：

必要的样式：.treeContainer{ display:none;

position: absolute;}以下是详解：数据填充 数据填充重点就在于zNodes的配置。就是要配置好id、pId、name;这三个属性。var zNodes =[ <#if selectNewsTypeAll?size gt 0> <#list selectNewsTypeAll as sNewsTypeAll> { id:${}, pId:${Id}, name:"${}" }, ];setting 中callback是回调函数，我上⾯写了两个callback: { //节点点击事件 onClick: onClick,

//节点选中事件 onCheck: onCheck,}setting中其他属性默认，就⾏。由于⼀加载页⾯就要把树状图准备好，只不过没有显⽰出来⽽已！所以需要以下代码$(document).ready(function() { //初始化 $.($("#treeConfig"), setting, zNodes);});节点点击事件，没什么说的，这样配置就可以了：function onClick(e,treeId,treeNode) { var zTree = $.eeObj("treeConfig"); ode(treeNode, !d, null, true); return false;}节点选择事件：function onCheck(e,treeId,treeNode) { var zTree = $.eeObj("treeConfig"), nodes = ckedNodes(true); var name = "", id = ""; for (var i = 0, l = ; i < l; i++) { name = nodes[i].name; newsTypeId = nodes[i].id; } $("#treeName").val(name); $("#treeId").val(id);}其中： $("#treeName").val(name); $("#treeId").val(id);是根据⾃⼰的业务来的，我是因为在选择节点之后，要把，你选择的名字显⽰出来，并且id要写⼊隐藏字段，以便保存到数据库。树状图是在什么时候显⽰出来呢？我设置的是当点击⽂本框的时候显⽰出来function showMenu() { var dropdownObj = $("#treeName"); var dropdownOffset = $("#treeName").offset(); $("#treeContainer").css({ left: + "px", top: + eight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); //获取⽂本框的宽度 var w = $("#treeName").width(); //获取⽂本框的内填充 var p = $("#treeName").css("padding-left"); //设置树状图的宽度 $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}其中：$("body").bind("mousedown", onBodyDown);是绑定了⼀个⿏标点击事件，当点击其他区域，会触发onBodyDown事件。function onBodyDown(event) { if (!( == "chooseButton" || == "treeName" || == "treeContainer" || $().parents("#treeContainer").length > 0)) { hideMenu(); //以下代码暂时没⽤到 start var height = top.$("#mainFrame").contents().find("body").height(); if (height < 850) { height = 850; } top.$("#mainFrame").height(height); //以下代码暂时没⽤到 end }}这⾥⾯⼜调⽤hideMenu()把树状图隐藏掉。需要⽤到的⽂本框代码：⽽⽤于显⽰树状图的代码是： 这段代码不⼀定要和上⾯那段⽂本框代码放在⼀起。

因为，这⾥⾯做了位置的偏移。function showMenu() { var dropdownObj = $("#treeName"); //获取偏移量 var dropdownOffset = $("#treeName").offset(); $("#treeContainer").css({ left: + "px", top: + eight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); var w = $("#treeName").width(); var p = $("#treeName").css("padding-left"); $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}由于zTree⾃带的样式不好看，我进⾏了细微的跳转，只是让显⽰稍微好看些/*⼀定要的*/.treeContainer{ display:none;

position: absolute;}/*根据⾃⼰情况⽽定*/.treeContainer .ztree{ background-color:#FFF;}