jQuery EasyUI学习二

1.   课程介绍

• 1.  Datagrid组件（掌握）
• 2.  Dialog、form组件（掌握）
• 3. Layout、Tabs;（掌握）

1. Datagrid组件

2.1.  部署运行pss启动无错

2.1.1.   记得打勾

2.1.2.   修改server.xml

2.2.  修改datagrid.jsp集成easyui

2.2.1.     拷贝原来easyui1 webapp下面的easyui文件夹

2.2.2.     拷贝原来easyui1 webapp下面的common.jsp里面的内容到datagrid.jsp

2.2.3.     先写linkbutton，看有无效果

2.3.  修改execute方法变成分页查询

2.3.1.   原来的代码没有分页

// 专门返回json数据

// 应该是发出一个ajax请求 http://localhost/datagrid_json.action

public String json() throws Exception {

// <param name="root">#map</param>

// 只拿前10条

putContext("map", employeeService.getAll().subList(0, 10));

// <result name="json" type="json">

return "json";

}

2.3.2.   今天的代码有分页

@Controller

@Scope("prototype")

public class DatagridAction extends BaseAction {

@Autowired

private IEmployeeService employeeService;

// 没有提供getter，setter方法

private EmployeeQuery baseQuery = new EmployeeQuery();

// 显示一个页面，不添加数据

// http://localhost/datagrid.action

@Override

public String execute() throws Exception {

return SUCCESS;

}

// 专门返回json数据

// 应该是发出一个ajax请求 http://localhost/datagrid_json.action

public String json() throws Exception {

// <param name="root">#map</param>

PageList<Employee> pageList = employeeService.findPageByQuery(baseQuery);

putContext("map", pageList);

// <result name="json" type="json">

return "json";

}

public EmployeeQuery getBaseQuery() {

return baseQuery;

}

public void setBaseQuery(EmployeeQuery baseQuery) {

this.baseQuery = baseQuery;

}

}

2.4.  处理输出的json数据

http://localhost:8080/datagrid_json.action

2.4.1.   输出多余的数据

2.4.2.   减少json数据输出

如果输出的json数据比较少，提高访问性能

对一些easyui datagrid不需要的属性进行不输出：只需要2个属性total,rows

在Employee标注注解

@JSON(serialize = false)//roles属性json不输出

public Set<Role> getRoles() {

return roles;

}

在PageList标注注解

@JSON(serialize = false)   很多属性都不输出

public int getTotalPage()

@JSON(name = "rows")     改名

