easyui(tree树)

首先老样子先看思维导图：

所以我们分三个来讲：

一.tree控件的使用：当我们使用的tree控件的时候先要导入一个tree_data1.json的json文件然后在引用即可

代码如下：（注意路径）

//页面载入函数$(function() {//加载树的数据  ajax$('#myTree').tree({url : ctx + '/data/tree_data1.json', //请求地址})
}

效果：

二.easyui图标的使用

我们只需要在tree_data1.json你想加的地方加上一个键和值

代码如下：

[{"id": 1,"text": "My Documents","iconCls": "icon-heart","children": [{"id": 11,"text": "Photos","state": "closed","children": [{"id": 111,"iconCls": "icon-heart","text": "Friend"},{"id": 112,"iconCls": "icon-heart","text": "Wife"},{"id": 113,"iconCls": "icon-heart","text": "Company"}]},

效果如下：

三.tabs控件

这里做了判断当你有子节点的时候就不会增加你为选项卡是有而反之

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!--  //引入公共页面 -->
<%@ include file="common/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//页面载入函数$(function() {//加载树的数据  ajax$('#myTree').tree({url : ctx + '/data/tree_data1.json', //请求地址animate : true,//展开或者收缩节点显示动画效果onClick : function(node) {//节点=对象//alert(node.text); // 在用户双击的时候提示//判断是否是子节点var nodes = $('#myTree').tree('getChildren',node.target); // get checked nodes//alert(nodes.length)if(nodes.length==0){//说明没有子节点//判断选项卡是否存在var f = $('#myTab').tabs('exists', node.text); // 获取选择的面板if (!f) {//说明不存在//就新增一个选项卡$('#myTab').tabs('add', { //icon-mini-refresh title : node.text, //标题content : node.text, //內容 closable : true, //是否可以关闭iconCls:node.iconCls//图标});} else {//存在就让其对应选中$('#myTab').tabs('select', node.text);}}}});})
</script></head>
<body class="easyui-layout"><div data-options="region:'north',split:true"style="height: 100px; text-align: center; background:"><h1>书籍后台管理${ctx}</h1></div><div data-options="region:'south',split:true"style="height: 70px; text-align: center;"><h4>&copy;沉山工作室版权所有，维权使用必究</h4></div><div data-options="region:'west',title:'功能导航',split:true"style="width: 150px;"><!-- 左侧tree控件 --><ul id="myTree" class="easyui-tree"></ul></div><div data-options="region:'center'"style="padding: 5px; background: #fff;"><!-- 中間的tabs控件 --><div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;"><div  data-options="iconCls:'icon-user-home'" title="首頁" style="padding: 10px; display: none;"><img src="data:images/lb4.jpeg" style="width: 100%; height: 100%;" /></div></div>
</body></html>

效果如下：

easyui(tree树)相关推荐

php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
数据库树形结构，EasyUI Tree 树
通过 $.fn.tree.defaults 重写默认的 defaults. 树(tree)在网页中以树形结构显示分层数据.它向用户提供展开.折叠.拖拽.编辑和异步加载功能. 树的数据格式(Tree D ...
【EasyUI tree】Python 异步菜单树的实现
加载效果如果使用 EasyUI tree 加载10000+项菜单项,全部加载出来耗时10s+,改为异步后,瞬间加载完成,极大提升用户体验.下图小圆圈是正在加载的菜单项效果. Easyui tree ...
java easyui tree例子_EasyUI Tree的简单使用
此前写过zTree插件的demo,没有记录下来,这次记录一下EasyUI的Tree. 实现效果:获取数据库表的数据,以树结构的形式展示出来. 树结构数据分为同步加载和异步加载,同步加载就是初始化加载时 ...
EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是方法2:官方文档中: ...
easyUI tree 多选框设置是否级联选中
问题 easyUI的tree树前默认带有多选框级联选中,造成很多麻烦: 如,勾选子节点时,父节点也被选中解决方案加入cascadeCheck:false 属性,取消默认级联关系 $('#tt'). ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面...
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
easyUI tree 自定义图标
文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...
jquery easyui Tree API
Query EasyUI API 中文文档 - Tree树使用介绍,需要的朋友可以参考下. 用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppa ...

easyui(tree树)

首先老样子先看思维导图：

所以我们分三个来讲：

一.tree控件的使用：当我们使用的tree控件的时候先要导入一个tree_data1.json的json文件然后在引用即可

二.easyui图标的使用

三.tabs控件

easyui(tree树)相关推荐

最新文章

热门文章