JQuery EasyUI是一个很不错的Javascript开发框架,组件丰富、入门快,属性、方法、事件都比较丰富。
为了让更多的人了解EasyUI,特写此文。
这篇文章是针对有过EasyUI使用经验的开发者,如果您尚未使用过EasyUI,推荐访问其主业了解一些基础知识:
http://www.jeasyui.com/
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的插件设计很工整、灵活,下面介绍一些用法。
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代码,比如返回一个连接<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;
这里顺带提醒一下,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();
}
});
分享到:
相关推荐
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI中文参考手册.chm
使用Jquery EasyUI制作的日历,单击input控件弹出日历选择日期,代码很简单,仅供参考
SSH+Jquery easyUI后台管理系统
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。通过jQuery EasyUI开发者不需要编写复杂的javascript,也不需要对css样式有深入的...
jQuery EasyUI 1.4.5 版 API 中文版
ssm框架+jquery easyui案例