EasyUI之树形菜单

EasyUI是用ul和li标签来完成树形结构的组合的，一个ul可视为父节点，li作为树形结构的子节点，而li标签里面嵌套的ul标签又可以作为父节点，不断的重复从而达到完成复杂树形结构的功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 必须引用的css文件 -->
<link rel="stylesheet" href="/static/js/easyui/themes/default.css"/>
<link rel="stylesheet" href="/static/css/module.css"/><!-- 引入公用js文件 -->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/easyui/jquery.easyui.min.js"></script>
<title>easyui tree的使用</title>
</head>
<body><ul class="easyui-tree"><li><span>红楼梦</span><ul><li>第1回  甄士隐梦幻识通灵   贾雨村风尘怀闺秀</li><li>第2回  贾夫人仙逝扬州城   冷子兴演说荣国府</li><li>第3回  托内兄如海荐西宾   接外孙贾母惜孤女</li><li>第4回  薄命女偏逢薄命郎   葫芦僧判断葫芦案</li><li>第5回  贾宝玉神游太虚境   警幻仙曲演红楼梦</li></ul></li><li><span>水浒传</span></li><li><span>三国演义</span><ul><li>第001回  宴桃园豪杰三结义 斩黄巾英雄首立功</li><li>第002回 张翼德怒鞭督邮 何国舅谋诛宦竖</li><li>第003回 议温明董卓叱丁原 馈金珠李肃说吕布</li><li>第004回 废汉帝陈留践位 谋董贼孟德献刀</li><li>第005回 发矫诏诸镇应曹公 破关兵三英战吕布</li></ul></li><li><span>西游记</span></li></ul>
</body>
</html>

这是一个最简单的树形结构图，你可以自由的修改嵌套的ul,li。下面的案例将展示如果从远程加载树形结构的节点。

<body><ul class="easyui-tree" id="tree" url="tree_data.json"></ul>
</body>

这里我省略掉了head标签头部的内容，因为这里面的内容和前一个案例一模一样的，本案例并没有额外的添加css,js文件和额外的js代码。你只需要加上你的url地址就行了，你的json数据定义应类似于：

[{"id":"1","text":"北京","children":[{"id":"2","text":"朝阳"},{"id":"6","text":"东城","children":[{"id":"8","text":"王府井"},{"id":"9","text":"西单"}]},{"id":"7","text":"西城"}]},{"id":"3","text":"天津"},{"id":"4","text":"上海" },{"id":"5","text":"深圳"}
]

我们首先把要展示的树形结构数据一次性准备好，在一对大括号[]里面包裹着我们想要展示的数据，节点用花括号{}以键值对的形式给出，id即为每个节点的id,text则为每个节点显示的文字。当然了，我知道这种一次性载入数据的方式是满足不了日常的工作的，那么接下来我们看这个案例是如果动态想节点添加子节点的。

<body><div style="margin-bottom: 10px;"><a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a></div><div style="width:200px;height:auto;border:1px solid #ccc;"><ul id="tt" class="easyui-tree" url="fruit_data.json"></ul></div>
</body>
<script type="text/javascript">function appendnodes() {var node = $("#tt").tree("getSelected");if(node) {var nodes = [{"id":"1","text":"pear"},{"id":"2","text":"grape"}];         $('#tt').tree('append', {parent:node.target,data:nodes});         }}
</script>

这个案例展示的是水果种类的树形图，加载的json字符串如下:

[{"id":0,"text":"Foods","children":[{"id":1,"text":"Fruits","children":[{"id":11,"text":"apple"},{"id":12,"text":"orange"}]},{"id":2,"text":"Vegetables","state":"closed","children":[{"id":21,"text":"tomato"},{"id":22,"text":"carrot"},{"id":23,"text":"cabbage"},{"id":24,"text":"potato"},{"id":25,"text":"lettuce"}]}]
}]

当你单击”添加节点”按钮，会触发appendnodes函数，该函数首先判断你是否选中了某一节点，如果没选中则不坐处理。若选中某一节点，则向该节点追加子节点。关键的代码语句是：

$('#tt').tree('append', {parent:node.target,data:nodes
});

