Jquery easyui 网络教程
作者：小易在线
Jquery easyui 教程
小易在线
二零一一年三月
本文档及其所含信息为个人所有
请保留所有的信息完整
作者：小易在线
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
Jquery easyui 网络教程
作者：小易在线
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
Jquery easyui 网络教程
作者：小易在线
概述
这个教程的目的是说明如何使用 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">
Jquery easyui 网络教程
作者：小易在线
� 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;
}
});
