今天主要讲的是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>©沉山工作室版权所有,违权使用必究</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>
效果如下: