tree前端实现

一，tree控件的使用

思路：

               1、首先要在js文件专门建一个写js代码的file文件（index.js）

               2、将我们需要的tree-data1-json文件导入到web—content中

               3、最后新建两个要跳转的jsp界面来实现菜单点击效果。

  树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。

<div class="easyui-panel" style="padding:5px">
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li>
								<span>Friend</span>
							</li>
							<li>
								<span>Wife</span>
							</li>
							<li>
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
	</div>

 但使用上方代码会导致:

                                     1.样式不全

                                     2.不好做数据的渲染，树形结构的动态显示(重点)

为了改善以上缺陷，我们将树控件定义在一个空<ul>元素中并使用Javascript加载数据。

即使用下面一行代码代替上面的一段代码

<ul id="tt"></ul> 

 但是这只是一个空壳子，为了关联数据，我们还需要将tree目录下的文件复制粘贴到WebContent目录下，并与之将<ul id="tt"></ul> 关联起来

 

 为了将js代码与HTML代码分离，我们需要在js目录下建立index.js文件

在index.jsp界面引入js

<script type="text/javascript"
    src="${pageContext.request.contextPath }/static/js/index.js"></script>

 

 因为现在的ul标签里还没有li标签，因此还不会有值传入，于是我们需要在js方法中加入如下代码

 

二、关于tabs控件的使用：
               1、为了能实现效果，需要写如下代码：
                     思路：

                                   1、要给左栏菜单增加点击事件：

                                   2、要运用tabs组件打开相应的界面

                                   3、选项卡打开出现对应的界面

	<div data-options="region:'center',title:'内容摘要'"
		style="padding: 5px; background: #eee;">
		<div id="stuTabs" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div title="Tab1" style="padding: 20px; display: none;">tab1</div>
			<div title="Tab2" data-options="closable:true"
				style="overflow: auto; padding: 20px; display: none;">tab2</div>
			<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
				style="padding: 20px; display: none;">tab3</div>
		</div>
	</div>

js代码：

onClick : function(node) {
			// alert(node.text); // 在用户点击的时候提示
			var exists = $('#stuTabs').tabs('exists',node.text);
			if (exists) {
				$('#stuTabs').tabs('select',node.text);
			} else {
				$('#stuTabs').tabs('add', {
					title : node.text,
					content : node.text + 'Tab Body',
					closable : true,
					tools : [ {
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					} ]
				});
			}

效果：