您的位置：首页 > Web前端 > JQuery

Jquery EasyUI 使用tree（树形图） 和 tabs（选项卡）

2017-11-28 11:51 267 查看 
首先进行jquery 和EasyUI所需要的文件




在jsp页面中进行导入


<head>
<link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/themes/icon.css">
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.easyui.min.js"></script>
</head>


套用EasyUI自带的格式


<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
<ul class="easyui-tree" data-options="url:'http://localhost:8080/SSH11_17//api/tree',method:'get'"></ul>
<ul id="tree"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div id="tab" class="easyui-tabs" data-options="region:'center',title:'Center'">
<div title="首页" style="padding:10px">
<p style="font-size:14px">首页</p>
</div>
</div>
</body>


创建tree的bean
创建get，set方法


private Integer id;
private String text;
private String state;
private String iconCls;
private String url;
private Integer parentid;


dao层中实现


public List<Tree> find(Integer pid){

return (List<Tree>) hibernateTemplate.find("from Tree where parentid = ?", pid);

}


实现api接口


public String findTree() {
boolean flag =ActionContext.getContext().getParameters().containsKey("id");
list = new ArrayList<>();
if(!flag) {
id = 0;
}
System.out.println(id);
list = treeDao.find(id);
return SUCCESS;
}


public String findTree() {
boolean flag =ActionContext.getContext().getParameters().containsKey("id");
list = new ArrayList<>();
if(!flag) {
id = 0;
}
System.out.println(id);
list = treeDao.find(id);
return SUCCESS;
}


第一种方式就是运用直接调用class样式进行加载tree


<ul class="easyui-tree" data-options="url:'http://localhost:8080/SSH11_17//api/tree',method:'get'"></ul>


第二种方式 通过Jquery方式加载tree


<ul id="tree"></ul>

<script type="text/javascript">
$(function () {
$('#tree').tree({
url:'http://localhost:8080/SSH11_17//api/tree',
method:'GET',
});
</script>


进行tabs选项卡也可以进行两种方式 不需要实现接口

第一种 通过class样式加载


<class="easyui-tabs" data-options="region:'center',title:'Center'">
<div title="首页" style="padding:10px">
<p style="font-size:14px">首页</p>
</div>
</div>


第二种


<div id="tab" data-options="region:'center',title:'Center'">
<div title="首页" style="padding:10px">
<p style="font-size:14px">首页</p>
</div>
</div>


<script type="text/javascript">
$(function () {
$('#tree').tree({
url:'http://localhost:8080/SSH11_17//api/tree',
method:'GET',
onClick: function(node){ // 在用户点击的时候
//判断选项卡是否存在
var exist = $('#tab').tabs('exists', node.text);
/*  var select = $('#tab').tabs('getTab', node.text); */
//如果没有就添加
if (!exist) {
$('#tab').tabs('add',{
title:node.text,
content:node.text,
closable:true,

});
}else{
//如果存在就进行选中
$('#tab').tabs('select', node.text);
}
}
});
});
</script>


实现效果


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery easyui jsp
相关文章推荐
新的分享
章节导航