极客教程EasyUI jQuery树形部件
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个combootreegrid。 tree在网页中以树状结构显示分层数据
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-tree">
属性:
- url：一个用于检索远程数据的URL。
- method。检索数据的http方法。
- animate。定义当节点展开或折叠时是否显示动画效果。
- checkbox。定义是否在每个节点前显示复选框。
- cascadeCheck。定义是否进行级联检查。
- onlyLeafCheck。定义是否只在叶子结点前显示复选框。
- lines。定义是否显示树节点之间的线条。
- dnd。定义是否启用拖放功能。
- data。要加载的节点数据。
- queryParams。在请求远程数据时，将发送给服务器的额外参数。
- formatter。定义如何渲染节点的文本。
- filter。定义了如何过滤本地树数据。
- loader。定义了如何从远程服务器加载数据。
- loadFilter。返回要显示的过滤后的数据。
事件:
- onClick。当用户点击一个节点时发生火灾。
- onDblClick:当用户双击一个节点时发生火灾。
- onBeforeLoad。在加载数据的请求发出前启动
- onLoadSuccess” 当数据加载成功时发射。
- onLoadError。当数据加载失败时发生火灾。
- onBeforeExpand。在节点被展开之前触发。
- onExpand。当节点被展开时触发。
- onBeforeCollapse:在节点倒塌前触发。
- onCollapse。当节点被折叠时发生火灾。
- onBeforeCheck。在用户点击复选框之前启动。
- onCheck。当用户点击复选框时发生火灾。
- onBeforeSelect:在节点被选中前触发。
- onSelect。当节点被选中时发生火灾。
- onContextMenu。当节点被右键点击时启动。
- onBeforeDrag：当一个节点的拖动开始时启动。
- onStartDrag：开始拖动一个节点时触发。
- onStopDrag：在停止拖动一个节点后发射。
- onDragEnter:当一个节点被拖动进入某个可以被丢弃的目标节点时触发。
- onDragOver:当一个节点被拖动到某个可以被丢弃的目标节点上时发生。
- onDragLeave:当一个节点被拖动离开某个可以被丢弃的目标节点时触发。
- onBeforeDrop。在一个节点被丢弃之前触发，返回false以拒绝丢弃。
- onDrop。当一个节点被丢弃时发生火灾。
- onBeforeEdit：在编辑节点前发射。
- onAfterEdit：在编辑节点后发射。
- onCancelEdit：取消编辑动作时发生。
方法:
- options。返回树的选项。
- loadData。加载树的数据。
- getNode：获取指定的节点对象。
- getData：获取指定的节点数据，包括其子节点。
- reload。重新加载树的数据。
- getRoot。获取根节点
- getRoots。获取根节点
- getParent。获取父节点
- getChildren。获取子节点
- getChecked。获取被检查的节点。
- getSelected:获取选中的节点并返回。
- isLeaf。判断指定的节点是叶子。
- find：指定的节点并返回节点对象。
- findBy。通过字段查找指定的节点。
- select。选择一个节点。
- check; 设置指定的节点为checked。
- uncheck。将指定的节点设置为未选中。
- collapse。折叠一个节点。
- expand。。展开一个节点。
- collapseAll: 折叠所有的节点。
- expandAll：展开所有节点。
- expandTo。从根部扩展到指定的节点。
- scrollTo。滚动到指定的节点。
- append:将一些子节点追加到一个父节点上
- toggle。切换节点的扩展/折叠状态。
- insert: 在指定节点之前或之后插入一个节点。
- remove。删除一个节点和它的子节点。
- pop:弹出一个结点和它的子结点。
- update: 更新指定的节点。
- enableDnd。启用拖放功能。
- disableDnd:禁用拖放功能。
- beginEdit：开始编辑一个节点。
- endEdit：结束编辑一个节点。
- cancelEdit：取消编辑一个节点。
- doFilter:做过滤动作。
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript”src=”jquery.easyui.min.js”></script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”src=”jquery.easyui.mobile.js”></script>
示例 1:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').tree({
dnd: false,
animate: true
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>EasyUI jQuery tree widget</p>
<div class="easyui-panel" style="padding:5px">
<ul id='gfg'>
<li>
<span>GeeksforGeeks</span>
<ul>
<li data-options="state:'closed'">
<span>GfG1</span>
<ul>
<li>
<span>Geeks</span>
</li>
<li>
<span>for</span>
</li>
<li>
<span>Geeks</span>
</li>
</ul>
</li>
<li>
<span>Courses</span>
<ul>
<li>Self Placed</li>
<li>DSA</li>
<li>Web Development</li>
</ul>
</li>
<li>Geeks</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
输出:
