easyUI之tree前端实现

紧接上一篇博客easyUI入门，本篇博客通过借助api和demo来使用tree和tabs实现面板左部的树形菜单

一，tree控件的使用

参考demo中的basic.html样式，将树形菜单源码粘贴到菜单管理的div中

 树控件使用<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文件

先写一个测试的方法，看是否能访问到js文件

$(function(){
    alert(123);
})

同时需要在index.jsp界面引入js

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

运行结果如下，说明能访问到js文件

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

$(function(){
    $('#tt').tree({    
        url:'tree_data1.json'   
    }); 
})

 注意：url要与复制的josn文件一致，$()要与界面的id一致

运行如下

上面操作能代替之前的一大段HTML代码的原因：

1.tree方法是通过$.extends()拓展出来的

2.tree方法相当于$('#tt').append(" <li><span>File21</span></li> ");，即追加了很多li标签

二，tabs控件的使用

1.点击左侧显示右侧Tab

①给菜单添加点击事件

$('#tt').tree({ onClick: function(node){ alert(node.text); // 在用户点击的时候提示 } });

②调用Tabs选项卡打开对应的页面

新建两个jsp界面

修改tree_data1.json文件如下

 

选项卡打开

通过标签创建选项卡，将如下代码复制粘贴在内容的div中，记得将width和height设置为100%

<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">  </div> 

 选项卡对应的页面展示

修改：

<ul id="stuMenu"></ul> 

以及

$('#stuMenu').tree({    

注意：url要与复制的josn文件一致，$()要与界面的id一致

添加一个新的选项卡面板，方法如下

// add a new tab panel    
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});

 2.不能打开重复的Tab

 拿到目前所有打开的Tab选项卡，与将要打开的选项卡做对比exists

 存在true：不打开

不存在false：打开

var exists=$('#stuTabs').tabs('exists',node.text);

3.对于已经存在的Tab选项，被点击时应默认被选中

$('#stuTabs').tabs('select',node.text);

 添加select方法，后面的参数为标题

4.点击菜单，能够访问对应的页面，而非文字内容

content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    

 最后看看index.jsp的完整代码

$(function(){
    $('#stuMenu').tree({    
        url:'tree_data1.json' ,
        onClick:function(node){
//            判断当前选项卡是否存在
            var exists=$('#stuTabs').tabs('exists',node.text);
            if(exists){
                $('#stuTabs').tabs('select',node.text);
            }else{
                $('#stuTabs').tabs('add',{    
                    title:node.text,    
                    content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    
                    closable:true,    
                    tools:[{    
                        iconCls:'icon-mini-refresh',    
                        handler:function(){    
                            alert('refresh');    
                        }    
                    }]    
                }
                );    
            }
            
            }
    }); 
})

最后运行结果如下：