这个案例虽然可以动态的追加节点，但是我知道还是满足不了你的日常工作的，你想要与后台交互。下面的是以Java为后台与EasyUi交互的例子。

<body><div style="margin-bottom: 10px;"><a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a></div><div style="width:300px;height:auto;border:1px solid #ccc;"><ul id="tt" class="easyui-tree" url="company_data.json"></ul></div>
</body>
<script type="text/javascript">function appendnodes() {var node = $("#tt").tree("getSelected");if(node) {$.get("/drill/demo/wellInfo/tree","key="+node.text,function(data,status,xhr){$("#tt").tree('append',{parent:node.target,data:data.rows});},"json");}}
</script>

    @RequestMapping(value="/tree", method={RequestMethod.GET})public PageInfo tree(HttpServletRequest request) {String key = request.getParameter("key");PageInfo pageInfo = new PageInfo();List<Map<String, String>> rows = new LinkedList<Map<String, String>>();Map<String, String> e = new HashMap<String, String>();e.put("id",  "1");e.put("text", key+"子公司1");rows.add(e);Map<String, String> e1 = new HashMap<String, String>();e1.put("id", "2");e1.put("text", key+"子公司2");rows.add(e1);       pageInfo.setRows(rows);pageInfo.setTotal(rows.size());return pageInfo;}

本例子的html代码与上一个例子的唯一区别就是多了一个$.get(url,data,callback,dataType)以ajax交互的代码而已，在ajax请求成功调用回显函数的时候再追加子节点到父节点上。当然，我的后台是通过Java的Spring MVC框架传递回来的，我这里并没有写@ResponseBody是因为在我的Controller类已经写了@RestCotroller注解了，如果你的Controller类没有该注解请在你的方法上添加@ResponseBody注解，这样Spring MVC会自动将你的返回的数据转换为json格式，而不是跳转到视图。
至于我封装的那个分页类，你也可以参考借鉴一下，毕竟这不是最重要的。

public class PageInfo<T> {private int pageNum;private int pageSize;private List<T> rows;private Page<T> page;public PageInfo() {super();}public PageInfo(int pageNum, int pageSize) {super();this.pageNum = pageNum;this.pageSize = pageSize;}public void startPage() {page = PageHelper.startPage(pageNum, pageSize);}public long getTotal() {return page.getTotal();}public void setTotal(long total) {if(page == null) {page = new Page<T>();}page.setTotal(total);}public List<T> getRows() {return rows;}public void setRows(List<T> rows) {this.rows = rows;}@JsonIgnorepublic int getPageNum() {return pageNum;}public void setPageNum(int pageNum) {this.pageNum = pageNum;}@JsonIgnorepublic int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}}

EasyUI之树形菜单相关推荐

EasyUI之树形菜单选项卡前端应用
tree树形控件树控件在web页面中一个将分层数据以树形结构进行显示.它提供用户展开.折叠.拖拽.编辑和异步加载等功能. 在树形控件中每个节点都具备以下属性: id:节点ID,对加载远程数据很重要. ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
easyUI前端框架的tree（树）前台展示（树形菜单二）——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自不怕报错就怕不报错的小猿猿的博客 easyUI前端框架的t ...
MVC +easyui +json 前后端交互动态生成树形菜单
效果图: 1.view端代码实现,引入jquery.easyui 的js文件,创建树形菜单标签<ul>,如下所示: @{ViewBag.Title = "Home Page&qu ...
php会计科目,ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
假设数据库中会计科目数据表的字段为:id,code,name,islast.分别为自增主键,科目编码,科目名称,是否为末级("1"表示末级科目). 这里在Thinkphp的模型层中 ...
easyui树形菜单实现
需求:读取路径配置中的相对路径获取对应的子文件夹及其子文件并形成树形结构,加载xml文件,输入搜索关键字匹配xml里面的value节点的值对应的contact值的集合并进行搜索例如:输入b,找到xm ...
zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html><head><meta char ...
zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号第一步:在页面显示菜单位置,添加 ul设置 class="ztree" 第二步:开启简单数据格式 ...

EasyUI之树形菜单

EasyUI之树形菜单相关推荐

最新文章

热门文章