jQuery EasyUI网站开发实战

导论　使用EasyUI框架实现快速开发 1

0.1　下载并使用EasyUI框架 2

0.1.1　下载EasyUI程序开发包 2

0.1.2　框架文件结构 3

0.1.3　在页面中使用框架 4

0.1.4　确定页面主题风格及配色 5

0.2　简单的登录窗口设计 9

0.2.1　代码总体结构 10

0.2.2　页面内容代码解析 10

0.2.3　试运行 12

0.3　完善登录窗口界面 12

0.3.1　选择要操作的DOM对象 12

0.3.2　应用EasyUI组件 13

0.3.3　设置组件属性 14

0.4　用户输入验证 14

0.4.1　用户名验证 15

0.4.2　密码验证 15

0.4.3　执行登录验证 16

0.5　通过回车键快速移动光标 18

0.5.1　jQuery事件与EasyUI组件事件 18

0.5.2　将需要重复利用的事件代码封装为函数 20

0.6　向服务器提交验证 21

0.6.1　客户端JS程序代码 21

0.6.2　服务器端PHP程序代码 22

0.7　用户会话控制 24

0.7.1　什么是会话控制 24

0.7.2　添加“用户退出”功能 25

0.7.3　门户型网站的登入、登出设计 28

D1章　布局类组件 30

1.1　panel（面板） 31

1.1.1　属性 31

1.1.2　方法 42

1.1.3　事件 44

1.2　tabs（选项卡） 46

1.2.1　属性 47

1.2.2　方法 50

1.2.3　事件 55

1.3　accordion（分类选项卡） 56

1.3.1　属性 57

1.3.2　方法 59

1.3.3　事件 62

1.4　layout（布局） 62

1.4.1　通过页面标签创建 62

1.4.2　通过JS代码管理布局 66

D2章　基础工具类组件 71

2.1　draggable（拖动） 72

2.1.1　属性 73

2.1.2　方法 77

2.1.3　事件 78

2.2　droppable（放置） 80

2.2.1　放置组件的属性、方法和事件 80

2.2.2　综合实例 80

2.3　resizable（调整大小） 87

2.3.1　属性 88

2.3.2　方法 89

2.3.3　事件 89

2.4　window（窗口） 89

2.4.1　属性 90

2.4.2　方法 92

2.4.3　事件 93

2.5　dialog（对话框） 93

2.5.1　属性 93

2.5.2　方法 95

2.5.3　事件 95

2.6　progressbar（进度条） 96

2.6.1　属性 96

2.6.2　方法 96

2.6.3　事件 97

2.7　slider（滑动条） 98

2.7.1　属性 98

2.7.2　方法 99

2.7.3　事件 100

2.8　tooltip（提示框） 101

2.8.1　属性 103

2.8.2　方法 104

2.8.3　事件 104

2.9　messager（消息框） 108

2.9.1　消息框 108

2.9.2　警告框 110

2.9.3　确认框 110

2.9.4　输入确认框 111

2.9.5　进度消息框 112

2.10　calendar（日历） 114

2.10.1　属性 114

2.10.2　方法 119

2.10.3　事件 119

2.10.4　实例扩展 121

第3章　树、菜单与按钮类组件 123

3.1　tree（树） 124

3.1.1　静态树的创建 126

3.1.2　动态树的创建 129

3.1.3　属性列表 135

3.1.4　方法列表 138

3.1.5　事件列表 145

3.2　menu（菜单） 155

3.2.1　菜单创建与菜单项属性 155

3.2.2　菜单属性 158

3.2.3　菜单方法 159

3.2.4　菜单事件 162

3.2.5　将树应用于菜单中 163

3.3　linkbutton（按钮） 165

3.3.1　属性 166

3.3.2　方法 168

3.3.3　事件 168

3.4　menubutton（菜单按钮） 169

3.4.1　属性 169

3.4.2　方法 171

3.4.3　事件 171

3.5　splitbutton（分割菜单按钮） 172

3.6　switchbutton（开关按钮） 172

3.6.1　属性 173

3.6.2　方法 174

3.6.3　事件 174

第4章　表单类组件 175

4.1　validatebox（验证框） 176

4.1.1　全部成员 176

4.1.2　验证规则 177

4.1.3　提示信息 180

4.2　textbox（文本框） 183

4.2.1　属性 183

4.2.2　方法 187

4.2.3　事件 188

4.3　passwordbox（密码框） 189

4.3.1　属性 189

4.3.2　方法 190

4.3.3　事件 190

4.4　searchbox（搜索框） 190

4.4.1　属性 190

4.4.2　方法 192

4.4.3　事件 193

4.5　combo（下拉框） 193

4.5.1　创建下拉框 193

4.5.2　属性、方法和事件 195

4.5.3　单选与复选的完整实例 197

4.6　combobox（列表下拉框） 199

4.6.1　属性 200

4.6.2　方法 212

4.6.3　事件 215

4.7　combotree（树形下拉框） 218

4.7.1　属性 218

4.7.2　方法 221

4.7.3　事件 224

4.8　tagbox（标签框） 224

4.8.1　创建标签框 224

4.8.2　新增成员 226

4.8.3　列表数据过滤 227

4.8.4　远程列表数据加载问题 228

4.9　numberbox（数值输入框） 229

4.9.1　属性 229

