easyUI学习

• easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
• easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
• 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
• HTML 网页的完整框架。
• easyui 节省了开发产品的时间和规模。
• easyui 非常简单，但是功能非常强大。

数据网格（datagrid）组件包含两种方法来检索选中行数据：

• getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
• getSelections：取得所有选中行数据，返回元素记录的数组数据。

• 取得选中行数据：

var row = $('#tt').datagrid('getSelected');
if (row){
    alert('Item ID:'+row.itemid+"Price:"+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(''));

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

• north 区域可以用来显示网站的标语。
• south 区域可以用来显示版权以及一些说明。
• west 区域可以用来显示导航菜单。
• east 区域可以用来显示一些推广的项目。
• center 区域可以用来显示主要的内容。

为了应用布局（layout），您应该确定一个布局（layout）容器，然后定义一些区域。布局（layout）必须至少需要一个 center 区域

冻结列：当用户在网格上移动水平滚动条时，冻结列不能滚动到视图的外部。

为了冻结列，您需要定义 frozenColumns 属性。frozenColumn 属性和 columns 属性一样。

$('#tt').datagrid({
	title:'Frozen Columns',
	iconCls:'icon-save',
	width:500,
	height:250,
	url:'data/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}
	]]
});

为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数：

• value：当前列对应字段值。
• row：当前的行记录数据。
• index：当前的行下标。

注意，'listprice' 字段有一个 'formatter' 属性，用来指明格式化函数。

<table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
		url="data/datagrid_data.json"
		singleSelect="true" iconCls="icon-save">
	<thead>
		<tr>
			<th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>
			<th field="unitcost" width="80" align="right">Unit Cost</th>
		</tr>
	</thead>
</table>

function formatPrice(val,row){
	if (val < 20){
		return '<span style="color:red;">('+val+')</span>';
	} else {
		return val;
	}
}

数据网格（DataGrid）的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的，列是不能排序的，除非您设置 sortable 属性为 true。

easyui几种类型

数据网格	class="easyui-datagrid"
布局	class="easyui-layout"
菜单	class="easyui-menu"
链接按钮	class="easyui-linkbutton"
菜单按钮	class="easyui-menubutton"
分割按钮	class="easyui-splitbutton"
面板	class="easyui-panel"
折叠面板	class="easyui-accordion"
标签页	class="easyui-tabs"
属性网格	class="easyui-propertygrid"
简单窗口	class="easyui-window"
对话框	class="easyui-dialog"
树形菜单	class="easyui-tree"
树形网格	class="easyui-treegrid"
树形下拉框	class="easyui-combotree"
validatebox插件验证	class="easyui-validatebox"