easyUI学习

例子都是官网的，挑一些自己觉得目前开发中经常用到的，在这里收集，也方便以后查找

1.最简单的CRUD操作

关闭窗口

οnclick="javascript:$('#dlg').dialog('close')"

打开窗口

$('#dlg').dialog('open').dialog('setTitle','New User');

清空表单数据

$('#fm').form('clear');

获取选中行并在编辑的时候把数据填充到表单中

(数据网格（datagrid）组件包含两种方法来检索选中行数据：
getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
getSelections：取得所有选中行数据，返回元素记录的数组数据。)

var row = $('#dg').datagrid('getSelected');
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);

重新加载数据，类似于界面刷新

$('#dg').datagrid('reload');

2.按钮

<a href="#" id="print" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>

只有一个，按钮的禁用

$("#print").linkbutton('disable');

3.动态添加Tab页，这个可以说非常常用了，一定要掌握

<a href="#" class="easyui-linkbutton" οnclick="addTab('easyui','http://jeasyui.com/')">easyui</a>

function addTab(title, url){
			if ($('#tt').tabs('exists', title)){
				$('#tt').tabs('select', title);
			} else {
				var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
				$('#tt').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
			}
		}

很简单，一看就懂

还有一个动态的Tab页，类似于跑马灯，不常用，就是个定时事件，不过一些属性也是可以学习一下的

$(function(){
			var index = 0;
			var t = $('#tt');
			var tabs = t.tabs('tabs');
			setInterval(function(){
				t.tabs('select', tabs[index].panel('options').title);
				index++;
				if (index >= tabs.length){
					index = 0;
				}
			}, 3000);
		});

4.easyui的查询加载

itemid和productid是查询的条件，查询对于执行的后台方法是表单标签的url属性

function doSearch(){
	$('#tt').datagrid('load',{
		itemid: $('#itemid').val(),
		productid: $('#productid').val()
	});
}

5.EasyUI 格式化列(最近有一个需求就是这个)
为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数：
value：当前列对应字段值。
row：当前的行记录数据。
index：当前的行下标。

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