JQuery EasyUI是一个很不错的Javascript开发框架,组件丰富、入门快,属性、方法、事件都比较丰富。
为了让更多的人了解EasyUI,特写此文。
这篇文章是针对有过EasyUI使用经验的开发者,如果您尚未使用过EasyUI,推荐访问其主业了解一些基础知识:[url]http://www.jeasyui.com/[/url]
1、JQuery EasyUI的初始化
JQuery EasyUI的初始化分为两种,一种是直接在HTML元素中指定初始化属性,另外一种是在Javascript中初始化,两种各有优缺点:
(1)在HTML元素中配置初始化属性
这种方式的好处就是不需要写Javascript,不过本人不推荐这种方式,因为当网速不好的情况下,会出现页面延迟初始化,导致页面没有加载完之前出现变形的情况。
更好的初始化方式还是推荐写Javascript:
2、属性、方法、事件
EasyUI的插件设计很工整、灵活,下面介绍一些用法。
[b]2.1、属性[/b]
2.1.1、获取属性
比如获取翻页插件总共有几条记录。
2.1.2、设置属性
比如我们希望设置Window的标题
2.1.3、格式化属性
这是我比较喜欢的功能,用起来很灵活,以DataGrid为例,将日期字段的格式转换为中文日期,如2013年12月23日:
当然,除了返回字符串,还可以返回html代码,比如返回一个连接<a href="#">点我</a>。
2.2、方法
2.2.1、获取对象数据
这个操作用得比较多的主要是类似DataGrid这类,比如获取当前选中的行:
由于DataGrid用到了翻页插件,所以我们也可以这样用:
[color=red]这里顺带提醒一下,EasyUI上会出现继承关系,比如Window继承于Panel,DataGrid也是集成于Panel,所以Panel的属性、方法、事件也同样在这些插件中生效,因此如果Window中没有你想要的属性或者方法、事件,那么你就找它的父插件看看吧。[/color]
2.2.2、设置对象数据
设置对象数据也是很常用的一个操作,下面以DataGrid作为示例:
(1)初始化DataGrid
(2)加载数据到DataGrid中
2.3、事件
事件的用法比较简单,只要记住事件名、参数即可。下面是DataGrid的行被双击时触发的事件:
为了让更多的人了解EasyUI,特写此文。
这篇文章是针对有过EasyUI使用经验的开发者,如果您尚未使用过EasyUI,推荐访问其主业了解一些基础知识:[url]http://www.jeasyui.com/[/url]
1、JQuery EasyUI的初始化
JQuery EasyUI的初始化分为两种,一种是直接在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的插件设计很工整、灵活,下面介绍一些用法。
[b]2.1、属性[/b]
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代码,比如返回一个连接<a href="#">点我</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;
[color=red]这里顺带提醒一下,EasyUI上会出现继承关系,比如Window继承于Panel,DataGrid也是集成于Panel,所以Panel的属性、方法、事件也同样在这些插件中生效,因此如果Window中没有你想要的属性或者方法、事件,那么你就找它的父插件看看吧。[/color]
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();
}
});