1基本拖放... 4
2構建購物車型拖放... 5
3建立課程表... 8
4選單和按鈕Menu and Button. 10

o 4.1建立簡單選單... 10

o 4.2建立連線按鈕... 11

o 4.3建立選單按鈕... 12

o 4.4建立拆分按鈕... 13

5建立邊框版面網頁... 15

o 5.1皮膚上的複合版面... 16

o 5.2建立可摺疊版面... 17

o 5.3建立TABS. 18

o 5.4動態新增tabs. 19

o 5.5建立XP式樣左皮膚... 20

6 DataGrid 資料格... 23

o 6.1 轉換HTML表格到DataGrid. 23

o 6.2 給DataGrid新增分頁... 25

o 6.3 得到DataGrid選擇行... 27

o 6.4 新增工具欄到DataGrid. 28

o 6.5 DataGrid凍結列... 30

o 6.6 動態改變DataGrid列... 31

o 6.7 格式化DataGrid列... 32

o 6.8 新增排序到DataGrid. 33

o 6.9 在DataGrid上的核取方塊... 36

o 6.10 自定義DataGrid分頁... 37

o 6.11使DataGrid能編輯... 38

o 6.12 DataGrid中合併單元格... 41

7 視窗... 44

o 7.1 我第一個視窗... 44

o 7.2 自定義視窗工具... 45

o 7.3 Window和Layout 46

o 7.4 建立對話方塊... 47

8 Tree. 50
8.1從標記建立tree. 51
8.2建立非同步Tree. 52
8.3 新增節點... 55
8.4 建立帶有checkbox節點的tree. 57
9 表單... 58

o 9.1 Ajax方式傳送表單... 58

o 9.2 給表單新增複合tree欄位... 59

o 9.3 驗證表單... 62

10 Documentation文件... 65

o 10.1 Base. 65

§ 10.1.1 EasyLoader 66

§ 10.1.2 Draggable. 67

§ 10.1.3 Droppable. 69

§ 10.1.4 Resizable. 70

o 10.2 layout 71

§ 10.2.1 Panel 71

§ 10.2.2 tabs 76

§ 10.2.3 accordion. 79

§ 10.2.4 layout 82

o 10.3 Menu and button. 83

o 10.4 form.. 88

o 10.5 window.. 101

o 10.6 Datagrid and tree. 107

概述

這個教程的目的是說明如何使用easyui框架容易的建立網頁。首先，你需要包含一些js和css檔案：

easyui預定義了一些圖示css，這些css類可以顯示圖片背景（16×16）。使用這些類之前，需要包含：

· 1基本拖放

這個教程顯示如何使HTML元素變得可拖放。這個例子會建立3個DIV元素然後讓它們變得可拖放。

首先，建立三個DIV元素：

讓第一個DIV元素可拖放，使用預設的拖放樣式。

$('#dd1').draggable();

讓第二個DIV元素使用proxy來拖放，proxy:'clone'表示proxy使用原始元素的複製。

$('#dd2').draggable({

proxy:'clone'

});

讓第三個DIV元素使用自定義proxy來拖放

$('#dd3').draggable({

proxy:function(source){

var p = $('<div class="proxy">proxy</div>');

p.appendTo('body');

return p;

}

});

· 2構建購物車型拖放

使用jQuery easyui，我們在web應用中就有了拖放的能力。這個教程顯示瞭如何構建購物車頁，它使使用者拖放他們希望購買的產品，更新購物籃的物品和價格。

顯示產品頁：

<li>

<div>

<p>Balloon</p>

<p>Price:$25</p>

</div>

</a>

</li>

<li>

<div>

<p>Feeling</p>

<p>Price:$25</p>

</div>

</a>

</li>

</ul>

ul元素包含一些li元素以顯示產品。每一個產品的名稱和單價屬性在P元素中。

建立購物車：

<h1>Shopping Cart</h1>

<thead>

<tr>

<th field="quantity" width=60 align="right">Quantity</th>

<th field="price" width=60 align="right">Price</th>

</tr>

</thead>

</table>

<p class="total">Total: $0</p>

</div>

使用datagrid顯示購物籃專案。

拖曳產品副本

$('.item').draggable({

revert:true,

proxy:'clone',

onStartDrag:function(){

$(this).draggable('options').cursor = 'not-allowed';

$(this).draggable('proxy').css('z-index',10);

},

onStopDrag:function(){

$(this).draggable('options').cursor='move';

}

});

我們設定draggable屬性proxy為clone，所以拖曳元素使用clone效果。

將選擇的產品放入購物車

$('.cart').droppable({

onDragEnter:function(e,source){

$(source).draggable('options').cursor='auto';

},

onDragLeave:function(e,source){

$(source).draggable('options').cursor='not-allowed';

},

onDrop:function(e,source){

var name = $(source).find('p:eq(0)').html();

var price = $(source).find('p:eq(1)').html();

addProduct(name, parseFloat(price.split('$')[1]));

}

});

var data = {"total":0,"rows":[]};

var totalCost = 0;

