引入js/css样式

<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css">

    <script src="<%=path%>/js/jquery-1.8.3.js"></script>

    <!--jquery.easyui.min.js包含了easyUI中的所有插件-->

    <script src="<%=path%>/js/jquery.easyui.min.js"></script>

编写script

<script>

        $(function(){

            $('#tree').tree({

                url:'basic_tree_data.json',        //远程加载tree数据的url路径

                animate:true,                 //是否开启动画效果

                checkbox:true,                 //是否显示复选框

                cascadeCheck:false,         //是否开启级联选中，checkbox属性为true时才生效

                onlyLeafCheck:true,         //是否只在叶节点前显示复选框，checkbox属性为true时才生效

                dnd:true,                     //是否启用拖拽功能

                onDblClick:function(node){     //鼠标双击事件

                    $(this).tree("toggle",node.target); //改变当前节点状态

                }

            });

        });

    </script>

编写body

<body>

    <h2>easy UI Tree</h2>

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

</body>

编写basic_tree_data.json

[{

    "id":1,

    "text":"功能菜单",

    "children":[{

        "id":11,

        "text":"投票管理",

        "children":[{

            "id":111,

            "text":"所有投票",

            "attributes":{

                "url":"findAll"

            },

            "iconCls":"icon-search"

        },{

            "id":112,

            "text":"发起投票",

            "iconCls":"icon-add"

        }]

    },

    {

        "id":12,

        "text":"用户管理",

        "state":"open",

        "children":[{

            "id":121,

            "text":"个人信息"

        },{

            "id":122,

            "text":"参与投票记录",

            "iconCls":"icon-search"

        },{

            "id":123,

            "text":"发起投票记录",

            "iconCls":"icon-search"

        }]

    },{

        "id":13,

        "text":"系统管理",

        "state":"open",

        "children":[{

            "id":131,

            "text":"系统日志"

        },{

            "id":132,

            "text":"数据字典"

        }]

    }]

}]

实现效果

easy_UI的更多相关文章

  1. easy_UI datagrid view数据格式化

    从数据库中提取的信息,有时候需要后期处理一下,easy_ui给了我们很好的一个方法,根据easy_ui生成datagridview的两种方式,下面用两种方式来格式化显示数据信息 1,通过脚本生成的da ...

  2. 操作Easy_UI案例以及模板

    操作easy_ui案例以及模板 https://pan.baidu.com/s/1dHfclwP  密码:jygk

  3. easy_UI 投票列表

    首先我们考虑一下在项目投票种用到的属性(ID,投票标题,备选项目,参与人数) entity package cn.entity; public class GridNode { private Lon ...

  4. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  5. 使用EasyUI设计.net项目的菜单数实例

    最近领导说我们之前的项目采用的菜单树模型过时了,现在采用EasyUI来设计了,于是学习了第三方资源库easyUI,发觉果然是好东西,这里给大家分享下. 首先到官网下载源文件,这个是开源的,都可以下再, ...

  6. 键盘控制div上下左右移动 (转)

    <html> <head> <title></title> <link rel="stylesheet" type=" ...

随机推荐

  1. ORACLE 11gR2 DG(Physical Standby)日常维护01

    环境:RHEL 6.4 + Oracle 11.2.0.4 一.主备手工切换 1.1 主库,切换成备库并启动到mount 1.2 备库,切换成主库并启动到open 1.3 新的备库启动日志应用 二.重 ...

  2. Java I/O and NIO [reproduced]

    Java I/O and NIO.2---Five ways to maximize Java NIO and NIO.2---Build more responsive Java applicati ...

  3. Java进击C#——应用开发之WinForm开发

    本章简言 上一章笔者介绍了关于WinForm环境.这一章笔者将继续讲WinForm.只不过更加的面向开发了.事实就是在学习工具箱里面的控件.对于WinForm开发来讲,企业对他的要求并没有那么高.但是 ...

  4. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  5. QT 删除文件指定目录

    bool deleteDir(const QString &dirName) { QDir directory(dirName); if (!directory.exists()) { ret ...

  6. asp.net mvc 上传文件

    转至:http://www.cnblogs.com/fonour/p/ajaxFileUpload.html 0.下载 http://files.cnblogs.com/files/fonour/aj ...

  7. hibernate.cfg.xml

    <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN&q ...

  8. Servlet数据缓存

    缓存是提高数据访问能力,降低服务器压力的一种必要的方式,今天我要说的数据缓存方式有两种,1-->session对单个数据访问接口页面的数据进行缓存,2-->单例模式对整个servlet页面 ...

  9. nginx添加 nginx_heath模块

    原因?为什么会使用nginx_heath 这个模块,主要是如nginx+tomcat部署的时,tomcat挂了之后nginx->upstream 轮询是可以踢掉挂掉的tomcat服务的,如果部署 ...

  10. java 的持久化和序列化的简单理解

    1.对象的持久化(Persistence) 对象持久化就是让对象的生存期超越使用对象的程序的运行期.将对象存储在可持久保存的存储介质上,在实际应用中,运用相应的对象持久化框架,将业务数据以对象的方式保 ...