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 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个初试 Jquery EasyUI 的 Demo 旨在帮助新手...
以下是对jQuery EasyUI API的一些核心知识点的详细说明: 1. **基本概念**: - **jQuery**: jQuery 是一个轻量级的JavaScript库,它使得DOM操作、事件处理、动画设计以及Ajax交互变得更加简单。 - **EasyUI 组件*...
jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。版本 1.5.1 是一个重要的更新,它不仅包含了之前版本的所有功能,还进行了...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列的 UI 组件,如对话框、表格、下拉菜单、树形结构等。这个参考资源合集包含了三个重要的文档,分别为 jQuery EasyUI 1.2 API...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架,用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本,包含了一系列组件和功能,适用于网页应用的开发。在这个zip压缩包中,我们可以找到一系列文件,每个都...
SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...
《jQuery EasyUI、ZTree与折线图的综合应用》 在Web开发中,jQuery EasyUI、ZTree和折线图是三种常见的组件,它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目...
JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的 UI 组件,如对话框、表格、树形菜单、按钮等,用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中,我们将探讨如何利用 EasyUI 的日历...
jQuery EasyUI则是一个基于jQuery的UI库,提供了丰富的组件和易于使用的API,用于快速构建现代、响应式的Web应用界面。 在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。...
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。1.3.6 版本是该框架的一个稳定版本,包含了丰富的功能和优化,旨在提高开发效率和用户体验。 在jQuery ...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列易于使用的组件和插件,使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...
**基于JQueryEasyUI类库的WebForm控件库** JQueryEasyUI是一个基于jQuery的UI框架,它封装了一系列的JavaScript组件,使得开发者能够轻松创建出功能丰富的Web应用程序界面。这个WebForm控件库是专门为.NET平台设计...