function addProduct(name,price){

function add(){

for(var i=0; i<data.total; i++){

var row = data.rows[i];

if (row.name == name){

row.quantity += 1;

return;

}

data.total += 1;

data.rows.push({

name:name,

quantity:1,

price:price

});

}

add();

totalCost += price;

$('#cartcontent').datagrid('loadData', data);

$('div.cart .total').html('Total: $'+totalCost);

}

當放下產品時，我們得到產品的名稱和單價，然後呼叫addProduct函式更新購物籃。

· 3建立課程表

本教程顯示瞭如何使用jQuery easyui建立課程表。我們建立兩個表：在左面的課程列表和右面的時間表。你可以拖課程到時間表的單元格中。課程是<div class='item'>元素，時間格是<td class='drop'>元素。

顯示課程

<table>

<tr>

<td><div class="item">English</div></td>

</tr>

<tr>

<td><div class="item">Science</div></td>

</tr>

</table>

</div>

顯示時間表

<table>

<tr>

<td class="title">Monday</td>

<td class="title">Tuesday</td>

<td class="title">Wednesday</td>

<td class="title">Thursday</td>

<td class="title">Friday</td>

</tr>

<tr>

</tr>

</table>

</div>

拖動左面的課程

$('.left .item').draggable({

revert:true,

proxy:'clone'

});

放置課程到時間表中

$('.right td.drop').droppable({

onDragEnter:function(){

$(this).addClass('over');

},

onDragLeave:function(){

$(this).removeClass('over');

},

onDrop:function(e,source){

$(this).removeClass('over');

if ($(source).hasClass('assigned')){

$(this).append(source);

} else {

var c = $(source).clone().addClass('assigned');

$(this).empty().append(c);

c.draggable({

revert:true

});

}

});

當使用者拖動左面的課程到右面的時間表中，onDrop函式被呼叫。源元素的副本被從左面拖動並且附加到到時間表的單元格中。當放置課程到時間表的單元格到另一個單元格時，簡單的移動它。

· 4選單和按鈕Menu and Button

4.1建立簡單選單
4.2建立連結按鈕
4.3建立選單按鈕
4.4建立分割按鈕

o 4.1建立簡單選單

在DIV標記中定義選單。像這樣：

<div id="mm" style="width:120px;">

    <div onclick="javascript:alert('new')">New</div>

    <div>

        <span>Open</span>

        <div style="width:150px;">

            <div><b>Word</b></div>

            <div>Excel</div>

            <div>PowerPoint</div>

        </div>

    </div>

    <div icon="icon-save">Save</div>

    <div class="menu-sep"></div>

    <div>Exit</div>

</div>

建立選單，你需要執行下列jQuery程式碼

$('#mm').menu();

//或者 $('#mm').menu(options);

當選單被建立時是不可見的，可使用show方法顯示或者hide方法隱藏：

$('#mm').menu('show', {

  left: 200,

  top: 100

});

現在，我們建立選單並在（200,100）處顯示。執行程式碼會得到：

o 4.2建立連線按鈕

通常使用<button>元素建立按鈕。連結按鈕使用A元素建立，事實上，連結按鈕是A元素但顯示為按鈕樣式。

建立連結按鈕，首先建立A元素：

<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>

<a href="#" class="easyui-linkbutton" icon="icon-reload">Refresh</a>

<a href="#" class="easyui-linkbutton" icon="icon-search">Query</a>

<a href="#" class="easyui-linkbutton">text button</a>

<a href="#" class="easyui-linkbutton" icon="icon-print">Print</a>

</div>

<a href="#" class="easyui-linkbutton" plain="true" icon="icon-cancel">Cancel</a>

<a href="#" class="easyui-linkbutton" plain="true" icon="icon-reload">Refresh</a>

<a href="#" class="easyui-linkbutton" plain="true" icon="icon-search">Query</a>

<a href="#" class="easyui-linkbutton" plain="true">text button</a>

<a href="#" class="easyui-linkbutton" plain="true" icon="icon-print">Print</a>

</div>

icon屬性是icon CSS類是在按鈕上顯示的圖示。執行程式碼，出現：

一些時候，你可以決定禁用或者不禁用連線按鈕，使用下面的程式碼可以禁用連線圖示：

$(selector).linkbutton({disabled:true});

o 4.3建立選單按鈕

選單按鈕包含按鈕和選單兩部分，當點選或者移動滑鼠到按鈕上的時候，顯示相應的選單。定義選單按鈕，需要定義連結按鈕和選單，像這樣：

</div>

<div>Paste</div>

<div icon="icon-remove">Delete</div>

<div>Select All</div>

</div>

<div>Update</div>

<div>About</div>

</div>

使用下列jQuery程式碼：

$('#mb1').menubutton({menu:'#mm1'});

$('#mb2').menubutton({menu:'#mm2'});

現在，選單按鈕就完成了。

o 4.4建立拆分按鈕

拆分按鈕包括連結按鈕和選單。當使用者點選或者懸停在下箭頭區域時顯示相關選單。這個例子是建立拆分按鈕的演示：

首先，建立一個連結按鈕和選單標記：

</div>

<div>Paste</div>

<div>

<div>Firefox</div>

<div>Internet Explorer</div>

<div>Select Program...</div>

</div>

<div icon="icon-remove">Delete</div>

<div>Select All</div>

</div>

jQuery 程式碼：

$('#sb').splitbutton({menu:'#mm'});

執行後會出現：

版面

建立邊框版面
皮膚上的複合版面
建立可摺疊版面
建立TABS
動態新增TABS
建立XP樣式左皮膚

· 5建立邊框版面網頁

邊框版面提供5個區域：東西南北中（其實就是上下左右中），下面是通常用法：

5.1北區可以用於網站banner
5.2南區可以用於版權資訊和註釋
5.3西區可以用於導航選單
5.4東區可以用於推廣專案
5.5中區可以用於主內容

運用版面，需要確認版面容器然後定義一些區域。版面至少要有一箇中間區域。下列是版面例子：

<p style="padding:5px;margin:0;">Select language:</p>

<ul>

<li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>

</ul>

</div>

</div>

我們使用DIV容器建立邊框版面。版面拆分容器為2部分，左面是導航選單右面是主內容。中間區域的皮膚，我們設定href屬性以呼叫出示網頁。

執行layout.html的結果是：

寫下onclick事件控制函式以獲取資料，showpage函式非常簡單：

function showpage(url){

$('#content').load(url);

}

o 5.1皮膚上的複合版面

皮膚允許你建立為多使用者定製版面。這個例子我們建立MSN資訊框，通過皮膚版面外掛：

我們使用多種版面在皮膚區域中。最上面的資訊框我們放置搜尋input，也可以放置頭像在右面。中間區域我們差分成兩部分通過split屬性為TRUE，允許使用者改變皮膚上區域的大小：

程式碼：

<div class="easyui-panel" title="Complex Panel Layout" icon="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">

    <div class="easyui-layout" fit="true">

        <div region="north" border="false" class="p-search">

            <label>Search:</label><input></input>

        </div>

        <div region="center" border="false">

            <div class="easyui-layout" fit="true">

                <div region="east" border="false" class="p-right">

                    <img src="msn.gif"/>

                </div>

                <div region="center" border="false" style="border:1px solid #ccc;">

                    <div class="easyui-layout" fit="true">

                        <div region="south" split="true" border="false" style="height:60px;">

                            <textarea style="overflow:auto;border:0;width:100%;height:100%;">Hi,I am easyui.</textarea>

                        </div>

                        <div region="center" border="false">

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

我們不需要編寫任何js程式碼，但是擁有強大的使用者介面設計的能力。

o 5.2建立可摺疊版面

這個教程中，我們學習關於easyui可摺疊性。可摺疊包括一系列皮膚。所有皮膚頭是全部可見的，但是在一個時期內只有一個皮膚的body內容是可見的。當使用者點選皮膚頭，body內容變為可見其他皮膚body內容變得不可見。

<h3 style="color:#0099FF;">Accordion for jQuery</h3>

<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>

</div>

easyui help you build your web page easily

</div>

<li>

<span>Folder1</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</div>

我們建立3個皮膚，第三個皮膚內容是一個樹狀選單。

o 5.3建立TABS

這個教程顯示你如何使用easyui建立tabs元件。tabs有多個皮膚，這些皮膚能被動態的新增或者刪除。你可以使用tabs來顯示不同的實體。在一個時間內只顯示一個皮膚。每一個皮膚擁有title，icon和close按鈕。當tabs被選擇時，相關皮膚的內容被現實。

tabs從HTML標記建立，包含DIV容器和一些DIV皮膚。

First Tab

</div>

Second Tab

</div>

Third Tab

</div>

我們建立3個皮膚的tabs元件，第二個和第三個皮膚可以通過點選close按鈕關閉。

o 5.4動態新增tabs

你只需呼叫add方法，就可以使用jquery easyui很容易動態新增tabs。在這個教程中，我們動態的新增顯示一個頁面使用iframe。當點選新增add按鈕，新tab被新增。如果tab已經存在，被啟用。

第一步：建立tabs

<div style="margin-bottom:10px">

    <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>

    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>

    <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jquery-easyui.wikidot.com')">easyui</a>

</div>

<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">

    <div title="Home">

    </div>

</div>

HTML程式碼很簡單，我們建立tabs用一個tab皮膚，名字為home。記住，我們不需要寫任何js程式碼。

第二步：使addTab函式生效

function addTab(title, url){

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

        $('#tt').tabs('select', title);

    } else {

        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';

        $('#tt').tabs('add',{

            title:title,

            content:content,

            closable:true

});

我們使用exists方法判斷tab是否存在。如果存在，則啟用tab。呼叫add方法新增新tab皮膚。

o 5.5建立XP式樣左皮膚

通常，瀏覽資料夾在windowsXP中有左皮膚，包括常用任務內容。這個教程顯示你如何使用easyui皮膚外掛建立XP左皮膚。

定義幾個皮膚

我們幾個皮膚顯示一些任務，每個皮膚僅可以摺疊和展開工具按鈕。程式碼像這樣：

View as a slide show<br/>

Order prints online<br/>

Print pictures

</div>

<br/>

Make a new folder<br/>

Publish this folder to the Web<br/>

Share this folder

</div>

<br/>

New York<br/>

My Pictures<br/>

My Computer<br/>

My Network Places

</div>

<br/>

My documents<br/>

File folder<br/><br/>

Date modified: Oct.3rd 2010

</div>

檢視效果是不是我們想要的，我們必須改變皮膚header背景圖片和收縮按鈕icon。

定製皮膚外觀效果

做到這一點並不難，我們需要做的是重新定義一些CSS。

.panel-header{

background:#fff url('panel_header_bg.gif') no-repeat top right;

}

.panel-body{

background:#f0f0f0;

}

.panel-tool-collapse{

background:url('arrow_up.gif') no-repeat 0px -3px;

}

.panel-tool-expand{

background:url('arrow_down.gif') no-repeat 0px -3px;

}

當使用easyui定義使用者介面時是很簡單的。

· 6 DataGrid 資料格

6.1轉換HTML表格到DataGrid
6.2給DataGrid新增分頁
6.3從DataGrid中獲得選定行的資料
6.4新增工具欄到DataGrid
6.5DataGrid凍結列
6.6動態改變DataGrid列
6.7格式化DataGrid列
6.8新增DataGrid的分類
6.9在DataGrid中建立列組
6.10在DataGrid中選擇核取方塊
6.11定製DataGrid頁面
6.12使DataGrid能行嫩編輯
6.13合併DataGrid單元格

o 6.1 轉換HTML表格到DataGrid

這個例子顯示如何轉換表格到DataGrid。DataGrid在thead標記中定義列，在tbody標記中定義資料。確定給每一個資料列設定欄位名，看這個例子：

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

不需要js程式碼就能看到這個效果：

當然，你也可以定義複合表頭，像這樣：

<thead>

<tr>

<th colspan="3">Details</th>

</tr>

<tr>

</tr>

</thead>

o 6.2 給DataGrid新增分頁

這個例子顯示如何能從伺服器中呼叫資料，如何新增分頁到DataGrid中。

從遠端伺服器中呼叫資料，你必須設定url屬性，伺服器應該返回JSON格式資料。獲得更多資料格式，請參考DataGrid文件。

建立<table>標記

首先，我們在網頁上定義標記。

jQuery程式碼

然後，寫一些jQuery程式碼建立DataGrid元件

$('#tt').datagrid({

title:'Load Data',

iconCls:'icon-save',

width:600,

height:250,

url:'/demo3/data/getItems',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]],

pagination:true

});

我們定義DataGrid列並且設定pagination屬性為true，這樣可以在DataGrid上產生分頁欄按鈕。分頁傳送2個引數到伺服器。

page: 頁號，從1開始。
rows: 每頁的列數。

我們使用etmvc framework編寫後臺服務程式碼，所以，url被對映到DataController類和getItems方法。

定義資料模型的例子

@Table(name="item")

public class Item extends ActiveRecordBase{

@Id public String itemid;

@Column public String productid;

@Column public java.math.BigDecimal listprice;

@Column public java.math.BigDecimal unitcost;

@Column public String attr1;

@Column public String status;

}

編寫控制程式碼

public class DataController extends ApplicationController{

/**

* get item data

* @param page page index

* @param rows rows per page

* @return JSON format string

* @throws Exception

*/

public View getItems(int page, int rows) throws Exception{

long total = Item.count(Item.class, null, null);

List<Item> items = Item.findAll(Item.class, null, null, null, rows, (page-1)*rows);

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

result.put("total", total);

result.put("rows", items);

return new JsonView(result);

}

資料庫配置例項

domain_base_class=com.et.ar.ActiveRecordBase

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter

com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver

com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/jpetstore

com.et.ar.ActiveRecordBase.username=root

com.et.ar.ActiveRecordBase.password=soft123456

com.et.ar.ActiveRecordBase.pool_size=0

部署

建立MySQL資料庫
從'/db/item.sql'匯入測試表資料，表名是'item'.
按需要改變資料庫配置，配置檔案在/WEB-INF/classes/activerecord.properties中。
執行程式

o 6.3 得到DataGrid選擇行

這個例子顯示瞭如何得到選擇行的資料。

DataGrid元件包括2個方法檢索選擇行資料：

getSelected: 得到第一個選擇行的資料，如果沒有選擇行則返回null否則返回該記錄
getSelections:得到全部的選擇行的資料，如果元素是記錄的話，返回陣列資料

建立標記

建立 datagrid

$('#tt').datagrid({

title:'Load Data',

iconCls:'icon-save',

width:600,

height:250,

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

});

用法演示

得到選擇行資料：

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

if (row){

alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);

}

得到全部選擇行的itemid:

var ids = [];

var rows = $('#tt').datagrid('getSelections');

for(var i=0; i<rows.length; i++){

ids.push(rows[i].itemid);

}

alert(ids.join('\n'));

o 6.4 新增工具欄到DataGrid

這個例子顯示瞭如何新增工具欄：

DataGrid外掛有工具欄屬性，這個屬性可以定義工具欄。工具欄包括定義了下列屬性的按鈕：

text: 在按鈕上顯示的文字
iconCls: 定義背景圖示顯示在按鈕的左面的CSS類。
handler: 當使用者按下按鈕時，處理一些事情的函式

標記

jQuery

$('#tt').datagrid({

title:'DataGrid with Toolbar',

width:550,

height:250,

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]],

toolbar:[{

text:'Add',

iconCls:'icon-add',

handler:function(){

alert('add')

}

},{

text:'Cut',

iconCls:'icon-cut',

handler:function(){

alert('cut')

}

},'-',{

text:'Save',

iconCls:'icon-save',

handler:function(){

alert('save')

}

}]

});

o 6.5 DataGrid凍結列

這個例子演示瞭如何凍結列。當使用者水平滾動的時候，凍結列不能滾動出檢視。

凍結列，你應該定義frozenColumns屬性，這個屬性和columns屬性相似。

