引入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. 存储程序(2)——MYSQL

    1.触发器 触发器是与特定数据表相关联的存储过程,当相应的数据表被INSERT.DELETE或UPDATE语句修改时,触发器将自动执行.触发器可以被设置成在这几种语句处理每个数据行之前或之后触发.触发 ...

  2. ES6之块级作用域

    一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1.  全局作用域: 2.  函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一 ...

  3. 使用WordPress搭建自己的博客

    突然间发现自己在阿里上有一个免费的虚拟云空间,好像是什么时候阿里云搞活动赠送的.看了看还有不少时间,就决定自己搭建一个博客系统.说到搭建自己的博客,第一时间就想到WordPress,这个用起来应该是最 ...

  4. 前端开发：面向对象与javascript中的面向对象实现（一）

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  5. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  6. C# - Networkcomms

    来自英国的用C#语言编写的开源的TCP/UDP网络通信框架,简单方便,性能稳定. 参考: NetworkComms官网:  NetworkComms通信框架中文网: 介绍开源的.net通信框架: Ne ...

  7. C语言计算字符串子串出现的次数

    #include<stdio.h>#include<string.h>int substring(char *str,char *str1);//函数原型int main(vo ...

  8. Java面试题整理一（侧重多线程并发）

    1..是否可以在static环境中访问非static变量? 答:static变量在Java中是属于类的,它在所有的实例中的值是一样的.当类被Java虚拟机载入的时候,会对static变量进行初始化.如 ...

  9. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  10. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...