4.9.2　方法 232

4.9.3　事件 232

4.10　spinner（微调器） 233

4.10.1　属性 233

4.10.2　方法 234

4.10.3　事件 234

4.11　numberspinner（数值微调器） 235

4.11.1　标签方式创建 235

4.11.2　JS方式创建 236

4.12　timespinner（时间微调器） 237

4.12.1　属性 237

4.12.2　方法 239

4.12.3　事件 239

4.13　datetimespinner（日期时间微调器） 239

4.13.1　formatter属性 240

4.13.2　parser属性 241

4.13.3　重新设定selections属性 242

4.14　datebox（日期输入框） 242

4.14.1　属性 242

4.14.2　方法 248

4.14.3　事件 249

4.15　datetimebox（日期时间输入框） 249

4.15.1　属性 249

4.15.2　方法 250

4.16　filebox（文件框） 251

4.17　form（表单） 253

4.17.1　表单数据提交流程 254

4.17.2　form组件成员 255

4.17.3　文件上传 259

第5章　数据表格基础组件 263

5.1　pagination（分页） 264

5.1.1　属性 264

5.1.2　方法 268

5.1.3　事件 269

5.2　datagrid表格与列属性 269

5.2.1　标签方式创建数据表格 269

5.2.2　JS方式创建数据表格 271

5.2.3　datagrid表格的列属性 273

5.3　datagrid数据加载及分页排序 280

5.3.1　url方式加载表格数据 280

5.3.2　数据分页与排序 283

5.3.3　loader与loadFiler 289

5.3.4　与datagrid数据加载、分页、排序相关的属性汇总 290

5.4　datagrid外观、编辑器及视图属性 291

5.4.1　行、列操作属性 292

5.4.2　顶部工具栏及其他附加按钮 295

5.4.3　编辑器属性 297

5.4.4　视图属性 299

5.5　datagrid方法 301

5.5.1　常规方法 301

5.5.2　选择数据行与返回数据方法 304

5.5.3　数据记录编辑方法 305

5.5.4　数据加载与刷新方法 308

5.6　datagrid事件 309

5.6.1　数据加载事件 309

5.6.2　选择行、排序及右键菜单事件 311

5.6.3　单击、双击及编辑事件 314

5.7　datagrid之CRUD完整实例 316

5.7.1　在页面中增加相应的DOM元素 317

5.7.2　对操作按钮和查询项目的初始化 317

5.7.3　增改删事件前端代码 318

5.7.4　增改删事件后台代码 322

5.7.5　数据查询 325

第6章　数据表格增强组件 327

6.1　propertygrid（属性表格） 328

6.1.1　行数据 328

6.1.2　新增属性和方法 329

6.2　datalist（数据列表） 332

6.3　combogrid（表格下拉框） 335

6.3.1　本地数据的加载与查询 335

6.3.2　远程数据的加载与查询 337

6.3.3　将表格下拉框作为编辑器使用 339

6.4　treegrid（树形表格） 341

6.4.1　新增属性 341

6.4.2　方法 344

6.4.3　事件 345

6.4.4　远程数据加载综合实例 346

6.4.5　不存在父节点id列的远程数据加载 354

6.5　combotreegrid（树形表格下拉框） 357

6.5.1　新增属性 357

6.5.2　新增方法 358

第7章　数据表格功能扩展 360

第7章　数据表格功能扩展 361

7.1　edatagrid（可编辑数据表格） 363

7.1.1　新增属性 364

7.1.2　新增方法 364

7.1.3　新增事件 366

7.2　datagrid-cellediting（单元格编辑表格） 367

7.2.1　新增属性 367

7.2.2　新增方法 367

7.2.3　新增事件 369

7.3　columns-ext（列扩展表格） 370

7.3.1　基于datagrid扩展的方法 370

7.3.2　基于treegrid扩展的方法 371

7.3.3　新增事件 374

7.4　datagrid-dnd（可拖放行的数据表格） 374

7.4.1　新增属性 375

7.4.2　新增方法 375

7.4.3　新增事件 376

7.5　treegrid-dnd（可拖放行的树形表格） 376

7.5.1　新增属性 377

7.5.2　新增方法 378

7.5.3　新增事件 378

7.6　datagrid-filter（可过滤行的数据表格） 378

7.6.1　新增属性 379

7.6.2　新增方法 380

7.6.3　新增事件 383

7.7　datagrid-view（数据表格视图） 383

7.7.1　DetailView（详细视图） 383

7.7.2　GroupView（分组视图） 387

7.7.3　BufferView（缓存视图） 388

7.7.4　ScrollView（滚动视图） 390

7.8　pivotgrid（数据分析表格） 391

7.8.1　新增属性 393

7.8.2　新增方法 395

第8章　其他功能扩展 399

8.1　etree（可编辑树） 400

8.1.1　新增属性 401

8.1.2　新增方法 402

8.2　color（颜色下拉框） 402

8.3　texteditor（文本编辑器） 403

8.3.1　新增属性 403

8.3.2　新增方法 404

8.4　ribbon界面菜单 404

8.4.1　标签创建方式 404

8.4.2　JS创建方式 406

8.4.3　新增成员 408

8.5　RTL支持 409

8.6　portal（门户） 409

8.6.1　属性 413

8.6.2　方法 413

8.6.3　事件 414