Jquery EasyUI中级篇

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

为了让更多的人了解EasyUI,特写此文。

这篇文章是针对有过EasyUI使用经验的开发者,如果您尚未使用过EasyUI,推荐访问其主业了解一些基础知识:http://www.jeasyui.com/

1、JQueryEasyUI的初始化

JQueryEasyUI的初始化分为两种,一种是直接在HTML元素中指定初始化属性,另外一种是在Javascript中初始化,两种各有优缺点:

(1)在HTML元素中配置初始化属性

<div id="p" class="easyui-panel" title="My Panel" 
        style="width:500px;height:150px;padding:10px;background:#fafafa;"
        data-options="iconCls:'icon-save',closable:true,
                collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

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

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

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
$(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代码,比如返回一个连接<ahref="#">点我</a>。

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();
	}
});

相关推荐