public List getData() {

@JSON(name = "total")     改名

public int getTotalCount() {

2.4.3.   只输出需要的数据

2.5.  修改datagrid.jsp显示json数据

直接从

http://localhost:8888/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=

2.5.1.   拷贝datagrid的代码替换刚才linkbutton

<table id="dg" title="员工管理" class="easyui-datagrid" fit="true"

style="width: 700px; height: 250px" url="/datagrid_json.action"

toolbar="#toolbar" pagination="true" rownumbers="true"

fitColumns="true" singleSelect="true">

<thead>

<tr>

<th field="id" width="50">编号</th>

<th field="username" width="50">用户名</th>

<th field="password" width="50">密码</th>

<th field="age" width="50">年龄</th>

<th field="email" width="50">Email</th>

<th field="headImage" width="50">头像</th>

<th field="department" width="50">部门名称</th>

</tr>

</thead>

</table>

2.5.2.         显示效果

2.6.  进行数据格式化-和原来自定义插件写的代码类似

2.6.1.   原来自定义插件代码

2.6.2.   怎样看easyui的文档来处理部门，头像的效果

2.6.3.   今天的代码

function ageFormat(value,row,index) {

//              单元格formatter(格式化器)函数，带3个参数：

//              value：字段值。

//              row：行记录数据。

//              index: 行索引。

//              console.debug(value);

//              console.debug(row);

//              console.debug(index);

return value < 30 ? '<font color="red">' + value + '</font>' : value;

}

2.6.4.   效果

2.7.  处理分页

2.7.1.   分析

json数据中已经输出了总的记录条

第一次提交参数：没有分页条件，默认提交

page   1

rows   10

第二次提交参数，手动改变切换到第二页

page   2

rows   10

2.7.2.   结论

page==baseQuery.currentPage,当前页码

rows=baseQuery.pageSize，一页显示的条数

2.7.3.   修改DatagridAction

添加easyui兼容代码,getter,setter

private int page=1;

private int rows=10;

public String json() throws Exception {

baseQuery.setCurrentPage(page);

baseQuery.setPageSize(rows);

PageList pageList = employeeService.findByQuery(baseQuery);

putContext("map", pageList);

return "jsonResult";// 不能返回页面，只能返回json视图===jsonResult

}

2.8.  datagrid组件常用属性

<script type="text/javascript">

//会自动由easyui注入3个参数

// value当前列的值,row行的json数据,index索引

function deptFormat(value, row, index) {

//     console.debug(value);

//     console.debug(row);

//     console.debug(index);

return value ? value.name : "";

}

function imageFormat(value, row, index) {

return value ? "<img src='"+value+"'/>" : "没有头像";

}

function ageFormat(value, row, index) {

return value < 30 ? "<font color='red'>" + value + "</font>" : value;

}

</script>

<title>Insert title here</title>

</head>

<body>

<!-- url="ajax方式获取json数据" -->

<!-- pagination="true"显示分页条 -->

<!-- rownumbers="true" 显示行号，数据的索引号 -->

<!-- fitColumns="true" 列占满-->

<!-- singleSelect="true"只能选择一行 -->

<!-- pageSize : 每页显示多少条数据; 默认值10-->

<!-- pageList array 在设置分页属性的时候 初始化页面大小选择列表。 [10,20,30,40,50],pageList="[10,20,50]"  -->

<!-- width="10"，如果值是一样的，平分datagrid的宽度，最右边预留滚动条的宽度，如果此值比其他小，少占点宽度 -->

<!-- formatter,对列进行格式化输出，值写的是函数名称或者匿名函数 -->

<!-- 在那个列添加sortable="true"，额外提交2个参数， 1.order         desc,asc;2.sort:age -->

<!-- hidden boolean 如果为true，则隐藏列,但是在row行json存在id的·  -->

<table id="dg" title="员工管理" class="easyui-datagrid" fit="true"

url="/datagrid_json.action" toolbar="#toolbar" pagination="true"

rownumbers="true" fitColumns="true" singleSelect="true">

<thead>

<tr>

<th field="id" width="10" hidden="true">编号</th>

<th field="username" width="50">用户名</th>

<th field="password" width="50">密码</th>

<th field="age" formatter="ageFormat" width="50" sortable="true">年龄</th>

<th field="email" width="50">Email</th>

<th field="headImage" formatter="imageFormat" width="50">头像</th>

<th field="department" formatter="deptFormat" width="50">部门名称</th>

</tr>

</thead>

</table>

2.9.  处理datagrid上面工具条

<table toolbar="#toolbar"

不要把下面的div放到table的内部，放到外部

<div id="toolbar">

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="addEmployee()">添加</a>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="editEmployee()">修改</a>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteEmployee()">删除</a>

</div>

function addEmployee() {

console.debug("add");

}

function editEmployee() {

console.debug("edit");

}

function deleteEmployee() {

console.debug("delete");

}

1. 删除功能

3.1.  后台

// 从datagrid页面发出的ajax请求：删除方法,单个对象{},集合[{},{}]

public String delete() throws Exception {

Map<String, Object> map = new HashMap<String, Object>();

try {

employeeService.delete(id);

map.put("success", true);

} catch (Exception e) {

map.put("success", false);

map.put("msg", "异常：" + e.getMessage());

}

putContext("map", map);

return "json";// 不能返回页面，只能返回json视图===json

}

3.2.  前台

function deleteEmployee() {

console.debug("delete");

//调用datagrid组件的getSelected方法当前选中的只是一行

//getSelections none 返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。

//getSelected none 返回第一个被选中的行或如果没有选中的行则返回null。

var row = $('#dg').datagrid('getSelected');

if (!row) {//没有选中

//提示信息

//                       $.messager.show({

//                                title : '提示信息',

//                                msg : '删除前必须选择一行',

//                                showType : 'fade',

//                                style : {

//                                         right : '',

//                                         bottom : ''

//                                }

//                       });

$.messager.alert('提示信息','删除前必须选择一行!','info');

return;

}

//row代表选中行的json数据

console.debug(row);

$.get("/datagrid_delete.action?id="+row.id,function(data){

if(data.success){//删除成功

//重新加载datagrid:调用datagrid组件的reload方法

//reload param 重载行。等同于'load'方法，但是它将保持在当前页。

$('#dg').datagrid('reload');//类似于原来的$("#domainFrom").submit()

}else{//删除失败

$.messager.alert('错误提示',data.msg,'error');

}

});

}

1. 新增保存

4.1.  弹出对话框

modal="true" 定义是否将窗体显示为模式化窗口

<div id="dlg" class="easyui-dialog" style="width: 350px" closed="true"

buttons="#dlg-buttons">

<form id="fm" method="post" novalidate

style="margin: 0; padding: 20px 50px">

<input type="hidden" name="id">

<div

style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">员工信息</div>

<table>

<tr>

<td>用户名：</td>

<td><input name="username" class="easyui-textbox"

required="true" style="width: 100%"></td>

</tr>

<tr>

<td>密码：</td>

<td><input name="password" class="easyui-textbox"

required="true" style="width: 100%"></td>

</tr>

<tr>

<td>年龄：</td>

<td><input name="age" class="easyui-textbox" required="true"

style="width: 100%"></td>

</tr>

<tr>

<td>邮箱：</td>

<td><input name="email" class="easyui-textbox" data-options="validType:'email'"

style="width: 100%"></td>

</tr>

</table>

</form>

</div>

<div id="dlg-buttons">

<a href="javascript:void(0)" class="easyui-linkbutton c6"

iconCls="icon-ok" onclick="saveEmployee()" style="width: 90px">保存</a> <a

href="javascript:void(0)" class="easyui-linkbutton c8"

iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"

style="width: 90px">取消</a>

</div>

4.2.  后台

// 从datagrid页面发出的ajax请求：保存方法

public String save() throws Exception {

Map<String, Object> map = new HashMap<String, Object>();

try {

employeeService.saveOrUpdate(employee);

map.put("success", true);

} catch (Exception e) {

map.put("success", false);

map.put("msg", "异常：" + e.getMessage());

}

putContext("map", map);

return "jsonResult";// 不能返回页面，只能返回json视图===jsonResult

}

// 不需要prepareInput方法，因为不做页面跳转,不做页面回显，前台回显：xxxForm.form('load',rows);

// public void prepareInput() throws Exception {

// }

// java.lang.IllegalArgumentException: attempt to create saveOrUpdate event

// with null entity

// 没有employee = new Employee();

public void prepareSave() throws Exception {

if (id == null) {

employee = new Employee();

} else {

employee = employeeService.get(id);//修改的时候防止数据丢失的

}

}

//显示添加页面

function addEmployee() {

console.debug("add");

//先把对话框里面的表单清空

$('#fm').form('clear');

//弹出一个对话框,修改对话框的标题

$('#dlg').dialog('open').dialog('setTitle','添加员工');

}

4.3.  修改保存

4.3.1.   前台js

//显示回显，修改页面

function editEmployee() {

console.debug("edit");

var row = $('#dg').datagrid('getSelected');

if (!row) {//没有选中

$.messager.alert('提示信息', '修改前必须选择一行!', 'info');

return;

}

//row代表选中行的json数据

console.debug(row);

//先把对话框里面的表单清空

$('#fm').form('clear');

//读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型row，如果是字符串则作为远程URL，否则作为本地记录。

$('#fm').form('load',row);

//弹出一个对话框,修改对话框的标题

$('#dlg').dialog('open').dialog('setTitle','修改员工');

}

4.3.2.   后台action

public void prepareSave() throws Exception {

if (id == null) {// 处理新增

employee = new Employee();// 实例化，把employee放到栈顶

} else {// 处理保存

employee = employeeService.get(id);// 实现数据不丢失

}

}

4.4.  easyui内置验证插件

4.4.1.   单独写属性

class="easyui-validatebox" required="true" validType="email"

使用data-options

class="easyui-validatebox" data-options="required:true,validType:'email'"

必填+email格式

4.4.2.   源码分析

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

$.map(['validatebox','textbox','passwordbox','filebox','searchbox',

'combo','combobox','combogrid','combotree',

'datebox','datetimebox','numberbox',

'spinner','numberspinner','timespinner','datetimespinner'], function(plugin){

if ($.fn[plugin]){

$.fn[plugin].defaults.missingMessage = '该输入项为必输项';

}

});

if ($.fn.validatebox){

$.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址';

$.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址';

$.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间';

$.fn.validatebox.defaults.rules.remote.message = '请修正该字段';

}}

1. 显示easyui的后台主页

5.1.  效果

5.2.  Main2Action

/**

*

* easyui后台主页

*

*/

@Controller

@Scope("prototype")

public class Main2Action extends BaseAction {

// 显示后台主页

@Override

public String execute() throws Exception {

return SUCCESS;

}

}

5.3.  struts.xml

<action name="main2_*" class="main2Action" method="{1}">

<result>/WEB-INF/views/main2.jsp</result>

</action>

5.4.  页面

1. 实现全屏 <div class="easyui-layout" fit="true">
2. 实现全屏 <body class="easyui-layout">

<body class="easyui-layout">

<div data-options="region:'north'" style="height: 50px">1北，图片logo</div>

<div data-options="region:'south',split:true" style="height: 50px;">2南，底部，公司版权信息</div>

<div data-options="region:'east',split:true" title="East"

style="width: 180px;">3东，一般不要</div>

<div data-options="region:'west',split:true" title="West"

style="width: 150px;">4西，菜单</div>

<div

data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

5，中，主体内容</div>

</body>

5.5.  显示左侧菜单

5.5.1.   显示静态菜单

拷贝easyui1项目里面11.组件三要素-事件.jsp案例部分内容

并且拷贝json文本文件：tree.text

5.5.2.   后台

@Autowired

private IMenuService menuService;

// 从后台主页发出ajax请求，获取菜单的json数据

public String menu() throws Exception {

Employee employee = (Employee) ActionContext.getContext().getSession().get(USER_IN_SESSION);

List<Menu> list = menuService.findByLoginUserId(getId());

putContext("map", list);

return "json";

}

5.5.3.         Menu.java

@JSON(serialize = false)

public Menu getParent() {

@JSON(name = "iconCls")

public String getIcon() {

@JSON(name = "text")

public String getName() {       必须重启电脑

5.5.4.   显示动态菜单

5.6.  使用iframe显示点击页面的内容

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 默认easyui主题样式 -->

<link rel="stylesheet" type="text/css"

href="easyui/themes/default/easyui.css">

<!-- 图标样式 -->

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<!-- 颜色的样式 -->

<link rel="stylesheet" type="text/css" href="easyui/themes/color.css">

<!-- 必须先引入jQuery的核心js -->

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<!-- 在引入easyui的核心js：只需要引入一个就ok -->

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<!-- 最后引入easyui的国际化的js-->

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

$(function() {

$('#menu')

.tree(

{

animate : true,

url : 'main2_menu.action',

onClick : function(node) {

// 在用户点击的时候提示

//alert(node.text);

var url = node.url;

if (url) {

//点击node的名称

var text = node.text;

//location.href = url;

//exists which 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。

if ($('#tt').tabs('exists', text)) {

//显示点击的选项卡

//select which 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。

$('#tt').tabs('select', text)

} else {

//增加选项卡

$('#tt')

.tabs(

'add',

{

title : text,

//content: '<div class="easyui-panel" style="padding:10px" href="'+url+'">Content</div>',只能加载body的内容

content : '<iframe src="'

+ url

+ '" frameborder="0" style="width:99%;height:99.5%"></iframe>',

closable : true

});

}

}

}

});

});

</script>

<title>xxxCRM项目小组</title>

</head>

<body class="easyui-layout">

<div data-options="region:'north'" style="height: 80px">北:logo标记</div>

<div data-options="region:'south',split:true" style="height: 50px;">南，底部，公司认证信息</div>

<div data-options="region:'east',split:true" title="East"

style="width: 100px;">东，信息提示</div>

<div data-options="region:'west',split:true" title="West"

style="width: 130px;">

西，菜单

<ul id="menu"></ul>

</div>

<div data-options="region:'center'">

<div id="tt" class="easyui-tabs" fit="true">

<div title="主体" style="padding: 10px">

<p style="font-size: 14px">jQuery EasyUI framework helps you

build your web pages easily.</p>

<ul>

<li>easyui is a collection of user-interface plugin based on

jQuery.</li>

<li>easyui provides essential functionality for building

modem, interactive, javascript applications.</li>

<li>using easyui you don't need to write many javascript code,

you usually defines user-interface by writing some HTML markup.</li>

<li>complete framework for HTML5 web page.</li>

<li>easyui save your time and scales while developing your

products.</li>

<li>easyui is very easy but powerful.</li>

</ul>

</div>

</div>

</div>

</body>

</html>

1. 处理员工部门

6.1.  后台的Action添加方法

注入部门service

public String deptTree() throws Exception {

// <param name="root">#map</param>

putContext("map", departmentService.getAll());

// 必须返回json视图

// <result name="json" type="json">

return "json";

}

6.2.  页面下拉列表

<!--                                              valueField: 'id'传递到后台的值, textField: 'text',页面看到的内容 -->

<input id="deptCombobox"  class="easyui-combobox" name="department.id"

data-options="

url:'datagrid_deptTree.action',

valueField: 'id',

textField: 'name'

">

6.3.  回显editEmployee

//表单里面的名称是department.id，row行json里面也有row.department.id

//row:{"age":11,"department":{"id":2,"name":"采购部"},"email":"","id":108,"password":"11","username":"111155"}

//额外处理下拉列表

if(row.department){//如果原来有部门

//row["department.id"]=row.department.id;

$('#deptCombobox').combobox('setValue', row.department.id);

}

6.4.  prepareSave

public void prepareSave() throws Exception {

if (id == null) {

employee = new Employee();

} else {

employee = employeeService.get(id);//修改的时候防止数据丢失的

employee.setDepartment(null);

}

}

6.5.  Save方法

public String save() throws Exception {

Map<String, Object> map = new HashMap<String, Object>();

map.put("success", false);

try {

System.err.println(employee.getDepartment());// not null

System.err.println(employee.getDepartment().getId());// null

Department department = employee.getDepartment();

if (department != null && department.getId() == null) {

employee.setDepartment(null);

}

employeeService.save(employee);

map.put("success", true);

map.put("msg", "保存成功");

} catch (Exception e) {

map.put("msg", "保存出现异常:" + e.getMessage());

}

// <result name="json" type="json">

putContext("map", map);

return "json";// 返回json视图

}

1. 已经学习那些组件

panel，linkbutton，tree(标准的json字符串，兼容easyui：text，iconCls，children)

dialog，datagrid，form

layout，tabs

1. 课程总结

8.1.  重点

1. Datagrid crud+分页
2. Easyui后台主页

8.2.  难点

1. Js的大小写敏感的问题，json格式问题(如最后不能写,)
2. 常见异常
3. {"msg":"保存出现异常:Target object must not be null; nested exception is java.lang.IllegalArgumentException: Target object must not be null","success":false}

如果在进行修改的时候

public void prepareSave() throws Exception {

if (id == null) {// 处理新增

employee = new Employee();// 实例化，把employee放到栈顶

} else {// 处理保存

employee = employeeService.get(id);// 实现数据不丢失

}

}