`
xianbin
  • 浏览: 214824 次
  • 来自: ...
社区版块
存档分类
最新评论

Jquery EasyUI中级篇

阅读更多
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 datagrid demo

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...

    jquery easyui 帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    初试JqueryEasyUI(附Demo)

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个初试 Jquery EasyUI 的 Demo 旨在帮助新手...

    jQuery EasyUI的api

    以下是对jQuery EasyUI API的一些核心知识点的详细说明: 1. **基本概念**: - **jQuery**: jQuery 是一个轻量级的JavaScript库,它使得DOM操作、事件处理、动画设计以及Ajax交互变得更加简单。 - **EasyUI 组件*...

    jQuery EasyUI v1.3.5官方API中文版

    jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧

    jQuery EasyUI 1.9.4 chm文档

    针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。

    jQuery EasyUI 1.5.1 版 API 中文版

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。版本 1.5.1 是一个重要的更新,它不仅包含了之前版本的所有功能,还进行了...

    jQuery EasyUI 参考资源合集

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列的 UI 组件,如对话框、表格、下拉菜单、树形结构等。这个参考资源合集包含了三个重要的文档,分别为 jQuery EasyUI 1.2 API...

    jQuery EasyUI v1.10.0.zip

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本,包含了一系列组件和功能,适用于网页应用的开发。在这个zip压缩包中,我们可以找到一系列文件,每个都...

    SSH+Jquery easyUI后台管理系统

    SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...

    jquery easyui + Ztree +折线图

    《jQuery EasyUI、ZTree与折线图的综合应用》 在Web开发中,jQuery EasyUI、ZTree和折线图是三种常见的组件,它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目...

    Jquery EasyUI 日历Demo

    JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的 UI 组件,如对话框、表格、树形菜单、按钮等,用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中,我们将探讨如何利用 EasyUI 的日历...

    ssm+jqueryeasyui案例

    jQuery EasyUI则是一个基于jQuery的UI库,提供了丰富的组件和易于使用的API,用于快速构建现代、响应式的Web应用界面。 在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。...

    Jqueryeasyui使用说明

    资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...

    jQueryEasyUI1.3.6版本

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。1.3.6 版本是该框架的一个稳定版本,包含了丰富的功能和优化,旨在提高开发效率和用户体验。 在jQuery ...

    jQuery easyui 全套文件

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列易于使用的组件和插件,使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...

    基于JQueryEasyUI类库的WebForm控件库

    **基于JQueryEasyUI类库的WebForm控件库** JQueryEasyUI是一个基于jQuery的UI框架,它封装了一系列的JavaScript组件,使得开发者能够轻松创建出功能丰富的Web应用程序界面。这个WebForm控件库是专门为.NET平台设计...

Global site tag (gtag.js) - Google Analytics