$('#tt').datagrid({

title:'Frozen Columns',

iconCls:'icon-save',

width:500,

height:250,

url:'datagrid_data.json',

frozenColumns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

]],

columns:[[

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

});

o 6.6 動態改變DataGrid列

DataGrid列可以使用columns屬性定義。如果你想動態改變列，也沒問題。改變列你可以重新呼叫DataGrid方法平且傳遞新columns屬性。

下面定義DataGrid元件

$('#tt').datagrid({

title:'Change Columns',

iconCls:'icon-save',

width:550,

height:250,

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'attr1',title:'Attribute',width:200},

{field:'status',title:'Status',width:80}

]]

});

執行網頁，我們看到：

通常，我們想改變列，你可以寫這些程式碼：

$('#tt').datagrid({

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

});

記住，我們已經定義其他屬性，比如：url，width，height等，我們不需要重複定義他們，我們定義我們想改變的。

o 6.7 格式化DataGrid列

下面的例子是在easyui DataGrid中格式化列，如果單價低於20，則使用定義列formatter為紅色文字。

格式化DataGrid列，我們應該設定formatter屬性，這個屬性是一個函式。格式化函式包括兩個引數：

value: 顯示欄位當前列的值
record: 當前行記錄資料

Markup

jQuery

$('#tt').datagrid({

title:'Formatting Columns',

width:550,

height:250,

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right',

formatter:function(val,rec){

if (val < 20){

return '<span style="color:red;">('+val+')</span>';

} else {

return val;

}

},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

});

o 6.8 新增排序到DataGrid

這個事例演示瞭如何在點選列頭的時候排序

DataGrid中全部的列可以通過點選列頭被排序。你可以定義可以被排序的列。預設的，列不能被排序除非你設定sortable屬性為TRUE，下面是例子：

標記

jQuery

