EasyUI–树形控件tree详解

点此查看全部文字教程、视频教程、源代码

树形控件还是经常使用的，比如菜单、部门管理等涉及到有归属关系的功能经常在前端页面采用树形结构表示。

EasyUI对树形控件的封装非常的Nice，尤其是对复选框的支持简直是漂亮异常。本篇就最常用的菜单数为例演示EasyUI中tree的使用。

先看示意图：

具体代码如下，注意文字描述部分说明：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>树tree示例</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script></head><body><div class="easyui-panel" title="示例1 绑定json数据的树" style="width:480px;padding:10px 10px;"><div>注意json数据中的关键键名id/text/children/state，分别表示树节点的id值，显示文本、子节点组、节点状态（是否展开）</div><div>data-options参数url表示数据来源，animate表示是否采用展开和关闭节点时的动画效果，lines表示节点间是否采用节点线(更加美观)</div><div id="tree1" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,lines:true"></div><a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelected()">获取选中项</a></div><div class="easyui-panel" title="示例  带复选框的tree" style="width:480px;padding:10px 10px;"><div>注意checkbox:true启用后，功能非常强大</div><div>1,可以选择多个选项，并可以获取所有选中项信息</div><div>2,在父节点选中后，子节点会自动全选</div><div>3,子节点选中1个以上后，父节点会自动变为部分选中状态，子节点全部选中后，父节点变为选中状态</div><div id="tree_check" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,checkbox:true"></div><a href="javascript:void(0)" class="easyui-linkbutton" onclick="getChecked()">获取选中项</a></div><script type="text/javascript">function getSelected(){var node = $('#tree1').tree('getSelected');if (node){var id = node.id;var text=node.text;alert("id:"+id+" text:"+text);}}function getChecked(){var nodes = $('#tree_check').tree('getChecked');var result = '选中项：';for(var i=0; i<nodes.length; i++){result += nodes[i].id+","+nodes[i].text+"/";}alert(result);}</script></body>
</html>

最后，要理解tree_data.json文件中的层级关系，在MyEclipse中编辑json文件时，可以使用右键-【format text】功能自动给json格式化，这样会好看很多。

[{"id":1,"text":"所有功能","children":[{"id":11,"text":"人员管理","children":[{"id":111,"text":"添加人员"},{"id":112,"text":"删除人员"},{"id":113,"text":"修改人员信息"}]},{"id":12,"text":"部门管理","state":"closed","children":[{"id":121,"text":"添加部门"},{"id":122,"text":"删除部门"},{"id":123,"text":"Microsoft Office"},{"id":124,"text":"Games","checked":true}]},{"id":13,"text":"权限管理"},{"id":14,"text":"角色管理"},{"id":15,"text":"菜单管理"}]}
]

EasyUI–树形控件tree详解相关推荐

Qt QTreeWidget树形控件用法详解
文章目录 QTreeWidget控件的创建 QTreeWidget\QTreeView的关系和区别 QTreeWidgetItem类 QTreeWidget的实际应用 1) 添加结点 2) 给结点添加 ...
VS2010/MFC编程入门之三十（常用控件：树形控件Tree Control 上）
前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...
树形控件Tree Control
树形控件Tree Control 前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介树形控件在Windows系统 ...
android控件使用大全,Android常见控件使用详解
本文实例为大家分享了六种Android常见控件的使用方法,供大家参考,具体内容如下 1.TextView 主要用于界面上显示一段文本信息 2.Button 用于和用户交互的一个按钮控件 //为Butt ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
C#Winform的DataGridView控件使用详解2—DataGridView表格样式设置及表格操作
C#Winform的DataGridView控件使用详解2-DataGridView表格样式设置及表格操作 DataGridView表格样式设置 DataGridView行序号设置右键弹出控件表格操 ...
QT QLabel控件(使用详解)
本文详细的介绍了TextLabel控件的各种操作,例如:显示边框.设置文字.设置字体.设置信息提示框.状态提示.居中对齐.加载图片.自适应图片大小.设置位置大小.样式表等操作. 本文作者原创,转载请附 ...
QT QTabWidget 控件使用详解
本文详细的介绍了QTabWidget控件的各种操作,例如:新建界面.设置页面名字.设置提示信息.设置页面激活.设置标题栏位置.设置页面关闭按钮.设置页面关闭按钮.获取页面下标.获取页面总数.清空所有页 ...
VS2019/MFC编程入门：树形控件Tree Control 下
前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例.在内容开始前为大家介绍一款MFC界面 ...
VB6.0 ActiveX 控件开发详解 [第一章：创建工程]
前言在CSDN的VB论坛上,我总是能够看见有人这样问"有没有这样的控件,一个列表框,每一个项前面有一个按钮"(这是例子),又或者见到这样:"怎么样做一个ActiveX控 ...

EasyUI–树形控件tree详解

EasyUI–树形控件tree详解相关推荐

最新文章

热门文章