EasyUi02(tree前端工作)

m0_67294268

已于 2022-05-06 19:48:19 修改

阅读量213

点赞数

文章标签： easyui 前端 javascript

于 2022-05-06 19:46:00 首次发布

本文链接：https://blog.csdn.net/m0_67294268/article/details/124616905

版权

今天主要讲的是tree前端工作，主要运用了 1、tree控件 2、easyui图标 3、tabs控件

一、树 tree

属性：
id:
text:
state:"open"/"closed"
iconCls:'icon-user-home'
children:[子节点]
数据来自json
父节点
子节点

判断其是不是子节点 getChildren .length 后代

二、选项卡 tabs

判断其是否存在 exists 存在就让其选中 select 不存在就新增一个

三、easyui如何使用图标

更新icons图标库 icon.css

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入公共页面  包含 -->
<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据   
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json', //请求地址
			animate : true,//展开或者收缩节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text+" "+node.id+"  "+node.state);  // 在用户点击的时候提示
				//alert(node.iconCls);
				//判断是否是子节点
				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', { //  iconCls:'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: 85px; text-align: center;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 68px; 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="images/lb1.png" style="width: 100%; height: 100%;" />
			</div>

		</div>


	</div>
</body>

</html>

效果如下：

m0_67294268

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUi02(tree前端工作)

今天主要讲的是tree前端工作，主要运用了 1、tree控件 2、easyui图标 3、tabs控件一、树 tree属性：id:text:state:"open"/"closed"iconCls:'icon-user-home'children:[子节点]数据来自json父节点子节点判断其是不是子节点 getChildren .length 后代二、选项卡 tabs判断其是否存在 exists 存在就让其选中 select 不存在就新增一个三、...
复制链接

扫一扫