引入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. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  2. CRL快速开发框架开源完全转到Github

    CRL简介 CRL是一款面向对象的轻量级ORM框架,本着快速开发,使用简便的原则,设计为 无需关心数据库结构,CRL自动维护创建,即写即用(CRL内部有表结构检查机制,保证表结构一致性) 无需第三方工 ...

  3. Vertica集群扩容实验过程记录

    需求: 将3个节点的Vertica集群扩容,额外增加3个节点,即扩展到6个节点的Vertica集群. 实验环境: RHEL 6.5 + Vertica 7.2.2-2 步骤: 1.三节点Vertica ...

  4. 读书笔记--SQL必知必会13--创建高级联结

    13.1 使用表别名 SQL可以对列名.计算字段和表名起别名. 缩短SQL语句 允许在一条SELECT语句中多次使用相同的表. 注意:表别名只在查询执行中使用,不返回到客户端. MariaDB [sq ...

  5. php的laravel框架快速集成微信登录

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

  6. IDEA上安装和使用checkstyle,findbugs,visualVM,PMD插件

    ##安装插件步骤: 1.打开settings 2.选择plugins 3.点击"Browse repositories" 4.搜索对应内插件,点击"install&quo ...

  7. 如何在虚拟机安装桌面Ubuntu

    本篇仅为作业... 实验课程:Linux 实验机器:联想y410p 指导老师:刘臣奇 实验时间:2016年10月12日 学生学号:140815 姓名:杨文乾 一.新建一个虚拟机,按照之前建立虚拟机的步 ...

  8. DataTable的orderby有关问题

    在网上找了一个在后台重新对DataTable排序的方法(之所以不在数据库是因为我生成的是报表,写了存储过程用的表变量,order by也要用变量,死活拼不起来,sql能力没过关,动态sql也试了) s ...

  9. 一个Java文件至多包含一个公共类

    编写一个java源文件时,该源文件又称为编译单元.一个java文件可以包含多个类,但至多包含一个公共类,作为编译时该java文件的公用接口,公共类的名字和源文件的名字要相同,源文件名字的格式为[公共类 ...

  10. 高性能 TCP/UDP/HTTP 通信框架 HP-Socket v4.0.1

    HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/ ...