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

最新推荐文章于 2021-09-16 20:08:39 发布

junyi0107

最新推荐文章于 2021-09-16 20:08:39 发布

阅读量1.7k

点赞数

文章标签： jquery easyui jsp

本文链接：https://blog.csdn.net/junyi0107/article/details/78653311

版权

首先进行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>