下载文档原格式
前端框架中的节点操作与 DOM 操作技巧在前端开发中，节点操作与 DOM（文档对象模型）操作是非常常见且重要的技术。
节点操作指的是对网页中的元素进行增删改的操作，而 DOM 操作则是对整个文档进行访问与操作的方式。
在前端框架中，如何高效地进行节点操作与 DOM 操作是前端开发人员需要掌握的关键技巧之一。
一、节点操作技巧1. 查找元素在前端开发中，经常需要通过元素的标签名、类名、ID等属性来查找相应的元素。
在使用原生 JavaScript 进行节点操作时，可以使用以下方法来查找元素：- getElementById: 通过元素的 ID 查找元素。
- getElementsByClassName: 通过元素的类名查找元素。
- getElementsByTagName: 通过元素的标签名查找元素。
- querySelector: 通过 CSS 选择器查找元素。
当使用前端框架如 Vue.js 或 React.js 等进行开发时，它们通常提供了更便捷的方式来查找元素。
例如，在 Vue.js 中可以使用 v-bind 或 v-on 指令来绑定、监听元素，而不再需要显式地使用上述原生 JavaScript 方法。
2. 创建与插入元素在前端开发中，需要动态地创建新的元素并将其插入到相应的位置。
使用原生JavaScript 进行元素的创建与插入操作可以使用以下方法：- createElement: 创建新的元素节点。
- appendChild: 将元素插入到父元素的子元素列表的末尾。
- insertBefore: 将元素插入到指定位置的前面。
当使用前端框架进行开发时，可以直接使用框架提供的特定方式来创建与插入元素。
例如，在 Vue.js 中可以使用 v-for 指令来循环渲染元素，并使用 v-if、v-show 指令来动态显示或隐藏元素。
3. 修改与删除元素在前端开发中，经常需要修改或删除已经存在的元素。
使用原生 JavaScript 进行元素的修改与删除操作可以使用以下方法：- innerHTML: 设置或获取元素的 HTML 内容。
dom结构类型-回复DOM结构类型简介及应用领域[DOM结构类型]是指文档对象模型（Document Object Model）中的三种基本节点类型：元素节点、文本节点和属性节点。
DOM是一种用于表示和处理网页文档的API，它将整个页面以一棵树的形式进行组织和访问，开发人员可以通过DOM接口来操作和修改页面的内容和样式。
DOM结构类型的应用非常广泛，以下将逐步介绍并深入讨论这三种节点类型的具体特点和应用领域。
第一步：元素节点元素节点是DOM树中的核心节点类型，代表HTML或XML文档中的各个标签。
每个网页都是由一个或多个元素节点组成的。
元素节点具有以下特点：1. 标签名：元素节点的名称由HTML或XML中的标签名决定，例如`<div>`、`<p>`、`<img>`等。
2. 属性：元素节点可以拥有零到多个属性，属性用于定义元素的额外信息，例如`<img src="image.jpg" alt="image">`中的`src`和`alt`就是该元素节点的属性。
3. 子节点：元素节点可以包含零到多个子节点，这些子节点可以是元素节点、文本节点或其他类型的节点。
元素节点广泛应用于网页开发中，通过操作元素节点，可以实现许多功能，例如：- 动态添加、删除或修改网页的各个元素，改变页面的结构和布局。
- 获取元素节点的属性值，例如修改或获取表单元素的值。
- 通过元素节点进行事件绑定，实现交互效果，例如点击一个按钮时触发某个事件。
第二步：文本节点文本节点是DOM树中的叶子节点，代表HTML或XML文档中的文本内容。
文本节点具有以下特点：1. 文本内容：文本节点的内容就是HTML或XML文档中的文本信息，例如`<p>Hello World</p>`中的`Hello World`就是该文本节点的内容。
2. 父节点：文本节点总是作为元素节点的子节点存在，没有直接包含其他节点。
树结构数据的展⽰和编辑-zTree树插件的简单使⽤最近在项⽬当中遇到⼀个需求，需要以树结构的⽅式展⽰⼀些数据，并可对每⼀个树节点做内容的编辑以及树节点的添加和删除，刚好听说有zTree这个插件可以实现这样的需求，所以在项⽬的这个需求完成之后，在博客⾥⽤⼀个⼩demo的形式记录⼀下zTree的简单实⽤⽅法。
1、下载zTree插件zTree的官⽹地址是：下载地址是：2、引⼊相应的css和js⽂件 zTreeStyle.cssjquery.min.jsjquery.ztree.core.min.jsjquery.ztree.excheck.min.jsjquery.ztree.exedit.min.js3、不说废话，直接代码，简洁明了<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>zTree的简单实⽤</title><link rel="stylesheet" href="zTreeStyle.css"><script src="jquery.min.js"></script><script src="jquery.ztree.core-3.5.min.js"></script><script src="jquery.ztree.excheck-3.5.min.js"></script><script src="jquery.ztree.exedit-3.5.min.js"></script><style>.ztree li {line-height: 25px;}.ztree li span.button.switch {height: 20px;margin-top: -7px;}.ztree li span.button.ico_open,.ztree li span.button.ico_close {background-image: none; width: 0px;margin-left: -2px;}.ztree li span.button.ico_docu {background-image: none; width: 0px;}.ztree li a {height: 25px;}.ztree li span {font-size: 14px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}.ztree li a.curSelectedNode {height: 18px;}.ztree li a.curSelectedNode_Edit{height: 18px;}.ztree li a.curSelectedNode_Edit span {display: inline-block;height: 18px;}.ztree li a.curSelectedNode_Edit input {display: inline-block;height: 18px;font-size: 14px;width: 100%;min-width: 150px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL" .ztree li a.curSelectedNode {max-width: 260px;overflow: hidden;}.ztree li span {max-width: 185px;display: inline-block;overflow: hidden;}.ztree li span input{width: 150px;}.ztree li span.button.add {margin-left: 2px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -278px;background-position-y: -237px;}.ztree li span.button.edit {margin-left: 3px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: 2px;background-position-y: 3px;}.ztree li span.button.remove {background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -138px;background-position-y: -137px;}.ztree li span.button.roots_close, .ztree li span.button.root_close, .ztree li span.button.center_close, .ztree li span.button.bottom_close{background-image: url(imgs/jui.png);background-position-x: -77px;background-position-y: -196px;}.ztree li span.button.roots_open, .ztree li span.button.root_open, .ztree li span.button.center_open, .ztree li span.button.bottom_open{background-image: url(imgs/jui.png);background-position-x: -117px;background-position-y: -196px;}</style></head><body><div><ul id="treeDemo" class="ztree"></ul></div></body><script>//zTree的配置var setting = {view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom,selectedMulti: false},edit: {enable: true,editNameSelectAll: true,showRemoveBtn: showRemoveBtn,showRenameBtn: showRenameBtn},data: {simpleData: {enable: true}},callback: {onClick:zTreeOnClick, //点击选中事件 beforeDrag: beforeDrag, // 可设置是否允许拖拽功能beforeEditName: beforeEditName,beforeRemove: beforeRemove,beforeRename: beforeRename,onRemove: onRemove,onRename: onRename}};//zTree初始化加载的节点树var zNodes =[{ id:1, pId:0, name:"⽗节点 1", open:true}, //open属性的值true和false，表⽰是否在初始化加载后展开⼦节点{ id:11, pId:1, name:"⼦节点 1-1"},{ id:12, pId:1, name:"⼦节点 1-2"},{ id:13, pId:1, name:"⼦节点 1-3"},{ id:2, pId:0, name:"⽗节点 2", open:true},{ id:21, pId:2, name:"⼦节点 2-1"},{ id:22, pId:2, name:"⼦节点 2-2"},{ id:23, pId:2, name:"⼦节点 2-3"},{ id:3, pId:0, name:"⽗节点 3", open:false},{ id:31, pId:3, name:"⼦节点 3-1"},{ id:32, pId:3, name:"⼦节点 3-2"},{ id:33, pId:3, name:"⼦节点 3-3"},];var log, className = "dark";function zTreeOnClick(event, treeId, treeNode) {console.log('zTreeOnClick');console.log(treeNode)var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),nodes = treeObj.getCheckedNodes(true),v = "";for (var i = 0; i < nodes.length; i++) {v += nodes[i].name + ",";console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值}}function beforeDrag(treeId, treeNode) { return false; //false=禁⽤拖拽功能， true=开启}function beforeEditName(treeId, treeNode) {console.log('beforeEditName');console.log(treeNode)className = (className === "dark" ? "":"dark");var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);zTree.editName(treeNode);}function beforeRemove(treeId, treeNode) {console.log('beforeRemove');className = (className === "dark" ? "":"dark");var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);return confirm("确认删除节点 -- " + + " 吗？");}function onRemove(e, treeId, treeNode) { //确定删除节点console.log('onRemove');console.log(treeNode)}function beforeRename(treeId, treeNode, newName, isCancel) {console.log('beforeRename');className = (className === "dark" ? "":"dark");if (newName.length == 0) {setTimeout(function() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.cancelEditName();alert("节点名称不能为空。
zTree的学习使用1.引进三个头文件<link href="~/Scripts/zTree/css/zTreeStyle/metro.css"rel="stylesheet"/><script src="~/Scripts/zTree/js/jquery-1.4.4.min.js"></script><script src="~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js"></script>[注]第一个是css样式，主要用于显示特效，第二个是jquery，因为zTree也是由jquery写成的，所以jquery必须在zTree的前面引用！第三个是zTree的js，包含其里面一些特殊的效果! 2.在页面中放置容器和ul，用于显示zTree的内容和效果<body><div class="container"><ul class="ztree"id="tree"style="width:560px;overflow:auto;"></ul></div><script type="text/javascript">//zTreejs代码部分</script></body>3．zTree树部分<script type="text/javascript">var zTree;var demoIframe;//添加功能function addHoverDom(treeId, treeNode) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;//在树节点的后面增加添加和编辑按钮var addStr = "<span class='button remove' id='removeBtn_"+treeNode.tId+ "' title='add node' onfocus='this.blur();'></span>";addStr += "<span class='button add' id='addBtn_"+treeNode.tId+"'></span>";addStr += "<span class='button edit' id=editBtn_" + treeNode.tId + "'></span>";sObj.after(addStr);var btn = $("#addBtn_" + treeNode.tId);//点击添加按钮if (btn) btn.bind("click", function () {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.addNodes(treeNode, { id: (1000 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });returnfalse;});}//删除功能function removeHoverDom(treeId, treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove(); $("#editBtn_" + treeNode.tId).unbind().remove(); $("#removeBtn_"+treeNode.tId).unbind().remove(); }//树节点的设置var setting = {//添加checkbox，true为有，false为没有check: {enable: true},//添加特殊的控件view: {addHoverDom: addHoverDom,//添加按钮removeHoverDom: removeHoverDom,//移除按钮dbClickExpand: false,//双击不可用selectedMulti: false,//多选不可用},//数据格式data: {//简单数据类型simpleData: {enable: true,idKey: "id",//节点pIdKey: "pId",//父节点rootPId: ""//根节点}},//回发操作callback: {//点击之前beforeClick: function (treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("tree");//判断是否是父节点if (treeNode.isParent) {zTree.expandNode(treeNode);returnfalse;}else {demoIframe.attr("src", treeNode.file + ".html");returntrue;}}}};//树节点内的内容var zNodes = [//基本功能演示{ id: 1, pId: 0, name: "[core] 基本功能演示", open: true },{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据", file:"core/standardData" },{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据", file:"core/simpleData" },{ id: 103, pId: 1, name: "不显示连接线", file: "core/noline" },{ id: 104, pId: 1, name: "不显示节点图标", file: "core/noicon" },{ id: 105, pId: 1, name: "自定义图标 -- icon 属性", file: "core/custom_icon" }, { id: 106, pId: 1, name: "自定义图标 -- iconSkin属性", file:"core/custom_iconSkin" },{ id: 107, pId: 1, name: "自定义字体", file: "core/custom_font" },{ id: 115, pId: 1, name: "超链接演示", file: "core/url" },{ id: 108, pId: 1, name: "异步加载节点数据", file: "core/async" },{ id: 109, pId: 1, name: "用zTree方法异步加载节点数据", file: "core/async_fun" }, { id: 110, pId: 1, name: "用zTree方法更新节点数据", file: "core/update_fun" }, { id: 111, pId: 1, name: "单击节点控制", file: "core/click" },{ id: 112, pId: 1, name: "展开 / 折叠父节点控制", file: "core/expand" },{ id: 113, pId: 1, name: "根据参数查找节点", file: "core/searchNodes" },{ id: 114, pId: 1, name: "其他鼠标事件监听", file: "core/otherMouse" },//复/单选框功能{ id: 2, pId: 0, name: "[excheck] 复/单选框功能演示", open: false },{ id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox" },{ id: 206, pId: 2, name: "Checkbox nocheck演示", file: "excheck/checkbox_nocheck"}, { id: 207, pId: 2, name: "Checkbox chkDisabled演示", file:"excheck/checkbox_chkDisabled" },{ id: 208, pId: 2, name: "Checkbox halfCheck演示", file:"excheck/checkbox_halfCheck" },{ id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count" }, { id: 203, pId: 2, name: "用zTree方法勾选 Checkbox", file:"excheck/checkbox_fun" },{ id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio" },{ id: 209, pId: 2, name: "Radio nocheck演示", file: "excheck/radio_nocheck" }, { id: 210, pId: 2, name: "Radio chkDisabled演示", file:"excheck/radio_chkDisabled" },{ id: 211, pId: 2, name: "Radio halfCheck演示", file: "excheck/radio_halfCheck"}, { id: 205, pId: 2, name: "用zTree方法勾选 Radio", file: "excheck/radio_fun" }, //编辑功能演示{ id: 3, pId: 0, name: "[exedit] 编辑功能演示", open: false },{ id: 301, pId: 3, name: "拖拽节点基本控制", file: "exedit/drag" },{ id: 302, pId: 3, name: "拖拽节点高级控制", file: "exedit/drag_super" },{ id: 303, pId: 3, name: "用zTree方法移动 / 复制节点", file: "exedit/drag_fun" }, { id: 304, pId: 3, name: "基本增 / 删 / 改节点", file: "exedit/edit" },{ id: 305, pId: 3, name: "高级增 / 删 / 改节点", file: "exedit/edit_super" },{ id: 306, pId: 3, name: "用zTree方法增 / 删 / 改节点", file: "exedit/edit_fun"}, { id: 307, pId: 3, name: "异步加载&编辑功能共存", file: "exedit/async_edit" }, { id: 308, pId: 3, name: "多棵树之间的数据交互", file: "exedit/multiTree" },//大数据演示{ id: 4, pId: 0, name: "大数据量演示", open: false },{ id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },{ id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },{ id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },//组合功能演示{ id: 5, pId: 0, name: "组合功能演示", open: false },{ id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },{ id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },{ id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },{ id: 504, pId: 5, name: "添加自定义控件", file: "super/diydom" },{ id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" }, { id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },{ id: 513, pId: 5, name: "OutLook样式的左侧菜单", file:"super/left_menuForOutLook" },{ id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },{ id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file:"super/select_menu_checkbox" },{ id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file:"super/select_menu_radio" },{ id: 508, pId: 5, name: "右键菜单的实现", file: "super/rightClickMenu" },{ id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" }, { id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" }, //其他扩展功能演示{ id: 6, pId: 0, name: "其他扩展功能演示", open: false },{ id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },{ id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },{ id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }];//初始化树$(document).ready(function () {var t = $("#tree");t = $.fn.zTree.init(t, setting, zNodes);demoIframe = $("#testIframe");demoIframe.bind("load", loadReady);var zTree = $.fn.zTree.getZTreeObj("tree");zTree.selectNode(zTree.getNodeByParam("id",101));});//数据加载function loadReady() {var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, htmlH = demoIframe.contents.find("html").get(0).scrollHeight, maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),h = demoIframe.height() >= maxH ? minH :maxH;if (h < 530) h = 530;demoIframe.height(h);}</script>4．显示的效果。
jQuery树控件zTree使⽤⽅法详解（⼀）⼀、节点模糊搜索功能：搜索成功后，⾃动⾼亮显⽰并定位、展开搜索到的节点。
⼆、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。
前台代码如下：js：<script type="text/javascript">//ztree设置var setting = {view: {fontCss: getFontCss},check: {enable: true},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}},async: {enable: true,url: "#{getStudentsJsonUrl}",autoParam: ["id", "level"]},callback: {beforeCheck: zTreeBeforeCheck,onNodeCreated: zTreeOnNodeCreated,beforeExpand: zTreeBeforeExpand}};var reloadFlag = false; //是否重新异步请求var checkFlag = true; //是否选中//节点展开前function zTreeBeforeExpand(treeId, treeNode) {reloadFlag = false;return true;};//节点创建后function zTreeOnNodeCreated(event, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (reloadFlag) {if (checkFlag) {zTree.checkNode(treeNode, true, true);}if (!treeNode.children) {zTree.reAsyncChildNodes(treeNode, "refresh");}}};//选中节点前function zTreeBeforeCheck(treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (!treeNode.children) {reloadFlag = true;checkFlag = true;zTree.reAsyncChildNodes(treeNode, "refresh");}return true;}//页⾯加载完成_run(function () {require(['zTree/js/jquery.ztree.all-3.5'], function () {$.ajax({type: "POST",url: "#{getStudentsJsonUrl}",success: function (data) {if (data && data.length != 0) { //如果结果不为空$.fn.zTree.init($("#tree"), setting, data);}else { //搜索不到结果}}});});//提交$("#inputSubmit").click(function () {var zTree = $.fn.zTree.getZTreeObj("tree");var nodes = zTree.getCheckedNodes(true);var ids = "";var names = "";for (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合if (!nodes[i].isParent) {ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";names += nodes[i].name + ",";}}Simpo.ui.box.hideBox();parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1)); parent.$(".boxFrm").contents().find("#hidRange").val(ids.substr(0, ids.length - 1));})});//查找节点var lastNodeList = [];var lastKey;function searchNode() {var zTree = $.fn.zTree.getZTreeObj("tree");var key = $.trim($("#inputSearchNode").val());if (key != "" && key != lastKey) {nodeList = zTree.getNodesByParamFuzzy("name", key);for (var i = 0, l = lastNodeList.length; i < l; i++) { //上次查询的节点集合取消⾼亮lastNodeList[i].highlight = false;zTree.updateNode(lastNodeList[i]);}zTree.expandAll(false); //全部收缩if (nodeList.length > 0) {for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合if (nodeList[i].getParentNode()) {zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其⽗节点}nodeList[i].highlight = true;zTree.updateNode(nodeList[i]);}}zTree.refresh(); // 很重要，否则节点状态更新混乱。
html css树状结构表HTML和CSS是前端开发中两个非常重要的技术，它们的组合可以创建出美观且具有结构性的网页。
其中，树状结构表是一种常见的布局方式，可以用来展现父子关系的层级结构。
本文将围绕这一主题展开讨论。
我们需要了解树状结构表的基本概念。
树状结构表是一种以树状形式呈现数据的方式，它由一系列的节点组成，每个节点都可以有一个或多个子节点。
树状结构表常用于展示层级关系，比如网站导航菜单、文件目录等。
在HTML中，我们可以使用无序列表（<ul>）和有序列表（<ol>）来创建树状结构表。
无序列表使用<li>标签表示每个节点，有序列表除了使用<li>标签外，还可以使用<ol>标签的type属性指定编号方式。
通过嵌套使用<ul>和<li>或<ol>和<li>，我们可以构建出多层级的树状结构表。
在CSS中，我们可以通过设置样式来美化树状结构表。
可以为列表设置背景色、边框、内外边距等样式，使其在页面上更加醒目。
此外，还可以通过设置字体、颜色、大小等样式来调整文本的显示效果，使树状结构表更加美观。
除了基本的树状结构表，我们还可以通过使用CSS的伪类选择器和属性选择器来为树状结构表添加交互效果。
比如，可以使用:hover伪类选择器为节点添加鼠标悬停效果，当鼠标悬停在节点上时，改变节点的背景色或文本颜色。
另外，还可以使用:checked伪类选择器和<input>标签来实现树状结构表的展开和折叠功能，点击节点前面的复选框可以展开或折叠该节点的子节点。
在实际应用中，树状结构表常常用于展示网站的导航菜单。
通过合理地组织节点和子节点的层级关系，可以使用户快速找到所需的信息。
此外，树状结构表还可以用于展示文件目录，方便用户查看和管理文件。
总结起来，树状结构表是一种常见的网页布局方式，它通过节点和子节点的层级关系展示数据。
jquery树形插件zTree⾼级使⽤详解使⽤⾼级zTree进⾏对属性结构进⾏操作的时候，做好的⽅式是参考官⽹的API⽂档。
本⽂简单介绍下如何通过后台传递过来⼀个树形结构的树，并且通过页⾯进⾏加载。
【与后台交互步骤】1、编写页⾯，引⼊zTree相关插件；2、编写js脚本，设定树形结构的基本属性；3、编写zTree的PO对象；4、编写返回属性结构的⽅法（json格式返回）；5、页⾯请求树。
1、引⼊zTree相关的插件：<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-1.9.1.min.js"></script><link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/css/bootstrap.min.css" ><script type="text/javascript" src="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script><!-- 引⼊zTree相关的js/css⽂件 --><link rel="stylesheet" href="<%=request.getContextPath() %>/resources/ztree/zTreeStyle/zTreeStyle.css" ><script type="text/javascript" src="<%=request.getContextPath() %>/resources/ztree/jquery.ztree.all.js"></script>2、编写js脚本，设定树形结构的基本属性// zTree 的参数配置，深⼊使⽤请参考 API ⽂档（setting 配置详解）var setting = {check:{enable: false,//autoCheckTrigger:true,//chkStyle:"none"},callback:{onClick:queryRoleByEmployee}};function queryRoleByEmployee(event, treeId, treeNode){//(treeNode.tId + ", " + + "," + treeNode.checked);//("--------"+treeNode.isParent);if(treeNode.isParent == true){//将⾓⾊的树形结构清楚$.fn.zTree.destroy("roleTree");return ;}$.get('<%=request.getContextPath()%>/'+treeNode.objCode+'/role',{"coddd":treeNode.isParent},function(data){(data);zTreeObj = $.fn.zTree.init($("#roleTree"), settingRole, data);});}3、编写zTree的PO对象public class DimsTree {//除了树本⾝的属性,还可以⾃定义属性.private Object objCode;//树形结构展⽰的名称private String name;//是否打开属性private String open;//是否根节点private boolean isParent;//urlprivate String url;//⼦节点private List<DimsTree> children;//是否被选中private boolean checked;//省略gettings和settings⽅法}4、编写返回属性结构的⽅法（json格式返回）@ResponseBody@RequestMapping(value="/user_role1")public List<DimsTree> userRole1(Model model){//宿舍信息TreeList<DimsTree> dimsTreeList = new ArrayList<DimsTree>();//加载⽤户信息列表,⼿链需要加载宿舍信息,将⽤户信息加⼊到宿舍信息中.List<Dormitory> dormitoiryList = dormitoryDao.list();for(Dormitory dorm: dormitoiryList){DimsTree dt = new DimsTree();dt.setName(dorm.getDormCode());dt.setParent(true);//根节点dt.setObjCode(dorm.getDormCode());dt.setChildren(employee2DimsTree(dorm));dimsTreeList.add(dt);}model.addAttribute(dimsTreeList);//加载⾓⾊信息列表，对已经选中的⾓⾊进⾏设置checked=true属性。
【黑马程序员】Ztree树的简单zTree的使用总结1. copy ztree的js和css2.在需要ztree树的页面上引入以下文件<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ztree</title><link rel="stylesheet" href="${pageContext.request.contextPath}/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"><link rel="stylesheet" href="${pageContext.request.contextPath}/zTree/css/demo.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery.ztree.core-3.5.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery.ztree.excheck-3.5.js"></s cript><script type="text/javascript">var setting = {check: {enable: true},data: {simpleData: {enable: true}}};var zNodes=null;$().ready(function() {$.ajax( {url : "${pageContext.request.contextPath}/ztree_getDate",type : "get",dataType : "text",success : function(data){zNodes=eval("("+data+")");zTree=$.fn.zTree.init($("#treeDemo"), setting, zNodes);//展开所有的节点!zTree.expandAll(true);}});});var zTree=null;function formSubmit() {//获取被选中的节点!var nodes=zTree.getCheckedNodes(true);var ids="";for (var i = 0; i < nodes.length; i++) {ids+=nodes[i].id+",";}$("#ids").val(ids);return true;}</script></head><body>//树的位置!<ul id="treeDemo" class="ztree"></ul><form action="${pageContext.request.contextPath}/ztree_saveDate.action" onsubmit="formSubmit()" method="post"><input type="hidden" id="ids" name="ids"><input type="submit" value="测试"></form></body></html>2.1取出数据的方法!public void getDate() throws Exception {StringBuilder sb=new StringBuilder();sb.append("[");//{id:"",pId:"",name:"",checked:""}sb.append("{id:1,pId:0,name:\"腾飞国际有限公司\",checked:\"true\"}").append(",");sb.append("{id:2,pId:1,name:\"秘书部\",checked:\"true\"}").append(",");sb.append("{id:5,pId:2,name:\"潘金莲\",checked:\"false\"}").append(",");sb.append("{id:6,pId:2,name:\"李洁\",checked:\"false\"}").append(",");sb.append("{id:7,pId:2,name:\"小泽阿姨\",checked:\"false\"}").append(",");sb.append("{id:3,pId:1,name:\"财政部\",checked:\"false\"}").append(",");sb.append("{id:8,pId:3,name:\"强豪\",checked:\"false\"}").append(",");sb.append("{id:9,pId:3,name:\"周强\",checked:\"false\"}").append(",");sb.append("{id:10,pId:3,name:\"严超威\",checked:\"false\"}").append(",");sb.append("{id:4,pId:1,name:\"行政部\",checked:\"false\"}");sb.append("]");HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("test/json;charset=UTF-8");response.setHeader("Cache-Control", "no-cache");response.getWriter().write(sb.toString());}2.2提交选中的idprivate String ids;public void setIds(String ids) {this.ids = ids;}public void saveDate() throws Exception {System.out.println(ids);}。
JqueryzTree使⽤说明1.导⼊所需的⽂件<script type="text/javascript" src="vendor/jquery/jquery-1.12.4.js"></script><link type="text/css" href="vendor/zTree/zTreeStyle.css" rel="stylesheet"/><script type="text/javascript" src="vendor/zTree/jquery.ztree.all.min.js"></script>2.建⽴HTML标签进⾏标记<ul id="treeDemo" class="ztree"></ul>3.在JavaScript中进⾏配置和初始化var zTreeObj;// zTree 的参数配置，深⼊使⽤请参考 API ⽂档（setting 配置详解）var setting = {callback: {beforeClick: beforeClick,onClick: treeNodeClick}};// zTree 的数据属性，深⼊使⽤请参考 API ⽂档（zTreeNode 节点数据详解）var zNodes = [{name: "学习", open: true, children: [{name: "jQuery",src: ""},{name: "cnblogs",src: ""}]},{name: "购物", open: false, children: [{name: "淘宝",src: ""},{name: "当当",src: ""}]}];// zTree 的函数编写点击前的事件，点击发⽣事件function beforeClick(treeId, treeNode, clickFlag) {alert(treeNode.src);//treeNode 就是所点击节点的详细信息}function treeNodeClick(event, treeId, treeNode, clickFlag) {alert(treeNode.src);//再此填写点击事件，可以通过不同的参数区分不同事件}$(document).ready(function() {zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});。
Ztree树使⽤详解0 zTree简介树形控件的使⽤是应⽤开发过程中必不可少的。
zTree 是⼀个依靠 jQuery 实现的多功能 “树插件”。
优异的性能、灵活的配置、多种功能的组合是 zTree 最⼤优点。
0.0 zTree的特点 ·最新版的zTree将核⼼代码按照功能进⾏了分割，不需要的代码可以不⽤加载，如普通使⽤只需要加载核⼼的jquery.ztree.core-3.5.js，需要使⽤勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使⽤编辑功能加载jquery.ztree.exedit-3.5.min.js·采⽤了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀·兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器·⽀持 JSON 数据·⽀持静态和 Ajax 异步加载节点数据·⽀持任意更换⽪肤 / ⾃定义图标（依靠css）·⽀持极其灵活的 checkbox 或 radio 选择功能·提供多种事件响应回调·灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽·在⼀个页⾯内可同时⽣成多个 Tree 实例·简单的参数配置实现，灵活多变的功能0.1 zTree⽂件介绍从zTree官⽹下载的zTree包括以下组成部分·metroStyle⽂件夹：zTree的metro风格样式相关⽂件（图⽚及css样式表）。
·zTreeStyle⽂件夹：zTree的标准风格样式⽂件夹（图⽚及css样式表）·js⽂件：zTree.all.js是完整的js库，可单纯加载此⽂件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进⾏的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。
∙
∙
zTree v3.5 Css分解与dom结构说明
点评：首先要强调的就是，制作 zTree 时一定要让 ul 容器设置 className：ztree；这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突;zTree 的 css 文件就是 zTreeStyle.css，其实这里面的 css 内容并不多，熟悉 css 的应该看起来还是挺容易的
首先要强调的就是，制作 zTree 时一定要让 ul 容器设置 className：ztree；这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突
马上要开始研究新版本的 zTree 结构了，所以要先把现在的情况再多分析一下，做了
v3.x 版本后也一直没有制作 css 的文档，特在此进行整理一下，一边讲结构，一边说说小技巧，希望能给大家一些帮助。
zTree 的 css 文件就是 zTreeStyle.css，其实这里面的 css 内容并不多，熟悉 css 的应该看起来还是挺容易的。
首先要强调的就是，制作 zTree 时一定要让 ul 容器设置 className：ztree；这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突；但 css 内容太多了，我不可能为了100%的避免冲突，就在 css 内把所有的 css 属性都设置一遍，如果这么做的话这个 css 就太臃肿了，基本上我我对常用的这几个属性进行了重新设定。
所以，如果当你使用 zTree 时出现了样式异常的话，就请用调试工具找到冲突的原因，然后将适用于zTree 的属性补充到 zTree 的 css 内即可。
同时，因为 zTree 的 css 都有 .ztree 做约束，所以一般情况下 zTree 的样式是不会引起页面上其他内容样式异常的。
了解 css 之前先看看 zTree 的 DOM 结构吧：
以上部分是 zTree 节点内 span 的基础样式
代码如下:
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; displa y: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachmen t: scroll;
background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/z TreeStandard.gif")}
以上部分是 zTree 节点 +/- 号、checkbox、radio、图标的基础样式
代码如下:
.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: a uto}
.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14p x}
.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42p x}
.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px} .ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px} .ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56p x}
.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14 px}
height 之间的差值，注意到这些细节，然后去调整就可以了，最后别忘了更换你的大图标的img 图标。
