Jquery EasyUI中级篇

阅读更多

JQuery EasyUI是一个很不错的Javascript开发框架，组件丰富、入门快，属性、方法、事件都比较丰富。

为了让更多的人了解EasyUI，特写此文。
这篇文章是针对有过EasyUI使用经验的开发者，如果您尚未使用过EasyUI，推荐访问其主业了解一些基础知识： http://www.jeasyui.com/

1、JQuery EasyUI的初始化
JQuery EasyUI的初始化分为两种，一种是直接在HTML元素中指定初始化属性，另外一种是在Javascript中初始化，两种各有优缺点：
（1）在HTML元素中配置初始化属性

    
panel content.
    
panel content.

这种方式的好处就是不需要写Javascript，不过本人不推荐这种方式，因为当网速不好的情况下，会出现页面延迟初始化，导致页面没有加载完之前出现变形的情况。

更好的初始化方式还是推荐写Javascript：

    
panel content.
    
panel content.

$(function() {
    $('#p').panel({
        width:500,
        height:150,
        title:'My Panel',
        tools:[{
            iconCls:'icon-add',
            handler:function(){alert('new')}
        },{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]
    });
});

2、属性、方法、事件
EasyUI的插件设计很工整、灵活，下面介绍一些用法。
2.1、属性
2.1.1、获取属性
比如获取翻页插件总共有几条记录。

    var options = $(page).pagination('options');
    var total = options.total;

2.1.2、设置属性
比如我们希望设置Window的标题

    $('#win').panel({title: '编辑'});

2.1.3、格式化属性
这是我比较喜欢的功能，用起来很灵活，以DataGrid为例，将日期字段的格式转换为中文日期，如2013年12月23日：

$('#myDataGrid').datagrid({
	title : '表格标题',
	columns : [ [{
		field : 'title',
		title : '标题',
		width : 150
	},{
		field : 'createDate',
		title : '日期',
		formatter : function(val, row) {
			var d = new Date(val);
			var localDate = d.getFullYear() + "年"
					+ (d.getMonth() + 1) + "月"
					+ d.getDate() + "日";
			return localDate;
	}
	}] ]
});

当然，除了返回字符串，还可以返回html代码，比如返回一个连接点我。

2.2、方法
2.2.1、获取对象数据
这个操作用得比较多的主要是类似DataGrid这类，比如获取当前选中的行：

    var row = $('#myDataGrid').datagrid('getSelected');

由于DataGrid用到了翻页插件，所以我们也可以这样用：

	//  获取翻页插件对象
	var page = $('#myDataGrid').datagrid('getPager');

	//获取翻页插件对象的属性
	var options = $(page).pagination('options');
	var total = options.total;

这里顺带提醒一下，EasyUI上会出现继承关系，比如Window继承于Panel，DataGrid也是集成于Panel，所以Panel的属性、方法、事件也同样在这些插件中生效，因此如果Window中没有你想要的属性或者方法、事件，那么你就找它的父插件看看吧。

2.2.2、设置对象数据
设置对象数据也是很常用的一个操作，下面以DataGrid作为示例：
（1）初始化DataGrid

$('#myDataGrid').datagrid('loadData', {
	"total" : 0,
	"rows" : []
});

（2）加载数据到DataGrid中

	$('#myDataGrid').datagrid('loadData', data);

2.3、事件
事件的用法比较简单，只要记住事件名、参数即可。下面是DataGrid的行被双击时触发的事件：

$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});