$('#tt').datagrid({

title:'Sortable Column',

width:550,

height:250,

url:'/demo4/data/getItems',

columns:[[

{field:'itemid',title:'Item ID',width:80,sortable:true},

{field:'productid',title:'Product ID',width:80,sortable:true},

{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},

{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]],

pagination:true,

sortName:'itemid',

sortOrder:'asc'

});

我們定義一些可排序的列，包括itemid，productid，listprice，unitcost等。attr1列和status列不能被排序。我們設定預設排序列：itemid，按asc（升序）排序。

當排序時， DataGrid傳送兩個引數到伺服器：

sort: 排序列欄位名
order: 排序次序： 'asc' 或 'desc', 預設為'asc'.

我們使用etmvc framework 寫後臺伺服器程式碼，首先定義資料模型

@Table(name="item")

public class Item extends ActiveRecordBase{

@Id public String itemid;

@Column public String productid;

@Column public java.math.BigDecimal listprice;

@Column public java.math.BigDecimal unitcost;

@Column public String attr1;

@Column public String status;

}

寫控制程式碼：

public class DataController extends ApplicationController{

/**

* get item data

* @param page page number

* @param rows page size

* @param sort sort column field name

* @param order sort order, can be 'asc' or 'desc'

* @return JSON format string

* @throws Exception

*/

public View getItems(int page, int rows, String sort, String order) throws Exception{

long total = Item.count(Item.class, null, null);

List<Item> items = Item.findAll(Item.class, null, null, sort+" "+order, rows, (page-1)*rows);

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

result.put("total", total);

result.put("rows", items);

return new JsonView(result);

}

我們使用MySQL資料庫儲存演示資料，下面是配置例項：

domain_base_class=com.et.ar.ActiveRecordBase

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter

com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver

com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/jpetstore

com.et.ar.ActiveRecordBase.username=root

com.et.ar.ActiveRecordBase.password=soft123456

com.et.ar.ActiveRecordBase.pool_size=0

部署

建立MySQL資料庫
從'/db/item.sql'匯入測試表資料，表名是'item'.
按需要改變資料庫配置，配置檔案在/WEB-INF/classes/activerecord.properties中。
執行程式

o 6.9 在DataGrid上的核取方塊

本教程顯示了你如何放置checkbox列。使用checkbox，使用者可以選定/取消資料行。

新增checkbox列，我們簡單的新增列的checkbox屬性，並且設定為true。程式碼像這樣：

$('#tt').datagrid({

title:'Checkbox Select',

iconCls:'icon-ok',

width:600,

height:250,

url:'datagrid_data.json',

idField:'itemid',

columns:[[

{field:'ck',checkbox:true},

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]],

pagination:true

});

上面的程式碼，我們可以新增列的checkbox屬性，然後他就會出現選擇列。如果idField屬性被設定，DataGrid的選擇會被不同的頁保持。

o 6.10 自定義DataGrid分頁

DataGrid內建分頁能力是強大的，它比自定義相對容易。在這個教程，我們將要建立DataGrid並且在頁面工具欄中新增一些自定義按鈕。

標記

建立DataGrid

$('#tt').datagrid({

title:'Load Data',

iconCls:'icon-save',

width:550,

height:250,

pagination:true,

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:80},

{field:'productid',title:'Product ID',width:80},

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

});

記住設定pagination屬性為true產生頁面工具欄。

自定義頁面工具欄

var pager = $('#tt').datagrid('getPager'); //得到DataGrid頁面

pager.pagination({

showPageList:false,

buttons:[{

iconCls:'icon-search',

handler:function(){

alert('search');

}

},{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-edit',

handler:function(){

alert('edit');

}

}],

onBeforeRefresh:function(){

alert('before refresh');

return true;

}

});

我們得到DataGrid頁，然後重新構建頁面。我們隱藏頁列表然後新增新按鈕。

o 6.11使DataGrid能編輯

可編輯特徵是最近新增的。它能讓使用者新增新行。使用者也可以更新一行或多行。這個教程顯示瞭如何建立使用行內編輯的DataGrid。

建立DataGrid

$('#tt').datagrid({

title:'Editable DataGrid',

iconCls:'icon-edit',

width:660,

height:250,

singleSelect:true,

idField:'itemid',

url:'datagrid_data.json',

columns:[[

{field:'itemid',title:'Item ID',width:60},

{field:'productid',title:'Product',width:100,

formatter:function(value){

for(var i=0; i<products.length; i++){

if (products[i].productid == value) return products[i].name;

}

return value;

},

editor:{

type:'combobox',

options:{

valueField:'productid',

textField:'name',

data:products,

required:true

}

},

{field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},

{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},

{field:'attr1',title:'Attribute',width:150,editor:'text'},

{field:'status',title:'Status',width:50,align:'center',

editor:{

type:'checkbox',

options:{

on: 'P',

off: ''

}

},

{field:'action',title:'Action',width:70,align:'center',

formatter:function(value,row,index){

if (row.editing){

var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';

var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';

return s+c;

} else {

var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';

var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';

return e+d;

}

]],

onBeforeEdit:function(index,row){

row.editing = true;

$('#tt').datagrid('refreshRow', index);

},

onAfterEdit:function(index,row){

row.editing = false;

$('#tt').datagrid('refreshRow', index);

},

onCancelEdit:function(index,row){

row.editing = false;

$('#tt').datagrid('refreshRow', index);

}

});

使DataGrid可編輯，你應該新增editor屬性到列中。editor告訴DataGrid如何編輯字和如何儲存值。我們定義了三個editor：text，combobox，checkbox。

新增編輯功能

function editrow(index){

$('#tt').datagrid('beginEdit', index);

}

function deleterow(index){

$.messager.confirm('Confirm','Are you sure?',function(r){

if (r){

$('#tt').datagrid('deleteRow', index);

}

});

}

function saverow(index){

$('#tt').datagrid('endEdit', index);

}

function cancelrow(index){

$('#tt').datagrid('cancelEdit', index);

}

o 6.12 DataGrid中合併單元格

合併一些單元格經常是必要的，這個教程顯示了你如何合併單元格：

合併單元格，簡單的呼叫mergeCells方法並傳遞資訊引數就能告訴DataGrid如何合併單元格了。當單元格合併時，每種東西在合併單元格中，除了第一個單元格，都會被隱藏。

建立DataGrid

$('#tt').datagrid({

title:'Merge Cells',

iconCls:'icon-ok',

width:600,

height:300,

singleSelect:true,

rownumbers:true,

idField:'itemid',

url:'datagrid_data.json',

pagination:true,

frozenColumns:[[

{field:'productid',title:'Product',width:100,

formatter:function(value){

for(var i=0; i<products.length; i++){

if (products[i].productid == value) return products[i].name;

}

return value;

}

},

{field:'itemid',title:'Item ID',width:80}

]],

columns:[[

{title:'Price',colspan:2},

{field:'attr1',title:'Attribute',width:150,rowspan:2},

{field:'status',title:'Status',width:60,align:'center',rowspan:2}

],[

{field:'listprice',title:'List Price',width:80,align:'right'},

{field:'unitcost',title:'Unit Cost',width:80,align:'right'}

]]

});

合併單元格

當資料被載入，我們在DataGrid中合併一些單元格，所以放置下列程式碼在onLoadSuccess函式中。

var merges = [{

index:2,

rowspan:2

},{

index:5,

rowspan:2

},{

index:7,

rowspan:2

}];

for(var i=0; i<merges.length; i++)

$('#tt').datagrid('mergeCells',{

index:merges[i].index,

field:'productid',

rowspan:merges[i].rowspan

});

· 7 視窗

我第一個視窗
自定義視窗工具
視窗和版面
建立對話方塊

o 7.1 我第一個視窗

建立視窗時很簡單的，我們建立DIV標記：

Some Content.

</div>

然後測試就出出現一個視窗，我們不用寫任何js程式碼

如果你想建立看不見的視窗，記住設定closed屬性為true，你能呼叫open方法開啟視窗：

Some Content.

</div>

$('#win').window('open');

這個演示，我們建立一個登陸視窗

<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>

</div>

</form>

</div>

o 7.2 自定義視窗工具

預設的視窗有4個工具：collapsible（可摺疊）,minimizable（最小化）,maximizable（最大化）和closable（關閉），例如，我們定義下列視窗：

window content

</div>

自定義工具，設定工具為true或者false。例如，我們希望視窗只有一個closeable工具，可以設定任何其他工具為false。我們可以定義工具屬性在標記中或者jquery程式碼中。現在我們使用jquery程式碼來定義視窗：

$('#win').window({

collapsible:false,

minimizable:false,

maximizable:false

});

如果你想新增自定義工具到視窗，我們可以使用tools屬性，下面演示了我們新增自己的兩個工具：

$('#win').window({

collapsible:false,

minimizable:false,

maximizable:false,

tools:[{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-remove',

handler:function(){

alert('remove');

}

}]

});

o 7.3 Window和Layout

版式元件可以巢狀在視窗。我們可以建立複合版面視窗和事件而不用寫任何JS程式碼.jquery-easyui框架在後臺幫助我們進行渲染和改變工作。這個例子我們建立視窗，這個視窗有左右兩部分。在左視窗，我們建立tree，在右視窗，我們建立tabs內容。

<li>

<span>Library</span>

<ul>

<li><span>easyui</span></li>

<li><span>Music</span></li>

<li><span>Picture</span></li>

<li><span>Database</span></li>

</ul>

</li>

</ul>

</div>

jQuery easyui framework help you build your web page easily.

</div>

No contact data.

</div>

<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">Cancel</a>

</div>

看上面的程式碼，我們只需使用HTML標記，然後複合版面和window就會顯示。這個jquery-easyui框架，是容易和強大的。

o 7.4 建立對話方塊

對話方塊是特殊的視窗，它能包括上面的工具欄和下面的按鈕。預設對話方塊不能改變大小，但是使用者可以設定resizeable屬性為true來使它可以被改變大小：

對話方塊非常簡單，可以使用DIV標記建立：

Dialog Content.

</div>

$('#dd').dialog({

title:'My Dialog',

iconCls:'icon-ok',

toolbar:[{

text:'Add',

iconCls:'icon-add',

handler:function(){

alert('add')

}

},'-',{

text:'Save',

iconCls:'icon-save',

handler:function(){

alert('save')

}

}],

buttons:[{

text:'Ok',

iconCls:'icon-ok',

handler:function(){

alert('ok');

}

},{

text:'Cancel',

handler:function(){

$('#dd').dialog('close');

}

}]

});

上面的程式碼創一個有工具欄和按鈕的對話方塊。這是對話方塊、工具欄、內容和按鈕的標準設定。

· 8 Tree

從標記建立tree
建立非同步tree
新增tree節點
建立checkbox節點的tree

· 8.1從標記建立tree

tree可以被從標記建立。easyui tree應該定義在ul元素中。無序列表ul元素提供了基本tree結構。每一個li元素被產生一個tree節點，子ul元素產生父tree節點。

例子：

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

建立tree:

$('#tt').tree();

顯示：

· 8.2建立非同步Tree

建立非同步tree，每一個tree節點必須有id屬性，這個屬性被傳遞到檢索子節點資料。我們這裡例子使用etmvc framework返回json資料。

建立HTML標記

建立jQuery程式碼

我們使用url屬性來指向遠端資料

$('#tt').tree({

url:'/demo2/node/getNodes' // The url will be mapped to NodeController class and getNodes method

});

資料模型

@Table(name="nodes")

public class Node extends ActiveRecordBase{

@Id public Integer id;

@Column public Integer parentId;

@Column public String name;

public boolean hasChildren() throws Exception{

long count = count(Node.class, "parentId=?", new Object[]{id});

return count > 0;

}

寫控制程式碼

如果node是子，記住設定node狀態為closed。

public class NodeController extends ApplicationController{

/**

* get nodes, if the 'id' parameter equals 0 then load the first level nodes,

* otherwise load the children nodes

* @param id the parent node id value

* @return the tree required node json format

* @throws Exception

*/

public View getNodes(int id) throws Exception{

List<Node> nodes = null;

if (id == 0){ // return the first level nodes

nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);

} else { // return the children nodes

nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});

}

List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();

for(Node node: nodes){

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

item.put("id", node.id);

item.put("text", node.name);

// the node has children,

// set the state to 'closed' so the node can asynchronous load children nodes

if (node.hasChildren()){

item.put("state", "closed");

}

items.add(item);

}

return new JsonView(items);

}

資料配置例項

domain_base_class=com.et.ar.ActiveRecordBase

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter

com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver

com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/mydb

com.et.ar.ActiveRecordBase.username=root

com.et.ar.ActiveRecordBase.password=soft123456

com.et.ar.ActiveRecordBase.pool_size=0

部署

建立MySQL資料庫
從'/db/item.sql'匯入測試表資料，表名是'item'.
按需要改變資料庫配置，配置檔案在/WEB-INF/classes/activerecord.properties中。
執行程式

· 8.3 新增節點

本教程顯示瞭如何新增節點。我們建立foods tree，這個tree包括vegetable、fruit節點。然後新增一些fruits到存在的fruit節點。

建立foods tree

首先，我們建立foods tree，程式碼像這樣：

</div>

注意，tree元件被定義在UL標記，tree節點資料載入tree_data.json。

得到父節點

我們點選節點以選擇fruit節點，我們新增一些fruits資料。呼叫getSelected方法來得到節點handle。

var node = $('#tt').tree('getSelected');

getSelect方法的返回值是一個js物件，包括id，text，attributes和target屬性。target屬性是DOM物件，引用了被選擇的節點，使用append方法新增節點。

新增節點：

var node = $('#tt').tree('getSelected');

if (node){

var nodes = [{

"id":13,

"text":"Raspberry"

},{

"id":14,

"text":"Cantaloupe"

}];

$('#tt').tree('append', {

parent:node.target,

data:nodes

});

}

當我們新增一些fruits，可以看到：

· 8.4 建立帶有checkbox節點的tree

tree外掛允許你建立checkbox tree，如果你點選節點的checkbox，被點選的節點資訊得到下和上的繼承。例如，點選tomato節點的checkbox，你可以看到vegetables節點現在只被選擇一部分。

建立tree標記

建立checkbox tree

using('tree', function(){

$('#tt').tree({

url:'tree_data.json',

checkbox:true

});

我們使用easyloader以動態的載入tree外掛。這個特徵允許我們載入網頁快一點。

· 9 表單

Ajax方式傳送表單
新增複合tree到表單
表單檢驗

o 9.1 Ajax方式傳送表單

這個教程顯示如何傳送表單。我們建立一個例子表單：name，email和phone欄位。使用easyui表單外掛，我們可以將表單變成ajax表單。表單傳送所有的欄位到後臺處理服務，服務處理和傳送一些資料返回前臺網頁。我們收到返回的資料後顯示他。

建立form

<table>

<tr>

</tr>

<tr>

<td>Email:</td>

</tr>

<tr>

<td>Phone:</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

轉換成Ajax表單

我們寫一些jquery程式碼使表單以ajax方式傳送。注意，當資料返回時，form外掛的success函式激發，所以我們可以處理一點事情。

$('#ff').form({

success:function(data){

$.messager.alert('Info', data, 'info');

}

});

服務處理：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

String name = request.getParameter("name");

String email = request.getParameter("email");

String phone = request.getParameter("phone");

System.out.println(name+":"+email+":"+phone);

PrintWriter out = response.getWriter();

out.print("Name:"+name+"<br/>Email:"+email+"<br/>Phone:"+phone);

out.flush();

out.close();

}

當我們點選傳送按鈕時，可以看到；

o 9.2 給表單新增複合tree欄位

複合tree是一種核取方塊和下拉tree。它能像表單欄位一樣傳遞到服務端。在這個教程中，我們建立登錄檔單，這個表單有name，address，city欄位。city欄位是一個複合tree欄位，使用者可以下拉tree皮膚並選擇指定city。

第一步：建立HTML標記

<h2>Account Information</h2>

<table>

<tr>

</tr>

<tr>

<td>Address:</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

我們設定複合tree的url屬性，這個欄位可以被從伺服器端檢索tree。注意，欄位的class名應該是easyui-combotree，所以我們不需要些任何js程式碼，複合tree欄位就會自動生成。

第二步，建立對話方塊

我們在對話方塊中放置表單，這個對話方塊有傳送和取消兩個按鈕。

$('#dlg').dialog({

title:'Register',

width:310,

height:250,

buttons:[{

text:'Submit',

iconCls:'icon-ok',

handler:function(){

$('#ff').form('submit',{

success:function(data){

$.messager.alert('Info',data,'info');

}

});

}

},{

text:'Cancel',

iconCls:'icon-cancel',

handler:function(){

$('#dlg').dialog('close');

}

}]

});

第三部，寫服務程式

服務程式碼接受表單資料並返回：

public class ProcessServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name = request.getParameter("name");

String address = request.getParameter("address");

String city = request.getParameter("city");

System.out.println(name);

System.out.println(address);

System.out.println(city);

PrintWriter out = response.getWriter();

out.print("Name:"+name+",Address:"+address+",City ID:"+city);

out.flush();

out.close();

}

現在我們點選傳送按鈕，得到一個資訊框，顯示一些資料。

複合tree是非常簡單的。我們做設定url屬性以檢索tree資料。

o 9.3 驗證表單

本教程將要顯示你如何驗證表單。easyui框架提供了validatebox外掛以驗證表單。在這個教程中，我們將要構建聯絡表單並且應用validatebox外掛驗證表單。你可以修改它適應自己的要求。

構建表單

讓我們構建簡單的內容的表單： name, email, subject 和message 欄位:

<div>

</div>

<div>

<label for="email">Email:</label>

</div>

<div>

<label for="subject">Subject:</label>

</div>

<div>

<label for="message">Message:</label>

</div>

<div>

</div>

</form>

</div>

我們新增class名為easyui-validatebox到input標記，所以input標記應用驗證依照validType屬性。

當出現錯誤的時候阻止表單傳送

當使用者點選傳送按鈕，我們應該阻止有錯誤的表單傳送。

$('#ff').form({

url:'/demo7/ProcessServlet',

onSubmit:function(){

return $(this).form('validate');

},

success:function(data){

alert(data);

}

});

如果表單不可以，出現提示：

編寫處理程式碼

最後，我們編寫後臺處理服務程式碼，這個程式碼顯示在控制檯上的接收引數併傳送簡單資訊到前臺頁面。

public class ProcessServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name = request.getParameter("name");

String email = request.getParameter("email");

String subject = request.getParameter("subject");

String message = request.getParameter("message");

System.out.println("Name:"+name);

System.out.println("Email:"+email);

System.out.println("Subject:"+subject);

System.out.println("Message:"+message);

PrintWriter out = response.getWriter();

out.println("ok");

out.close();

}

· 10 Documentation文件

10.1 Base
- EasyLoader
- Draggable
- Droppable
- Resizable

10.2 Layout
- Panel
- Tabs
- Accordion
- Layout

10.3 Menu and Button
- Menu
- LinkButton
- MenuButton
- SplitButton

10.4 Form
- Form
- ComboBox
- ComboTree
- NumberBox
- ValidateBox
- DateBox
- Calendar

10.5 Windows
- Window
- Dialog
- Messager

10.6 DataGrid and Tree
- Pagination
- DataGrid
- Tree

o 10.1 Base

§ 10.1.1 EasyLoader

Usage

easyloader.base = '../'; // set the easyui base directory

easyloader.load('messager', function(){ // load the specified module

$.messager.alert('Title', 'load ok');

});

Options

Properties

Name	Type	Description	Default
modules	object	Predefined modules. 它表示是一個預定義的模組，沒有預設值
locales	object	Predefined locales. 它表示是一個預定義的語言環境，沒有預設值。
base	string	The easyui base directory, must end with '/'. 它說明是一個easyui的基礎目錄，必須以‘/’結束。	The base directory will be auto setted relative to easyload.js 該目錄在被覆蓋前自動設定為預設的easyloader.js。
theme	string	The name of theme that defined in 'themes' directory theme的名字就是定義的theme的目錄，	Default theme的名字就是定義的theme的目錄，
css	boolean	Defines if loading css file when loading module 當載入定義了該css檔案的模組時就載入css檔案，	True 它的預設值是true。
locale	string	The locale name 表示locale的名字	Null 預設值為null。
timeout	number	Timeout value in milliseconds. Fires if a timeout occurs. 如果發生了超時，它的單位是毫秒，	2000 它的預設值是2000。

Defined locales

af
bg
ca
cs
da
de
en
fr
nl
zh_CN
zh_TW

Events

Name	Parameters	Description
onProgress	name	Fires when a module is loaded successfully.
onLoad	name	Fires when a module and it's dependencies are loaded successfully.

Methods

Name	Parameter	Description
load	module, callback	Load the specified module. When load success a callback function will be called. The module parameter valid type are: a single module name an module array a css file that end with '.css' a js file that end with '.js'

§ 10.1.2 Draggable

Usage

Markup

<div id="title" style="background:#ccc;">title</div>

</div>

jQuery

$('#dd').draggable(options);

Options

Override defaults with $.fn.draggable.defaults.

Properties

Name	Type	Description	Default
proxy	string,function	A proxy element to be used when dragging, when set to 'clone', a clone element is used as proxy. If a function is specified, it must return a jQuery object. 它的型別是string,function，	null
revert	boolean	If set to true, the element will return to its start position when dragging stops. 該屬性如果設定為true，當拖動停止後，該元素會回到起始的位置，	False 預設值是false。
cursor	string	The css cursor when dragging. 表示拖動時游標的css	Move 它的預設值是move。
deltaX	number	The dragged element position x corresponding to current cursor當拖動時元素只在X軸上移動	null預設值是null
deltaY	number	The dragged element position y corresponding to current cursor當拖動時元素只在Y軸上移動	null預設值是null
handle	selector	The handle that start the draggable. 表示該控制程式碼開始拖動	null預設值是null
disabled	boolean	True to stop draggable. 表示該元素停止拖動	false
edge	number	The drag width in which can start draggable. 表示該元素最小可拖動的範圍	0
axis	string	Defines the axis which the dragged elements moves on, available value is 'v' or 'h', when set to null will move across 'v' and 'h' direction. 該元素在定義的軸上拖動，value為‘v’或者‘h’，當設定為null時就超過‘v’或者‘h’的範圍。	null

Events

Name	Parameters	Description
onStartDrag	e	Fires when the target object start dragging.
onDrag	e	Fires during dragging. Return false will not do dragging actually.
onStopDrag	e	Fires when the dragging stops.

Methods

Name	Parameter	Description
options	none	Return the options property.
proxy	none	Return the drag proxy if the proxy property is setted.
enable	none	Enable the drag action.
disable	none	Disable the drag action.

§ 10.1.3 Droppable

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

Usage

Markup

jQuery

$('#dd').droppable(options);

Options

Override defaults with $.fn.droppable.defaults

Properties

Name	Type	Description	Default
accept	selector	Determine which draggable element will be accepted	null

Events

Name	Parameters	Description
onDragEnter	e,source	Fires when the draggable element is dragged enter. The source parameter indicate the dragged DOM element.
onDragOver	e,source	Fires when the draggable element is dragged over. The source parameter indicate the dragged DOM element.
onDragLeave	e,source	Fires when the draggable element is dragged leave. The source parameter indicate the dragged DOM element.
onDrop	e,source	Fires when the draggable element is dropped. The source parameter indicate the dragged DOM element.

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

§ 10.1.4 Resizable

Usage

Markup

jQuery

$('#rr').resizable(options);

Options

Override defaults with $.fn.resizable.defaults.

Properties

Name	Type	Description	Default
disabled	boolean	True to disable resizing.	false
handles	string	Indicate the direction of resizable,'n' is the north,'e' is the east,etc.	n, e, s, w, ne, se, sw, nw, all
minWidth	number	The minimum width when resizing.	10
minHeight	number	The minimum height when resizing.	10
maxWidth	number	The maximum width when resizing.	10000
maxHeight	number	The maximum height when resizing.	10000
edge	number	The edge of border to be resized.	5

Events

Name	Parameters	Description
onStartResize	e	Fires when start resizing.
onResize	e	Fires during resizing. When return false, the DOM element will not acts actual resize action.
onStopResize	e	Firest when stop resizing.

If you want to discuss contents of this page - this is the easiest way to do it.

Click here to edit contents of this page.

Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.

Append content without editing the whole page source.

Check out how this page has evolved in the past.

View and manage file attachments for this page.

A few useful tools to manage this Site.

See pages that link to and include this page.

Change the name (also URL address, possibly the category) of the page.

View wiki source for this page without editing.

View/set parent page (used for creating breadcrumbs and structured layout).

Notify administrators if there is objectionable content in this page.

Something does not work as expected? Find out what you can do.

General Wikidot.com documentation and help section.

Wikidot.com Terms of Service - what you can, what you should not etc.

Wikidot.com Privacy Policy.

o 10.2 layout

§ 10.2.1 Panel

Usage

Markup

Many panel properties can be defined in <div/> markup.

Panel Content

</div>

jQuery

To create a panel

$('#p').panel(options);

To create a panel with custom tools

$('#p').panel({

title: 'My Panel',

tools: [{

iconCls:'icon-new',

handler:function(){alert('new')}

},{

iconCls:'icon-save'

handler:function(){alert('save')}

}]

});

To move panel to other position

$('#p').panel('move',{

left:100,

top:100

});

Dependencies

none

Options

Override defaults with $.fn.panel.defaults.

Properties

Name	Type	Description	Default
title	string	The title text to display in panel header.	null
iconCls	string	A CSS class to display a 16x16 icon in panel.	null
width	number	Set the panel width.	auto
height	number	Set the panel height.	auto
left	number	Set the panel left position.	null
top	number	Set the panel top position.	null
cls	string	Add a CSS class to the panel.	null
headerCls	string	Add a CSS class to the panel header.	null
bodyCls	string	Add a CSS class to the panel body.	null
style	object	Add a custom specification style to the panel.	{}
fit	boolean	When true to set the panel size fit it's parent container.	false
border	boolean	Defines if to show panel border.	true
doSize	boolean	If set to true,the panel will be resize and do layout when created.	true
noheader	boolean	If set to true, the panel header will not be created.	false
content	string	The panel body content.	null
collapsible	boolean	Defines if to show collapsible button.	false
minimizable	boolean	Defines if to show minimizable button.	false
maximizable	boolean	Defines if to show maximizable button.	false
closable	boolean	Defines if to show closable button.	false
tools	array	Custom tools, every tool can contain two properties: iconCls and handler	[]
collapsed	boolean	Defines if the panel is collapsed at initialization.	false
minimized	boolean	Defines if the panel is minimized at initialization.	false
maximized	boolean	Defines if the panel is maximized at initialization.	false
closed	boolean	Defines if the panel is closed at initialization.	false
href	string	A URL to load remote data and then display in the panel.	null
cache	boolean	True to cache the panel content that loaded from href.	true
loadingMessage	string	When loading remote data show a message in the panel.	Loading…

Events

Name	Parameters	Description
onLoad	none	Fires when remote data is loaded.
onBeforeOpen	none	Fires before panel is opened, return false to stop the open.
onOpen	none	Fires after panel is opened.
onBeforeClose	none	Fires before panel is closed, return false to cancel the close.
onClose	none	Fires after panel is closed.
onBeforeDestroy	none	Fires before panel is destroyed, return false to cancel the destroy.
onDestroy	none	Fires after panel is destroyed.
onBeforeCollapse	none	Fires before panel is collapsed, return false to stop the collapse.
onCollapse	none	Fires after panel is collpased.
onBeforeExpand	none	Fires before panel is expanded, return false to stop the expand.
onExpand	none	Fires after panel is expanded.
onResize	width, height	Fires after panel is resized. width: the new outer width height: the new outer height
onMove	left,top	Fires after panel is moved. left: the new left postion top: the new top position
onMaximize	none	Fires after the window has been maximized.
onRestore	none	Fires after the window has been restored to its original size.
onMinimize	none	Fires after the window has been minimized.

Methods

Name	Parameter	Description
options	none	Return options property.
panel	none	Return the panel object.
header	none	Return the panel header object.
body	none	Return the panel body object.
setTitle	title	Set the title text of header.
open	forceOpen	When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
close	forceClose	When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
destroy	forceDestroy	When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
refresh	none	Refresh the panel to load remote data when href property is setted.
resize	options	Set panel size and do layout. The options object contains following properties: width: the new panel width height: the new panel height left: the new panel left position top: the new panel top position
move	options	Move the panel to a new position. The options object contains following properties: left: the new panel left position top: the new panel top position
maximize	none	Fits the panel winthin its container.
minimize	none	Minimizing the panel.
restore	none	Restores the maximized panel back to its original size and position.
collapse	forceCollapse	Collapses the panel body. When forceCollapse is setted to true, the onBeforeCollapse event will not be triggered.
expand	forceExpand	Expand the panel body. When forceExpand is setted to true, the onBeforeExpand event will not be triggered.

§ 10.2.2 tabs

Usage

Markup

tab1

</div>

tab2

</div>

tab3

</div>

jQuery

To create a tabs container

$('#tt').tabs(options);

To add a tab panel:

$('#tt').tabs('add',{

title:'New Tab',

content:'Tab Body',

closable:true

});

To get the selected tab panel and its tab object:

var pp = $('#tt').tabs('getSelected');

var tab = pp.panel('options').tab; // the corresponding tab object

Dependencies

panel

Options

Tabs Container

Override defaults with $.fn.tabs.defaults.

Properties

Name	Type	Description	Default
width	number	The width of tabs container.	auto
height	number	The height of tabs container.	auto
plain	boolean	True to render the tab strip without a background container image.	false
fit	boolean	True to set the size of tabs container to fit it's parent container.	false
border	boolean	True to show tabs container border.	true
scrollIncrement	number	The number of pixels to scroll each time a tab scroll button is pressed.	100
scrollDuration	number	The number of milliseconds that each scroll animation should last.	400

Events

Name	Parameters	Description
onLoad	panel	Fires when an ajax tab panel finish loading remote data.
onSelect	title	Fires when user select a tab panel.
onBeforeClose	title	Fires before the tab panel is closed, return false to cancel this close action.
onClose	title	Fires when user close a tab panel.
onAdd	title	Fires when a new tab panel is added.
onUpdate	title	Fires when a tab panel is updated.

Methods

Name	Parameter	Description
options	none	Return the tabs options.
tabs	none	Return all tab panels.
resize	none	Resize the tabs container and do layout.
add	options	Add a new tab panel, the options parameter is a config object, see tab panel properties for more details.
close	title	Close a tab panel, title parameter indicate which panel to be closed.
getTab	title	Get the specified tab panel.
getSelected	none	Get the selected tab panel.
select	title	Select a tab panel.
exists	title	Indicate if the special panel is exists.
update	param	Update the specified tab panel, the param parameter contains two properties: tab: the tab panel to be updated. options: the panel options.

Tab Panel

Properties

Name	Type	Description	Default
title	string	The tab panel title text.
content	string	The tab panel content.
href	string	A URL to load remote content to fill the tab panel.	null
cache	boolean	True to cache the tab panel, valid when href property is setted.	true
iconCls	string	An icon CSS class to show on tab panel title.	null
closable	boolean	When set to true, the tab panel will show a closable button which can click to close the tab panel.	false
selected	boolean	When set to true, tab tab panel will be selected.	false
width	number	The width of tab panel.	auto
height	number	The height of tab panel.	auto

§ 10.2.3 accordion

Usage

Markup

<h3 style="color:#0099FF;">Accordion for jQuery</h3>

<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>

</div>

content2

</div>

content3

</div>

jQuery

$('#aa').accordion(options);

Dependencies

panel

Options

Container Options

Name	Type	Description	Default
width	number	The width of accordion container.	auto
height	number	The height of accordion container.	auto
fit	boolean	Set to true to set the accordion container size fit it's parent container.	false
border	boolean	Defines if to show the border.	true
animate	boolean	Defines if to show animation effect when expand or collapse panel.	true

Panel Options

The accordion panel options is inhirited from panel, many properties is defined in <div/> markup.
Bellow is the addition properties:

Name	Type	Description	Default
selected	boolean	Set to true to expand the panel.	false

Events

Name	Parameters	Description
onSelect	title	Fires when a panel is selected.
onAdd	title	Fires when a new panel is added.
onBeforeRemove	title	Fires before a panel is removed, return false to cancel the remove action.
onRemove	title	Fires when a panel is removed.

Methods

Name	Parameter	Description
options	none	Return the options of accordion.
panels	none	Get all panels.
resize	none	Resize the accordion.
getSelected	none	Get the selected panel.
getPanel	title	Get the specified panel.
select	title	Select the specified panel.
add	options	Add a new panel.
remove	title	Remove the specified panel.

§ 10.2.4 layout

Usage

Markup

The layout panel must has one 'center' panel.

</div>

jQuery

$('#cc').layout(options);

Dependencies

panel
resizable

Options

Layout Panel Options

All the properties is defined on <div/> markup, which the layout panel is created from it.

Name	Type	Description	Default
title	string	The layout panel title text.	null
region	string	Defines the layout panel position, the value is one of following: north, south, east, west, center.
border	boolean	True to show layout panel border.	true
split	boolean	True to show a split bar which user can change the panel size.	false
icon	string	An icon CSS class to show a icon on panel header.	null
href	string	An URL to load data from remote site.	null

Methods

Name	Parameter	Description
resize	none	Set the layout size.
panel	region	Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.
collapse	region	Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.
expand	region	Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.

o 10.3 Menu and button

Usage

Markup

<div>

<div>Excel</div>

<div>PowerPoint</div>

</div>

</div>

jQuery

To create a menu:

$('#mm').menu(options);

To show a menu on special position:

$('#mm').menu('show', {

left: 200,

top: 100

});

Dependencies

none

Options

Override defaults with $.fn.menu.defaults.

Properties

Name	Type	Description	Default
zIndex	number	Menu z-index style,increase from it.	110000
left	number	Menu left position.	0
top	number	Menu top position.	0
href	string	Indicate a different page URL that can be displayed in the current browser window when clicked menu item.	null

Events

Name	Parameters	Description
onShow	none	Fires after menu is showed.
onHide	none	Fires after menu is hidden.

Methods

Name	Parameter	Description
show	pos	Show a menu on special position. pos parameter have two properties: left: the new left position. top: the new top position.
hide	none	Hide a menu.

linkbutton

Usage

Markup

<a href="#" id="btn" icon="icon-search">easyui</a>

jQuery

$('#btn').linkbutton(options);

Dependencies

none

Options

Override defaults with $.fn.linkbutton.defaults.

Properties

Name	Type	Description	Default
id	string	The id attribute of this component.	null
disabled	boolean	True to disable the button	false
plain	boolean	True to show a plain effect.	false
text	string	The button text.	''
iconCls	string	A CSS class to display a 16x16 icon on left.	null

Methods

Name	Parameter	Description
options	none	Return options property.
disable	none	Disable the button
enable	none	Enable the button

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

MenuButton

Usage

Markup

<div>Paste</div>

<div icon="icon-remove">Delete</div>

<div>Select All</div>

</div>

jQuery

$('#mb').menubutton({

menu: '#mm'

});

Dependencies

menu
linkbutton

Options

Override default with $.fn.menubutton.defaults.

Name	Type	Description	Default
disabled	boolean	True to disable the button.	false
plain	boolean	True to show plain effect.	false
menu	string	A selector to create a corresponding menu.	null
duration	number	Defines duration time in milliseconds to show menu when hovering the button.	100

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

SplitButton

Usage

Markup

<div icon="icon-cancel">Cancel</div>

</div>

jQuery

$('#sb').splitbutton({

menu:'#mm'

});

Dependencies

menu
linkbutton

Options

Override default with $.fn.splitbutton.defaults.

Name	Type	Description	Default
disabled	boolean	True to disable the button.	false
plain	boolean	True to show plain effect.	false
menu	string	A selector to create a corresponding menu.	null
duration	number	Defines duration time in milliseconds to show menu when hovering the button.	100

o 10.4 form

Usage

Markup

...

</form>

jQuery

To make the form become ajax submit form

$('#ff').form({

url:...,

onSubmit: function(){

// do some check

// return false to prevent submit;

},

success:function(data){

alert(data)

}

});

To do a submit action

$('#ff').form('submit', {

url:...,

onSubmit: function(){

// do some check

// return false to prevent submit;

},

success:function(data){

alert(data)

}

});

Dependencies

none

Options

Properties

Name	Type	Description	Default
url	string	The form action URL to submit	null

Events

Name	Parameters	Description
onSubmit	none	Fires before submit, return false to prevent submit action.
success	data	Fires when the form is submitted successfuly.
onBeforeLoad	param	Fires before a request is made to load data. Return false to cancel this action.
onLoadSuccess	data	Fires when the form data is loaded.
onLoadError	none	Fires when some errors occur while loading form data.

Methods

Name	Parameter	Description
submit	options	Do the submit action, the options parameter is a object which contains following properties: url: the action URL onSubmit: callback function before submit submit: callback function after submit successfuly
load	data	Load records to fill the form. The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record
clear	none	Clear the form data
validate	none	Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin.

combobox

Usage

Markup

<option value="aa">aitem1</option>

<option>bitem2</option>

<option>bitem3</option>

<option>ditem4</option>

<option>eitem5</option>

</select>

jQuery

$('#cc').combobox(options);

To create from remote data:

$('#cc').combobox({

url:'combobox_data.json',

valueField:'id',

textField:'text'

});

The remote data format sample:

[{

"id":1,

"text":"text1"

},{

"id":2,

"text":"text2"

},{

"id":3,

"text":"text3",

"selected":true

},{

"id":4,

"text":"text4"

},{

"id":5,

"text":"text5"

}]

Dependencies

validatebox

Options

Override defaults with $.fn.combobox.defaults.

Properties

Name	Type	Description	Default
width	number	The width of the component.	auto
listWidth	number	The width of the drop down list.	null
listHeight	number	The height of the drop down list.	null
valueField	string	The underlying data value name to bind to this ComboBox.	value
textField	string	The underlying data field name to bind to this ComboBox.	text
editable	boolean	Defines if user can type text directly into the field.	true
disabled	boolean	Defines if to disable the field.	false
url	string	A URL to load list data from remote.	null
data	array	The list data to be loaded.	null
required	boolean	Defines if the field should be inputed.	false
missingMessage	string	Tooltip text that appears when the text box is empty.	This field is required.

Events

Name	Parameters	Description
onLoadSuccess	none	Fires when remote data is loaded successfully.
onLoadError	none	Fires when remote data load error.
onSelect	record	Fires when user select a list item.
onChange	newValue, oldValue	Fires when the field value is changed.

Methods

Name	Parameter	Description
destroy	none	Destroy the component.
resize	width	Resize the component width.
select	value	Select an item in the dropdown list.
clear	none	Clear the component value.
setValue	param	Set the specified value into the field. The 'param' parameter can be a value string or a javascript object that contains two properties corresponding to valueField and textField property.
getValue	none	Get the field value.
getText	none	Get the field text.
loadData	data	Load the locale list data.
reload	url	Request the remote list data.
disable	none	Disable the field.
enable	none	Enable the field.

combotree

Usage

Markup

jQuery

$('#cc').combotree({

url:'tree_data.json'

});

Dependencies

tree
validatebox

Options

Override defaults with $.fn.combotree.defaults.

Properties

Name	Type	Description	Default
width	number	The width of the component.	auto
treeWidth	number	The width of the tree list.	null
treeHeight	number	The height of the tree list.	200
url	string	A URL to load remote tree data.	null
data	array	The data to be loaded.	null
disabled	boolean	Defines if to disable the field.	false
required	boolean	Defines if the field should be inputed.	false
missingMessage	string	Tooltip text that appears when the text box is empty.	This field is required.

Events

Name	Parameters	Description
onBeforeSelect	node	Fires before a tree node is selected, return false to cancel the selection.
onSelect	node	Fires when user select a tree node.
onChange	newValue, oldValue	Fires when the field value is changed.

Methods

Name	Parameter	Description
destroy	none	Destroy the component.
resize	width	Resize the component width.
tree	none	Get the tree.
clear	none	Clear the component value.
setValue	param	Set the specified value into the field. The 'param' parameter can be a tree node id value or a javascript object that contains two properties: id and text.
getValue	none	Get the field value.
getText	none	Get the field text.
loadData	data	Load the locale tree data.
reload	url	Request the remote tree data again.
disable	none	Disable the field.
enable	none	Enable the field.

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

NumberBox

Usage

Markup

jQuery

$('#nn').numberbox(options);

Dependencies

validatebox

Options

Override defaults with $.fn.numberbox.defaults.

Properties

Name	Type	Description	Default
disabled	boolean	Defines if to disable the field.	false
min	number	The minimum allowed value.	null
max	number	The maximum allowed value.	null
precision	number	The maximum precision to display after the decimal separator.	0

Methods

validatebox

Usage

Markup

jQuery

$('#vv').validatebox(options)

Validate Rule

The validate rule is defined by using required and validType property, here are the rules already implemented:

email: Match email regex rule.
url: Match URL regex rule.
length[0,100]: Between x and x characters allowed.

To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:

$.extend($.fn.validatebox.defaults.rules, {

minLength: {

validator: function(value, param){

return value.length >= param[0];

},

message: 'Please enter at least {0} characters.'

}

});

Now you can use the minLength validtype:

In the above code, we define a input box that should be inputed at least 5 characters.

Dependencies

none

Options

Override defaults with $.fn.validatebox.defaults

Properties

Name	Type	Description	Default
required	boolean	Defines if the field should be inputed.	false
validType	string	Defines the field valid type, such as email, url, etc.	null
missingMessage	string	Tooltip text that appears when the text box is empty.	This field is required.
invalidMessage	string	Tooltip text that appears when the content of text box is invalid.	null

Methods

Name	Parameter	Description
destroy	none	Remove and destroy the component.
validate	none	Do the validation to determine whether the content of text box is valid.
isValid	none	call validate method and return the validation result, true or false.

datebox

Usage

Markup

jQuery

$('#dd').datebox(options);

Dependencies

calendar
validatebox

Options

Override defaults with $.fn.datebox.defaults

Properties

Name	Type	Description	Default
currentText	string	The text to display for the current day button.	Today
closeText	string	The text to display for the close button.	Close
disabled	boolean	When true to disable the field.	false
required	boolean	Defines if the field should be inputed.	false
missingMessage	string	Tooltip text that appears when the text box is empty.	This field is required.
formatter	function	A function to format the date, the function take a 'date' parameter and return a string value.
parser	function	A function to parse a date string, the function take a 'date' string and return a date value.

Events

Name	Parameters	Description
onSelect	date	Fires when user select a date.

Methods

Name	Parameter	Description
destroy	none	Destroy the component.
disable	none	Disable the field.
enable	none	Enable the field.

calendar

Usage

Markup

jQuery

$('#cc').calendar(options);

Options

Override defaults with $.fn.calendar.defaults

Properties

Name	Type	Description	Default
width	number	The width of calendar component.	180
height	number	The height of calendar component.	180
fit	boolean	When true to set the calendar size fit it's parent container.	false
border	boolean	Defines if to show the border.	true
weeks	array	The list of week to be showed.	['S','M','T','W','T','F','S']
months	array	The list of month to be showed.	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
year	number	The year of calendar.	current year(four digits)
month	number	The month of calendar.	current month, start with 1
current	Date	The current date.	current date

Events

Name	Parameters	Description
onSelect	date	Fires when user select a date.

o 10.5 window

Usage

Markup

Many window properties can be defined in markup, such as icon, title, etc.

Window Content

</div>

jQuery

To create a window:

$('#win').window(options);

To open a window:

$('#win').window('open');

Dependencies

draggable
resizable
panel

Options

Override defaults with $.fn.window.defaults.

Properties

Many window properties can inhirit from panel, below is the window private properties.

Name	Type	Description	Default
zIndex	number	Window z-index,increase from it.	9000
draggable	boolean	Defines if window can be dragged.	true
resizable	boolean	Defines if window can be resized.	true
shadow	boolean	If set to true,when window show the shadow will show also.	true
modal	boolean	Defines if window is a modal window.	true

Window override some panel properties.

Name	Type	Description	Default
title	string	The window title text.	New Window
collapsible	boolean	Defines if to show collapsible button.	true
minimizable	boolean	Defines if to show minimizable button.	true
maximizable	boolean	Defines if to show maximizable button.	true
closable	boolean	Defines if to show closable button.	true

Events

Window events is same as panel events, see panel events for more information.

Methods

Window methods is same as panel methods, except the 'header' and 'body' method.

dialog

Usage

Markup

Dialog Content.

</div>

jQuery

$('#dd').dialog(options);

Dependencies

draggable
resizable
panel
window
linkbutton

Options

Override defaults with $.fn.dialog.defaults.

Properties

Many properties can inhirit from window, below is the dialog private properties:

Name	Type	Description	Default
title	string	The dialog title text.	New Dialog
collapsible	boolean	Defines if to show collapsible button.	false
minimizable	boolean	Defines if to show minimizable button.	false
maximizable	boolean	Defines if to show maximizable button.	false
resizable	boolean	Defined if the dialog can be resized.	false
toolbar	array	The top toolbar of dialog, each tool contains: text, iconCls, disabled, handler etc.	null
buttons	array	The bottom buttons of dialog, each button contains: text, iconCls, handler etc.	null

Events

Dialog events is same as window events, see window events for more information.

Methods

Dialog methods is same as window methods, see window methods for more information.

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

Messager

Dependencies

draggable
resizable
panel
window
linkbutton

Options

Override defaults with $.messager.defaults.

Name	Type	Description	Default
ok	string	The Ok button text.	Ok
cancel	string	The Cancel button text.	Cancel

Methods

Name	Parameters	Description
$.messager.show	options	Show a message window on right bottom of screen. The options parameter is a configuration object: showType: Defines how the message window to be showed. Available values are: null,slide,fade,show. Defaults to slide. showSpeed: Defines the time in milliseconds message window finishs show. Defaults to 600. width: Defines the width of message window. Defaults to 250. height: Defines the height of message window. Defaults to 100. msg: The message text to be showed. title: The title text to be showed on header panel. timeout: If defines to 0, the message window will not close unless user close it. Defines to unzero, the message window will be auto closed when timeout.
$.messager.alert	title, msg, icon, fn	Show an alert window. Parameters: title: The title text to be showed on header panel. msg: The message text to be showed. icon: The icon image to be showed. Available value are: error,question,info,warning. fn: The callback function triggered when window closed.
$.messager.confirm	title, msg, fn	Show a confirmation message window with Ok and Cancel buttons. Parameters: title: The title text to be showed on header panel. msg: The message text to be showed. fn(b): The callback function, when user click Ok button, pass a true value to function, otherwise pass a false to it.
$.messager.prompt	title, msg, fn	Show a message window with Ok and Cancel buttons prompting user to enter some text. Parameters: title: The title text to be showed on header panel. msg: The message text to be showed. fn(val): The callback function with a value parameter user entered.

·Welcome page
·What is a Wiki Site?
·How to edit pages?
·How to join this site?
·Site members
·Recent changes
·List all pages
·Page Tags
·Site Manager

Page tags

easy jquery plugin ui widget

Add a new page

窗體頂端

窗體底端

edit this panel

Pagination

Usage

Markup

jQuery

$('#pp').pagination(options);

Dependencies

linkbutton

Options

Override defaults with $.fn.pagination.defaults.

Properties

Name	Type	Description	Default
total	number	The total records, which should be setted when pagination is created.	1
pageSize	number	The page size.	10
pageNumber	number	Show the page number when pagination is created.	1
pageList	array	User can change the page size. The pageList property defines how many size can be changed.	[10,20,30,50]
loading	boolean	Defines if data is loading.	false
buttons	array	Defines custom buttons, each button contains two properties: iconCls: the CSS class which will show a background image handler: a handler function when button is clicked	null
showPageList	boolean	Defines if to show page list.	true
showRefresh	boolean	Defines if to show refresh button.	true
beforePageText	string	Show a label before the input component.	Page
afterPageText	string	Show a label after the input component.	of {pages}
displayMsg	string	Display a page information.	Displaying {from} to {to} of {total} items

Events

Name	Parameters	Description
onSelectPage	pageNumber, pageSize	Fires when user select a new page. callback function contains two parameter: pageNumber: the new page number pageSize: the new page size
onBeforeRefresh	pageNumber, pageSize	Fires before the refresh button is clicked, return false to cancel the refresh action.
onRefresh	pageNumber, pageSize	Fires after refresh.
onChangePageSize	pageSize	Fires when user change the page size.

o 10.6 Datagrid and tree

Usage

Markup

jQuery

$('#tt').datagrid(options);

The DataGrid data format sample

{"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}]}

Dependencies

panel
resizable
linkbutton
pagination

Options

DataGrid Properties

Override default with $.fn.datagrid.defaults.

Name	Type	Description	Default
title	string	The datagrid panel title text.	null
iconCls	string	A CSS class that will provide a background image to be used as the header icon.	null
border	boolean	True to show datagrid panel border.	true
width	number	The width of datagrid width.	auto
height	number	The height of datagrid height.	auto
columns	array	The datagrid columns config object, see column properties for more details.	null
frozenColumns	array	Same as the columns property, but the these columns will be frozen on left.	null
striped	boolean	True to stripe the rows.	false
method	string	The method type to request remote data.	post
nowrap	boolean	True to display data in one line.	true
idField	string	Indicate which field is an identity field.	null
url	string	A URL to request data from remote site.	null
loadMsg	string	When loading data from remote site, show a prompt message.	Processing, please wait …
pagination	boolean	True to show a pagination toolbar on datagrid bottom.	false
rownumbers	boolean	True to show a row number column.	false
singleSelect	boolean	True to allow selecting only one row.	false
fit	boolean	True to set size to fit it's parent container.	false
pageNumber	number	When set pagination property, initialize the page number.	1
pageSize	number	When set pagination property, initialize the page size.	10
pageList	array	When set pagination property, initialize the page size selecting list.	[10,20,30,40,50]
queryParams	object	When request remote data, sending additional parameters also.	{}
sortName	string	Defines which column can be sorted.	null
sortOrder	string	Defines the column sort order, can only be 'asc' or 'desc'.	asc
remoteSort	boolean	Defines if to sort data from server.	true
editors	object	Defines the editor when editing a row.	predefined editors

Column Properties

The DataGrid Columns is an array object, which element is an array too.
The element of element array is a config object, which defines every column field.
code example:

columns:[[

{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},

{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},

{title:'Item Details',colspan:4}

],[

{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},

{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

Name	Type	Description	Default
title	string	The column title text.	undefined
field	string	The column field name.	undefined
width	number	The width of column.	undefined
rowspan	number	Indicate how many rows a cell should take up.	undefined
colspan	number	Indicate how many columns a cell should take up.	undefined
align	string	Indicate how to align the column data. 'left','right','center' can be used.	undefined
sortable	boolean	True to allow the column can be sorted.	undefined
checkbox	boolean	True to show a checkbox.	undefined
formatter	function	The cell formatter function. take three parameter: value: the field value. rowData: the row record data. rowIndex: the row index.	undefined
sorter	function	The custom field sort function, take three parameter: a: the first field value. b: the second field value. order: the sort order, 'asc' or 'desc'.	undefined
editor	string,object	Indicate the edit type. When string indicates the edit type, when object contains two properties: type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, the editor options corresponding to the edit type.	undefined

Editor

Override default with $.fn.datagrid.defaults.editors.
Every editor has following functions:

Name	Parameters	Description
init	container, options	Initialize and create the editor.
destroy	elem	Destroy the editor if necessary.
getValue	elem	Get value from editor text.
setValue	elem, value	Set value for editor.
resize	elem, width	Resize the editor if necessary.

For example, the text editor is defined as following:

$.extend($.fn.datagrid.defaults.editors, {

text: {

init: function(container, options){

var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);

return input;

},

getValue: function(elem){

return $(elem).val();

},

setValue: function(elem, value){

$(elem).val(value);

},

resize: function(elem, width){

var input = $(elem);

if ($.boxModel == true){

input.width(width - (input.outerWidth() - input.width()));

} else {

input.width(width);

}

});

Events

Name	Parameters	Description
onLoadSuccess	data	Fires when data is loaded successfully.
onLoadError	none	Fires when some error occur to load remote data.
onBeforeLoad	param	Fires before a request is made to load data. If return false the load action will be canceled.
onClickRow	rowIndex, rowData	Fires when user click a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onDblClickRow	rowIndex, rowData	Fires when user dblclick a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onSortColumn	sort, order	Fires when user sort a column, the parameters contains: sort: the sort column field name order: the sort column order
onSelect	rowIndex, rowData	Fires when user select a row, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row
onUnselect	rowIndex, rowData	Fires when user unselect a row, the parameters contains: rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row
onBeforeEdit	rowIndex, rowData	Fires when user start editing a row, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row
onAfterEdit	rowIndex, rowData, changes	Fires when user finish editing, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row changes: the changed field/value pairs
onCancelEdit	rowIndex, rowData	Fires when user cancel editing a row, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row

Methods

Name	Parameter	Description
options	none	Return the options object.
getPager	none	Return the pager object.
getPanel	none	Return the panel object.
resize	param	Do resize and do layout.
reload	param	Reload the rows. If the 'param' is specified, it will replace with the queryParams property.
fixColumnSize	none	fix columns size.
loadData	data	Load local data, the old rows will be removed.
getData	none	Return the loaded data.
getRows	none	Return the current page rows.
getRowIndex	row	Return the specified row index, the row parameter can be a row record or an id field value.
getSelected	none	Return the first selected row record or null.
getSelections	none	Return all selected rows, when no record selected, am empty array will return.
clearSelections	none	Clear all selections.
selectAll	none	Select all current page rows.
selectRow	index	Select a row, the row index start with 0.
selectRecord	idValue	Select a row by passing id value parameter.
unselectRow	index	Unselect a row.
beginEdit	index	Begin editing a row.
endEdit	index	End editing a row.
cancelEdit	index	Cancel editing a row.
refreshRow	index	Refresh a row.
validateRow	index	validate the specified row, return true when valid.
appendRow	row	Append a new row.
deleteRow	index	Delete a row.
getChanges	type	Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges	none	Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges	none	Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
mergeCells	options	Merge some cells to one cell, the options contains following properties: index: the row index. field: the field name. rowspan: the rowspan count to be merged. colspan: the colspan count to be merged.

tree

Usage

Markup

Tree can be definded in <ul/> element. The markup can defines leaf and children, bellow is an example:

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

Tree can also be defined in an empty <ul/> element:

jQuery

$('#tt').tree(options);

Tree data format

Every node can contains following properties:

id: node id, which is important to load remote data
text: node text to show
state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site
checked: Indicate whether the node is checked selected.
attributes: custom attributes can be added to a node
children: an array nodes defines some children nodes

Some example:

[{

"id":1,

"text":"Folder1",

"iconCls":"icon-save",

"children":[{

"text":"File1",

"checked":true

},{

"text":"Books",

"state":"open",

"attributes":{

"url":"/demo/book/abc",

"price":100

},

"children":[{

"text":"PhotoShop",

"checked":true

},{

"id": 8,

"text":"Sub Bookds",

"state":"closed"

}]

},{

"text":"Languages",

"state":"closed",

"children":[{

"text":"Java"

},{

"text":"C#"

}]

Dependencies

none

Options

Override defaults with $.fn.tree.defaults.

Tree Node is a javascript object which contains following properties:

id: An identity value bind to the node.
text: Text to be showed.
checked: Whether the node is checked.
attributes: Custom attributes bind to the node.
target: Target DOM object.

Properties

Name	Type	Description	Default
url	string	a URL to retrive remote data.	null
animate	boolean	Defines if to show animation effect when node expand or collapse.	false
checkbox	boolean	Defines if to show the checkbox before every node.	false
data	array	The node data to be loaded.	null

Events

Name	Parameters	Description
onClick	node	Fires when user click a node, the node parameter contains following properties: id: the node id text: the node text checked: Whether the node is checked attributes: the node custom attributes target: the target clicked DOM object
onDblClick	node	Fires when user dblclick a node.
onBeforeLoad	node, param	Fires before a request is made to load data, return false to cancel this load action.
onLoadSuccess	node, data	Fires when data loaded successfully.
onLoadError	arguments	Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.
onBeforeExpand	node	Fires before node is expanded, return false to cancel this expand action.
onExpand	node	Fires when node is expanded.
onBeforeCollapse	node	Fires before node is collapsed, return false to cancel this collapse action.
onCollapse	node	Fires when node is collapsed.

Methods

Name	Parameter	Description
options	none	Return the options of tree.
loadData	data	Load the tree data.
reload	none	Reload tree data.
getRoot	none	Get the root node, return node object
getRoots	none	Get the root nodes, return node array.
getParent	target	Get the parent node, the target parameter indicate the node DOM object.
getChildren	target	Get the children nodes, the target parameter indicate the node DOM object.
getChecked	none	Get all checked nodes.
getSelected	none	Get the selected node and return it, if no node selected return null.
isLeaf	target	Determine the specified node is leaf, the target parameter indicate the node DOM object.
find	id	Find the specifed node and return the node object.
select	target	Select a node, the target parameter indicate the node DOM object.
check	target	Set the specified node to checked.
uncheck	target	Set the specified node to unchecked.
collapse	target	Collapse a node, the target parameter indicate the node DOM object.
expand	target	Expand a node, the target parameter indicate the node DOM object.
collapseAll	none	Collapse all nodes.
expandAll	none	Expand all nodes.
expandTo	target	Expand from root to specified node.
append	param	Append some children nodes to a parent node. param parameter has two properties: parent: DOM object, the parent node to append to, if not assigned, append as root nodes. data: array, the nodes data.
toggle	target	Toggles expanded/collapsed state of the node, the target parameter indicate the node DOM object.
remove	target	Remove a node and it's children nodes, the target parameter indicate the node DOM object.
pop	target	Pop a node and it's children nodes, the method is same as remove but return the removed node data.
update	param	Update the specified node. param has following properties: target(DOM object, the node to be updated),id,text,iconCls,checked,etc.

Jquery easyui教程

· 1基本拖放

· 2構建購物車型拖放

· 3建立課程表

· 4選單和按鈕Menu and Button

o 4.1建立簡單選單

o 4.2建立連線按鈕

o 4.3建立選單按鈕

o 4.4建立拆分按鈕

· 5建立邊框版面網頁

o 5.1皮膚上的複合版面

o 5.2建立可摺疊版面

o 5.3建立TABS

o 5.4動態新增tabs

o 5.5建立XP式樣左皮膚

· 6 DataGrid 資料格

o 6.1 轉換HTML表格到DataGrid

o 6.2 給DataGrid新增分頁

o 6.3 得到DataGrid選擇行

o 6.4 新增工具欄到DataGrid

o 6.5 DataGrid凍結列

o 6.6 動態改變DataGrid列

o 6.7 格式化DataGrid列

o 6.8 新增排序到DataGrid

o 6.9 在DataGrid上的核取方塊

o 6.10 自定義DataGrid分頁

o 6.11使DataGrid能編輯

o 6.12 DataGrid中合併單元格

· 7 視窗

o 7.1 我第一個視窗

o 7.2 自定義視窗工具

o 7.3 Window和Layout

o 7.4 建立對話方塊

· 8 Tree

· 8.1從標記建立tree

· 8.2建立非同步Tree

· 8.3 新增節點

· 8.4 建立帶有checkbox節點的tree

· 9 表單

o 9.1 Ajax方式傳送表單

o 9.2 給表單新增複合tree欄位

o 9.3 驗證表單

· 10 Documentation文件

o 10.1 Base

§ 10.1.1 EasyLoader

§ 10.1.2 Draggable

§ 10.1.3 Droppable

§ 10.1.4 Resizable

o 10.2 layout

§ 10.2.1 Panel

§ 10.2.2 tabs

§ 10.2.3 accordion

§ 10.2.4 layout

o 10.3 Menu and button

o 10.4 form

o 10.5 window

o 10.6 Datagrid and tree

相關文章