jQuery EasyUI學習二

時間 2019-11-14

標籤 jquery easyui 學習欄目 JQuery 简体版

原文原文鏈接

1. 課程介紹

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

Datagrid組件

2.1. 部署運行pss啓動無錯javascript

2.1.1. 記得打勾php

2.1.2. 修改server.xmlcss

2.2. 修改datagrid.jsp集成easyuihtml

2.2.1. 拷貝原來easyui1 webapp下面的easyui文件夾java

2.2.2. 拷貝原來easyui1 webapp下面的common.jsp裏面的內容到datagrid.jspnode

2.2.3. 先寫linkbutton，看有無效果jquery

2.3. 修改execute方法變成分頁查詢web

2.3.1. 原來的代碼沒有分頁ajax

// 專門返回json數據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="email" width="50">Email</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組件經常使用屬性

//會自動由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>

<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="email" width="50">Email</th>

</tr>

</thead>

</table>

2.9. 處理datagrid上面工具條

<table toolbar="#toolbar"

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

</div>

function addEmployee() {

console.debug("add");

}

function editEmployee() {

console.debug("edit");

}

function deleteEmployee() {

console.debug("delete");

}

刪除功能

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');

}

});

}

新增保存

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">

<div

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

<table>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

</table>

</form>

</div>

<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. 源碼分析

$.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 = '請修正該字段';

}}

顯示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

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

</action>

5.4. 頁面

實現全屏 <div class="easyui-layout" fit="true">
實現全屏 <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>

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

$(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>

<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;">

西，菜單

</div>

<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>

</body>

</html>

處理員工部門

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. 頁面下拉列表

<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視圖

}

已經學習那些組件

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

dialog，datagrid，form

layout，tabs

課程總結

8.1. 重點

Datagrid crud+分頁
Easyui後臺主頁

8.2. 難點

Js的大小寫敏感的問題，json格式問題(如最後不能寫,)
常見異常
{"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);// 實現數據不丟失

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。