zTree的使用教程

1、首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo

2、之后引入：

<script src="js/jquery.ztree.all-3.5.js"></script>

<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

3、写js：

<!--树形结构 JS-->
<script type="text/javascript">
var setting= {
data: {
simpleData: {enable: true}
},
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
view: {
showLine: true
},
callback: {
onClick: onClick,
onCheck: onCheck,
}
};
var zNodes =[
<#if selectNewsTypeAll?size gt 0>
<#list selectNewsTypeAll as sNewsTypeAll>
{id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${sNewsTypeAll.name}"},
</#list>
</#if>
];
$(document).ready(function() {
$.fn.zTree.init($("#treeConfig"), setting, zNodes);
});
function onClick(e,treeId,treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeConfig");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e,treeId,treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeConfig"),
nodes = zTree.getCheckedNodes(true);
var name = "", id = "";
for (var i = 0, l = nodes.length; i < l; i++) {
name = nodes[i].name;
newsTypeId = nodes[i].id;
}
$("#treeName").val(name);
$("#treeId").val(id);
}
function showMenu() {
var dropdownObj = $("#treeName");
var dropdownOffset = $("#treeName").offset();
$("#treeContainer").css({
left: dropdownOffset.left + "px",
top: dropdownOffset.top + dropdownObj.outerHeight() + "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);
}
function hideMenu() {
$("#treeContainer").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) {
hideMenu();
//以下代码暂时没用到 start
var height = top.$("#mainFrame").contents().find("body").height();
if (height < 850) {
height = 850;
}
top.$("#mainFrame").height(height);
//以下代码暂时没用到 end
}
}
</script>

文本框的代码：

<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>

树状图显示的地方：

<div id="treeContainer" class="treeContainer">
<ul id="treeConfig" class="ztree"></ul>
</div>

必要的样式：

.treeContainer{
display:none;
position: absolute;
}

以下是详解：

数据填充
重点就在于zNodes的配置。就是要配置好id、pId、name;这三个属性。

var zNodes =[
<#if selectNewsTypeAll?size gt 0>
<#list selectNewsTypeAll as sNewsTypeAll>
{
id:${sNewsTypeAll.id},
pId:${sNewsTypeAll.parentId},
name:"${sNewsTypeAll.name}"
},
</#list>
</#if>
];

setting 中callback是回调函数，我上面写了两个

callback: {
//节点点击事件
onClick: onClick,
//节点选中事件
onCheck: onCheck,
}

setting中其他属性默认，就行。

由于一加载页面就要把树状图准备好，只不过没有显示出来而已！所以需要以下代码

$(document).ready(function() {
//初始化
$.fn.zTree.init($("#treeConfig"), setting, zNodes);
});

节点点击事件，没什么说的，这样配置就可以了：

function onClick(e,treeId,treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeConfig");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}

节点选择事件：

function onCheck(e,treeId,treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeConfig"),
nodes = zTree.getCheckedNodes(true);
var name = "", id = "";
for (var i = 0, l = nodes.length; 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: dropdownOffset.left + "px",
top: dropdownOffset.top + dropdownObj.outerHeight() + "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 (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).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()把树状图隐藏掉。

需要用到的文本框代码：

<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>

而用于显示树状图的代码是： 这段代码不一定要和上面那段文本框代码放在一起。

<div id="treeContainer" class="treeContainer">
<ul id="treeConfig" class="ztree"></ul>
</div>

因为，这里面做了位置的偏移。

function showMenu() {
var dropdownObj = $("#treeName");
//获取偏移量
var dropdownOffset = $("#treeName").offset();
$("#treeContainer").css({
left: dropdownOffset.left + "px",
top: dropdownOffset.top + dropdownObj.outerHeight() + "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;
}

最后

以上就是友好星星为你收集整理的zTree的使用教程的全部内容，希望文章能够帮你解决zTree的使用教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。