引入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. php的laravel框架快速集成微信登录

    最终的解决方案是:https://github.com/liuyunzhuge/php_weixin_provider,详细的介绍请往下阅读. 本文面向的是php语言laravel框架的用户,介绍的是 ...

  2. 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(五)

    (五)注册Website Cloud 1 注册Website Cloud 添加Website Cloud   连接Website Cloud 注意, endpoint 是使用Management Se ...

  3. 笔记：解决VS2015 不能加载.edmx 的解决方案

    1. 首先你要安装 VS2015镜像中的packages->EFTools文件(最后拷贝出来,因为发现直接运行其下的EFTools.msi文件安装会有问题),然后安装里面的EFTools.msi ...

  4. 是时候 UWP 了 !

    什么是 UWP? 很多程序员都有一个梦想:希望自己开发的软件能够轻而易举的在所有平台上运行,而不是把同样的需求,用不同的技术.工具重新开发才能够运行在所有平台上.这就是跨平台,很多软件从业者都在为这个 ...

  5. nginx反向代理下thinkphp、php获取不到正确的外网ip

    在记录用户发送短信需要获取用户ip时,tp一直获取的是内网ip:10.10.10.10 tp框架获取ip方法:get_client_ip /** * 获取客户端IP地址 * @param intege ...

  6. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  7. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. Spring in Action 学习笔记三-AOP

    面向切面的Spring 2015年10月9日 11:30             屏幕剪辑的捕获时间: 2015-10-9 14:30             屏幕剪辑的捕获时间: 2015-10-9 ...

  10. Atitit.日志系统slf4j的使用

    Atitit.日志系统slf4j的使用 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar ...