EasyUI
easyui使用
1.簡介(實現)
封裝大量的jQuery插件(簡化ajax，jquery，css樣式，布局)
（1）插件實現:
① HTML標簽+插件的class樣式
我是講
② HTML標簽+基于編程的插件實現
我是洪
js代碼： $("#btn").linkbutton();
（2）插件內容：
屬性：設置插件的樣式，圖標，寬度，高度
事件：單擊事件，雙擊
方法：修改插件屬性，狀態
2.搭建easyUI環境、實現第一個esayUI插件
（1）搭建EasyUI的環境
資源文件介紹：
搭建環境的步驟：
① 導入需要的css樣式文件：easyui.css、icon.css
② 導入相關的js文件
jquery.min.js
jquery.easyui.min.js
jquery.easyui-lang-zh_CN.js
③ 注意：themes中的文件相對路徑不能變
（2）第一個插件
插件：按鈕(linkbutton)
實現插件效果標準開發步驟[記住]
標簽： 按鈕
樣式名(規范)： easyui-樣式名
實例：
① 方式一：按鈕
② 方式二：js插件名(調用插件方法)
$("選中超鏈接").插件名();
$("a").linkbutton();
3.easyUI的屬性、事件、方法(重要)
HTML標簽+樣式：
HTML標簽+編程插件方法：
（1）屬性
基于標簽規范：
<標簽 class="easyui-樣式名" data-options="屬性名:值,屬性名:值"> </標簽>
基于編程的規范：
<標簽 id="tag"></標簽>
$("#tag").插件名( {
屬性名:值,
屬性名:值,
} );
（2）事件
基于標簽的規范:
<標簽 class="easyui-樣式名" data-options="屬性名:值,屬性名:值, 事件名:事件函數名"></標簽>
基于編程的方式:
<標簽 id="tag"></標簽>
$("#tag").插件名({
屬性名:值,
事件名:事件函數名，
事件名:function(){
}
});
（3）方法
調用模板：$("標簽").easyui插件('方法名',方法傳入的參數);
例如:
$("a").linkbutton('resize',{300,height:100});
4.easyUI面板(panel)、窗口(window)、對話框(dialog)
（1）面板·Panel （使用div）
效果:
基于標簽: HTML標簽+easyui-樣式名:
class樣式名: easyui-panel
基于編程:$("").插件方法();
插件方法: $("div").panel();
示例代碼:
（2）窗口·window （使用div）
樣式名： easyui-window
插件方法名：$("div").window()
重要:
window繼承panel, panel的屬性、事件、方法都可以在window中使用
示例代碼：
（3）對話框·dialog （使用div）
樣式名： easyui-dialog
插件方法名：$("div").dialog()
示例代碼：
5.easyUI消息框(messager:消息框、提示框、確認框)
① 消息框
$.messager.show({
屬性名:值,
屬性名:值
});
② 提示框
$.messager.alert({
屬性名:值,
屬性名:值
});
③ 確認框
$.messager.confirm({
屬性名:值,
屬性名:值
});
示例代碼
① 消息框
② 提示框
③ 確認框
6.Form表單輸入框相關(搜索等)、Form表單相關(重要:自動將數據加載到表單實例、登錄實例)
（1）Form表單元素相關
① 文本輸入框·textbox + 搜索
HTML標簽： input:text
easyui插件： $("input").textbox();
搜索：如果是搜索輸入框時：提交時的方法為onClickButton方法
$(“按鈕組 選中搜索的選擇器”).textbox({
prompt : “輸入名字搜索”,
buttonText : “搜索”,
buttonIcon : “icon-search”,
onClickButton : function() {
//獲取搜索文本內容提交
}
});
② 數字輸入框·numberbox
HTML標簽： input:text
easyui插件： $("input").numberbox();
③ 日期輸入框·datebox
標簽： input:text
easyui插件: $('input').datebox()
④ 文件選擇框·filebox
標簽：input:text
easyui插件：$("input").filebox()
（2）form表單[重要]
① 屬性: 參考api
② 事件:
$("form").form({
onSubmit:function(){ //表單提交之前，運行
//return false; //禁用表單提交
//return true; //允許提交表單
},
success:function(str){ //表單提交完畢，且服務器正常響應回瀏覽器后，執行
//str參數，是服務器響應給瀏覽器的json字符串數據
var msg = JSON.parse(str);
}
});
③ 方法:
交表單的方法：$("from").form("submit");//默認異步請求，且只有表單符合驗證要求才提交數據
清空表單方法：$("form").form("clear");//清空表單數據
將數據填充在表單中：
a：將js的json對象數據直接填充在表單中
注意： 要求：json對象中屬性名必須和表單控件的name值保持一致
$("form").form('load',{json對象的數據});
b: 將控制器url響應回的對象的js串格式數據，轉化為js對象，自動添沖表單中。
注意： 要求：響應的json對象中屬性名必須和表單控件的name值保持一致
$("form").form('load',"響應json數據的控制器的uri");
實例(自動將對象屬性加載到表單中)：
實例：
7.數據表格(datagrid:基本使用手冊、展示表格數據)
（1）基本使用手冊：更多需要查看api文檔
（2）展示數據
① html標簽：
| ID | 名字 | 性別 | 年齡 | 手機號 | 地址 | 操作 |
|---|
② easyui插件方法：$("#dg").datagrid();
③ 使用屬性設置屬性對應(以圖書展示為例)：
<body>
8.數據表格(datagrid:添加、(批量)刪除、修改、分頁、排序操作)
（1）添加：div 里面有form表單
① 準備一個添加的 dialog：標題+寬度+遮罩+默認關閉+按鈕+內部form表單
② 準備一個添加按鈕，綁定事件：顯示添加的dialog
③ 提交表單
④ 提交完畢執行seccess函數：
清空form
關閉dialog
刷新datagrid（reload）
顯示執行結果
（2）刪除(批量刪除)
a. 單個刪除：
① 傳遞數據id
② ajax發送刪除請求
③ 執行成功，刷新當前datagrid，重新加載數據
④ 提示執行結果
b. 批量刪除：
① 獲得所有被選中的行數據的所有id
② 發送ajax請求，提交所有的id值
③ 刪除成功之后，刷新datagrid數據
④ 提示執行結果
（3）修改
a. 顯示修改
① 根據id獲得對應數據，并填充在表單中
② 顯示表單
b. 修改
① 提交表單數據
② success成功后關閉dialog
③ 刷新datagrid數據
④ 提示執行結果
（4）分頁
Map<String, Object> map = new HashMap<String, Object>(); //封裝分頁所需要的對象
map.put("total", total); //total為long類型
map.put("rows", list); //list為分頁后的list ，將map轉化json對象響應
（5）排序
9.下拉框(combobox:單選、多選)、標簽欄(tabs)
（1）下拉框
①
② $(“選擇器”).combobox( {} );
（2）tabs
10.樹(tree)
（1）以html方式創建tree
（2）url動態加載tree的每個節點
① tree指定一個屬性：url
② 要求服務器端響應的數據
a. 數據必須是相應成數組形式的數據
b. 每個節點信息屬性要求
id屬性：
text屬性： 節點顯示的文本.
children屬性: 子節點信息 ( {id text children} )
例如:
[
{id:"1000"，text:"圖書", children: [{id:"10001",text:"小說"},{id:"10002",text:"計算機圖書"}] },
{id:"2000"，text:"電子產品"},
{id:"3000"，text:"衣服"},
]
③ 通過標簽引用url響應的結果，填充在tree中
$("#tree").tree({
url:"響應tree需要的數據的控制器路徑uri"
});
使用：
① 節點事件
② 加載對象及節點屬性
節點屬性：
11.手風琴(accordion)、布局(layout)
（1）手風琴 accordion
① html標簽
區域1 區域2
② easyui插件名：$("外部div").accordion();
（2）布局 layout
效果：
使用：
插件名easyui-layout
上
下
左
右
中
## 12.實戰：layout、accordion、tree、tabs、datagrid等綜合使用
項目說明：使用tree顯示圖書分類二級標題(節點)，點擊分類標題，將該類node.id傳入要加載該類下的圖書的信息的jsp頁面(用${param.categoryId}接收)，然后將頁面使用tabs加載過來，如圖：
處理代碼：
① 實體：響應TreeNode實體所對應的json對象，tree插件接收后會自動對結果加載顯示
public class TreeNode {
//屬性名必須寫tree控件定義好的key
private int id; //節點ID，對加載遠程數據很重要
private String text; //顯示節點文本
private String state="open"; //節點狀態(展開與否)，'open' 或 'closed'，默認：'open'
private boolean checked; //表示該節點是否被選中
private Map attributes; //被添加到節點的自定義屬性
private List children; //一個節點數組聲明了若干節點，第二級分類列表
有無參構造、getters、setters省略
}
控制器：方法返回值為List轉化的json對象
② 前端：layout布局的jsp頁面代碼(要引入easyUI樣式)
</head>
<body class="easyui-layout"> <!—布局-->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true"> <!—手風琴-->
<div title="Title" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
<ul id="categoryTree"></ul>
</div>
<div title="Title2">
other…
</div>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="myTab"> <!—tabs-->
<div title="歡迎頁" style="padding:20px;" data-options="closable:true">
歡迎使用頁面
</div>
</div>
</div>
</body>
③ 前端：接收分類id，并將數據加載到datagrid中的展示頁面
<head>
<script type="text/javascript">
$(function(){
$("#myDatagrid").datagrid({
url:"getBookByCategory",
queryParams:{"categoryid":${param.id}},
pagination:true,
title:"圖書列表",
columns:[[
{title:"編號",field:"bookId"},
{title:"名字",field:"bookName"},
{title:"價格",field:"bookPrice"},
{title:"出版時間",field:"bookDate"}
]]
});
});
</script>
</head>
<body>
<table id="myDatagrid"></table>
</body>總結
- 上一篇： 用python爬虫抓站的一些技巧总结
- 下一篇： Jersey框架简介