jQuery-EasyUI教程.doc

Jquery easyui 网络教程
目 录
· 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文件：
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
· 1基本拖放
这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：
<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></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应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：
<ul class="products">
<li>
<a href="#" class="item">
<img src="shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<!-- other products -->
</ul>
ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。
创建购物车：
<div class="cart">
<h1>Shopping Cart</h1>
<table id="cartcontent" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<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>
<h2>Drop here to add to cart</h2>
</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'>元素。

显示课程
<div class="left">
<table>
<tr>
<td><div class="item">English</div></td>
</tr>
<tr>
<td><div class="item">Science</div></td>
</tr>
<!-- other subjects -->
</table>
</div>
显示时间表
<div class="right">
<table>
<tr>
<td class="blank"></td>
<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>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<!-- other cells -->
</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
o 4.1建立简单菜单
o 4.2建立链接按钮
o 4.3建立菜单按钮
o 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元素：
<h3>DEMO1</h3>
<div style="padding:5px;background:#efefef;width:500px;">
<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>

<h3>DEMO2</h3>
<div style="padding:5px;background:#efefef;width:500px;">
<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>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-help">&nbsp;</a>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-save"></a>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-back"></a>
</div>
icon属性是icon CSS类是在按钮上显示的图标。运行代码，出现：

一些时候，你可以决定禁用或者不禁用连接按钮，使用下面的代码可以禁用连接图标：
$(selector).linkbutton({disabled:true});

o 4.3建立菜单按钮
菜单按钮包含按钮和菜单两部分，当点击或者移动鼠标到按钮上的时候，显示相应的菜单。定义菜单按钮，需要定义链接按钮和菜单，像这样：
<div style="background:#C9EDCC;padding:5px;width:200px;">
<a href="javascript:void(0)" id="mb1" icon="icon-edit">Edit</a>
<a href="javascript:void(0)" id="mb2" icon="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div icon="icon-undo">Undo</div>
<div icon="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div icon="icon-remove">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
使用下列jQuery代码：
$('#mb1').menubutton({menu:'#mm1'});
$('#mb2').menubutton({menu:'#mm2'});
现在，菜单按钮就完成了。

o 4.4建立拆分按钮
拆分按钮包括链接按钮和菜单。当用户点击或者悬停在下箭头区域时显示相关菜单。这个例子是建立拆分按钮的演示：
首先，创建一个链接按钮和菜单标记：
<div style="border:1px solid #ccc;background:#ddd;padding:5px;width:120px;">
<a href="javascript:void(0)" id="sb" icon="icon-edit">Edit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
<div icon="icon-undo">Undo</div>
<div icon="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Open</span>
<div style="width:150px;">
<div>Firefox</div>
<div>Internet Explorer</div>
<div class="menu-sep"></div>
<div>Select Program...</div>
</div>
</div>
<div icon="icon-remove">Delete</div>
<div>Select All</div>
</div>
jQuery 代码：
$('#sb').splitbutton({menu:'#mm'});
运行后会出现：

2. 版面
o 创建边框版面
o 面板上的复合版面
o 建立可折叠版面
o 建立TABS
o 动态添加TABS
o 建立XP样式左面板
· 5创建边框版面网页
边框版面提供5个区域：东西南北中（其实就是上下左右中），下面是通常用法：
· 5.1北区可以用于网站banner
· 5.2南区可以用于版权信息和注释
· 5.3西区可以用于导航菜单
· 5.4东区可以用于推广项目
· 5.5中区可以用于主内容
运用版面，需要确认版面容器然后定义一些区域。版面至少要有一个中间区域。下列是版面例子：
<div class="easyui-layout" style="width:400px;height:300px;">
<div region="west" split="true" title="Navigator" style="width:150px;">
<p style="padding:5px;margin:0;">Select language:</p>
<ul>
<li><a href="javascript:void(0)" onclick="showpage('java.html')">Java</a></li>
<li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>
<li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" href="java.html" style="padding:5px;">
</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内容变得不可见。
<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="About Accordion" icon="icon-ok" style="overflow:auto;padding:10px;">
<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>
<div title="About easyui" icon="icon-reload" selected="true" style="padding:10px;">
easyui help you build your web page easily
</div>
<div title="Tree Menu">
<ul id="tt1" class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span>File 11</span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File2</span>
</li>
</ul>
</div>
</div>
我们建立3个面板，第三个面板内容是一个树状菜单。

o 5.3建立TABS
这个教程显示你如何使用easyui建立tabs组件。tabs有多个面板，这些面板能被动态的添加或者删除。你可以使用tabs来显示不同的实体。在一个时间内只显示一个面板。每一个面板拥有title，icon和close按钮。当tabs被选择时，相关面板的内容被现实。

tabs从HTML标记创建，包含DIV容器和一些DIV面板。
<div class="easyui-tabs" style="width:400px;height:100px;">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true