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

来源：互联网发布：淘宝一千零一夜的老板编辑：程序博客网时间：2024/06/07 18:27

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

实现效果

这里写图片描述

阅读全文

0 0

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

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