目录
前言
这里使用的easyUI是easyUI for jQuery,并且介绍最常用的使用
easyUI的官方有相应的文档,http://www.jeasyui.net/plugins
如果学过jquery,参照文档即可上手
easyUI的基本使用介绍
easyUI的目录结构
themes里都是css样式文件
主要需要引入easyUI和jquery,因为我们现在使用的是jquery开发的easyUI
还需要加入一些常用的css
引入easyUI的js和css
顺序不能反了,jquery一定要在jquery-easyUI的前面引入
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
使用easyUI的2种常用方式
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").linkbutton({
iconCls: 'icon-search'
});
})
</script>
</head>
<div>
<%--方式一,直接css的方式--%>
<a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">方式1</a>
<%--方式二,利用js的方式 --%>
<a id="btn" href="#">方式2</a>
</div>
</html>动态添加选项卡
点击左边的标签就弹出右边的框
为标签绑定添加事件
<%--折叠面板控件--%>
<div id="aa" class="easyui-accordion" data-options="fit:'true',selected:0" style="width:300px;height:200px;">
<%--每增加一个div就是一个折叠面板--%>
<div title="面板1" style="overflow:auto;padding:10px;">
<a id="but1" href="#">系统管理</a>
<script>
//页面加载完毕就绑定
$(function () {
$("#but1").click(function () {
//调用tabs对象的add方法
$("#mytabs").tabs("add",{
title:'系统管理',
content:'xxx' //内容,后面这里写链接
});
});
})
</script>
</div>
<div title="面板2" style="overflow:auto;padding:10px;">
<a id="but2">点击2</a>
</div>
</div>tab面板的代码,注释掉的是静态添加tab面板
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<%--选项卡控件--%>
<div id="mytabs" class="easyui-tabs" style="width:100%;height:100%;">
<%--每增加一个div就是一个选项卡--%>
<%--<div title="Tab1" style="padding:20px;display:none;">--%>
<%--tab1--%>
<%--</div>--%>
</div>
</div>
多次点击问题
我们点多少次,就弹出了多个选项卡,而我们通常只想要一个
在官方文档了有一个exists可以用来判断
完善js代码
<script>
//页面加载完毕就绑定
$(function () {
$("#but1").click(function () {
//判断"系统管理"选项卡是否存在,可以根据索引,title
var exist = $("#mytabs").tabs("exists", "系统管理")
if (exist)
{
//已存在,直接选中
$("#mytabs").tabs("select","系统管理")
}else
{
//调用tabs对象的add方法
$("#mytabs").tabs("add", {
title: '系统管理',
content: 'xxx' //内容,后面这里写链接
});
}
});
})
</script>构造ztree树形结构
引入树形插件,需要网上下载
http://www.treejs.cn/v3/api.php
官方自带了使用文档
引入css和js
初始化init方法
官方文档里说了创建ztree必须要使用初始化init方法
zNodes是json数据,children为子节点
$.fn.zTree.init 是必须要使用的方法
<div title="面板2" style="overflow:auto;" data-options="selected:true">
<%--使用标准json构造ztree--%>
<a id="ztree1" class="ztree"></a>
<script>
$(function () {
var setting={};
var zNodes=[
{"name":"节点1"},
{"name":"节点2","children":[{"name":"子节点1"},{"name":"子节点2"}]},
{"name":"节点3"}
]
// 第一个参数是对象,第二个参数是setting,第三个参数是zNodes,也就是节点
$.fn.zTree.init($("#ztree1"),setting,zNodes)
});
</script>
</div>接收后台传来的json构建树形结构
json数据一般都是后台传过来的
但是后台传过来的数据并没有这么复杂,一般都是key value结构,再加一个children,这样的json构造太复杂
所以还需要格式化一下ztree所能接收的json格式
注意pId不是pid,中间的I要大写
<script>
$(function () {
var setting={
data:{
simpleData:{
enable:true //使用简单json数据结构ztree节点
}
}
};
var zNodes=[
//注意pId不是pid,中间的I要大写
{"id":"1","pId":"0","name":"节点"},
{"id":"2","pId":"1","name":"子节点"},
{"id":"3","pId":"2","name":"子子节点"},
]
// 第一个参数是对象,第二个参数是setting,第三个参数是zNodes,也就是节点
$.fn.zTree.init($("#ztree1"),setting,zNodes)
});
</script>使用ajax请求json结构树形结构
一般来说,这种json其实是不放在数据库的,只是这里做演示,所以从后台请求数据
且数据库的字段必须和上面一样
页面的修改
<script>
$(function () {
var setting={
data:{
simpleData:{
enable:true //使用简单json数据结构ztree节点
}
}
};
//使用ajax请求数据
var url="${pageContext.request.contextPath}/menuAction_findNode.action";
$.post(url,{},function (data) {
$.fn.zTree.init($("#ztree1"),setting,data)
},"json")
});
</script>dao层
@Repository
public class MeunDaoImp extends HibernateDaoSupport implements MenuDao
{
//注入sessionFactory,因为我们现在是注解开发,并没有把SessionFactory注入进来
@Autowired
public void setMySessionFactory(SessionFactory sessionFactory)
{
this.setSessionFactory(sessionFactory);
}
public List<Menu> findNode()
{
String hql="FROM Menu";
List<Menu>list=(List<Menu>)this.getHibernateTemplate().find(hql);
return list;
}
}action层
@Controller
@Scope("prototype")
public class MenuAction extends ActionSupport
{
@Resource
private MenuService menuService;
public String findNode() throws IOException
{
List<Menu>list=menuService.findNode();
JSONArray myjson=JSONArray.fromObject(list);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().write(myjson.toString());
return null;
}
}为树形节点动态绑定选项卡
<script>
$(function () {
var setting={
data:{
simpleData:{
enable:true //使用简单json数据结构ztree节点
}
},
callback:{
//为ztree节点绑定单机事件
onClick:function (event,treeId,treeNode) {
//判断是否是根节点
if (treeNode.action!=undefined)
{
//判断是否已绑定
var e=$("#mytabs").tabs("exists",treeNode.name);
if (e)
{
//已经存在,选中
$("#mytabs").tabs("select",treeNode.name)
}else
{
$("#mytabs").tabs("add", {
title: treeNode.name,
content:"<iframe frameborder='0' width='100%' height='100%' src="+treeNode.action+"></iframe>"
});
}
}
}
}
};
//使用ajax请求数据
var url="${pageContext.request.contextPath}/menuAction_findNode.action";
$.post(url,{},function (data) {
$.fn.zTree.init($("#ztree1"),setting,data)
},"json")
});
</script>easyUI的表单验证和校验扩展
http://www.jeasyui.net/demo/419.html
http://www.jeasyui.net/plugins/167.html
去搜一个正则或者自写
^ : 限定开始位置 => 本身不占位置
$ : 限定结束位置 => 本身不占位置
2个/代表是正则
应用规则
DataGrid的使用
DataGrid为数据表格,是一个非常重要的组件
url是请求的链接,
<%--把静态html渲染为datagrid样式--%>
<table data-options="url:'datagrid_data.json'" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
</table>请求的json数据
[
{"id":"001","name":"啊啊","age":100},
{"id":"002","name":"呵呵","age":5},
{"id":"003","name":"哈哈","age":20}
]动态创建datagrid
注意columns我们用了2个括号,具体原因看下面
<table id="mytables"></table>
<script>
$(function () {
$("#mytables").datagrid(
{
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'名字',field:'name'},
{title:'年龄',field:'age'}
]],
url:'datagrid_data.json'
}
)
});
</script>改造json,之前的json是直接一个数组,里面每个元素都是json数据
现在是类似map的标准json,key,value结构,而rows是key,value是一个json数组,所以需要用2个[]号
{
"total":123,
"rows":[
{"id":"001","name":"啊啊","age":100},
{"id":"002","name":"呵呵","age":5},
{"id":"003","name":"哈哈","age":20}
]
}加强datagrid
下面所有的属性都能在easyUI里的datagrid文档找到
注意,toobar和rownumbers是一个级别的,所以如果后面还要加属性,必须在toolbar的后面加上逗号
<script>
$(function () {
$("#mytables").datagrid(
{
columns: [[
{title: '编号', field: 'id', checkbox: true},
{title: '名字', field: 'name'},
{title: '年龄', field: 'age'}
]],
url: 'datagrid_data.json',
rownumbers: true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
alert("add..");
}
},
{text:'删除',iconCls:'icon-remove'}
],
//显示分页栏
pagination:true,
}
)
});
</script>页面加载并请求数据的时候会加上这2个参数,一个是当前页,一个是一页显示多少条数据
回显数据
