easyui 总结

一、概述

1.1 EasyUI是什么？
EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。

EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签、div标签等）即可。

EasyUI开发前端页面的好处：

丰富的jQuery插件库
使用简单，可以快速开发出原型界面
支持html5，实现跨浏览器等等

二 常见控件

详情可以参考easyUI的官方文档 这里只是总结一些个人用的比较多的控件

布局控件

布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。

<div id="cc" class="easyui-layout" data-options="fit:true">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>       
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>

表格控件

数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。

创建表格的三种方式：

从现有表格元素基础上创建DataGrid
通过table标签创建DataGrid
通过js脚本创建DataGrid

这里只样式JS的方法

<table id="dg"></table>
-----------------------------------
	$('#dg').datagrid({
   
	    url:'datagrid_data.json',  
	    method:'get',
	    fit:true,  
	    columns:[[    
	        {
   field:'code',title:'编号',width:100},    
	        {
   field:'name',title:'名称',width:100},    
	        {
   field:'price',title:'价格',width:100,align:'right',formatter:function(value,row,index) {
   
	        	return value + "元";
	        }}    
	    ]]
	});  
});

DataGrid的主要方法

load：载入并显示第一页记录，通常用于执行条件查询功能；

$('#table').datagrid('load', {
   '参数名':'参数值', ...});

reload：重载表格数据，与load方法的功能相同。但是重载的是当前页面，而不是第一页&#