引入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. u-boot源码汇编段简要分析

    Hi,大家好!我是CrazyCatJack,你们可以叫我CCJ或者疯猫.今天我给大家带来的是u-boot的源代码汇编段分析,以后还会给大家讲解后续的C代码,请持续关注哦^_^ 先简单说一下u-boot ...

  2. java继承覆盖与向上转型，权限

    子类可以覆盖父类的非final成员变量和重写非final方法 private私有变量和方法只能在类的内部使用,因此子类继承的同时会被隐藏,相当于不继承 protected变量,子类可以继承调用 方法被 ...

  3. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  4. Asp.Net MVC 从数据库生成代码（包括页面）

    项目需要,数据库已经设计完成,需要生成相关的数据访问代码和页面. 参考:http://www.tracefact.net/asp-net/aspnetmvc-model-part1.aspx http ...

  5. C++_系列自学课程_第_12_课_语句_《C++ Primer 第四版》

    前面的文章说完了表达式和类型转换的部分内容,在我参考的书里面,接下来讨论的是各种语句,包括:顺序语句.声明语句.复合语句(块语句).语句作用域 .if语句.while语句.for语句.do...whi ...

  6. 【工匠大道】 svn命令自己总结

     本文地址   分享提纲: 1. svn 不常见单有用的命令 2. svn查看切换用户 1. svn自己总结的一些不常见,但有用的命令 1)[导出svn不带版本代码]导出不带svn版本控制的代码到本地 ...

  7. 单台机器配置redis多实例

    1.增加/usr/local/redis/etc中拷贝一份配置文件重新命名为redis6483.conf 2.编辑redis6483.conf daemonize yes  //以后台进程启动 pid ...

  8. Linux归档压缩、分区管理与LVM管理

    归档和压缩命令: 命令格式: gzip [-9] 文件名 bzip2 [-9] 文件名 gzip –d .gz格式的压缩文件 bzip2 –d .bz2格式的压缩文件 选项: -9:高压缩比,多用于压 ...

  9. struts2杂记(一)——使用doubleSelect

    一.前言 这段时间忙的要死,做项目,学框架,时间根本不够用,只能尽量抽出时间记录自己学过的东西. 1.1.doubleSelect 在之前学习中,我们使用过二级列表,相信很多人都理解其原理,在stru ...

  10. transformjs污染了DOM?是你不了解它的强大

    原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得tra ...