EasyUI文档学习心得

发布时间：2018-11-29责任编辑：满帅浏览：1709

概述

jQuery EasyUI 是一组基于jQuery 的UI 插件集合，它可以让开发者在几乎完全不需要CSS以及复杂的JS

代码情况下完成美观且功能强大的Web界面。

本文主要说明一些如何利用EasyUI文档快速学习的心得。官网文档介绍的比较详细，也可以使用中文文

档。

官网文档：

http://www.jeasyui.com/tutorial/index.php

http://www.jeasyui.com/documentation/index.php

中文官网文档：

http://www.jeasyui.net/tutorial/

为什么说几乎不需要CSS？

EasyUI中自带了各个组件的CSS样式，并且有多种主题可选。即使默认提供的几种主题不能满足需要，也

可以使用官方的主题编辑器进行修改。

浏览器兼容性如何？

支持所有主流浏览器，支持H5，支持扩展。在1.3.5版本后自带了jQuery2.x，所以如果需要支持低版本

IE浏览器请使用1.3.5之前版本。

比较重要的组件

EasyUI对自己的组件已有分类：Base(基础)、Layout(布局)、Menu and Button(菜单和按钮)、Form(表

单)、Windows(窗口)、DataGrid and Tree(表格和树)、Extension(扩展)。

快速学习的话，可以直接从具体的分类里直接看。如果不想要书写CSS的话，应从Layout开始看，特别是

Layout中的Layout部分(它确实是这么分类的)。Base里面包含提示框、进度条等常用组件。

个人使用最多的是DataGrid and Tree部分。

学习EasyUI有哪些条件

必要条件是需要知道一些HTML的标签、基础知识。最好是有JS和jQuery的基础。

本文大部分内容是基于有JS和jQuery基础的。

入门示例

本文主要介绍文档学习，所以入门我就贴一段HTML代码，效果是实现一个可拖拽的对话框。这个示例没

有使用自定义的CSS和JS。

<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta http-equiv="Content-Type"

content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"

href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css"

href="easyui/themes/icon.css" /></head><body><div

style="width:500px;height:250px"

data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok'">

Hello World!</div><script type="text/javascript"

src="easyui/jquery.min.js"></script><script type="text/javascript"

src="easyui/jquery.easyui.min.js"></script><script type="text/javascript"

src="easyui/locale/easyui-lang-zh_CN.js" ></script></body></html>

属性、事件、方法

文档首页率先说明了属性、事件、方法。因为EasyUI每个组件几乎都有这三个东西，并且API也是通过

这三个东西展示的。开篇介绍里需要记住的，调用方法的语法：

$('selector').plugin('method', parameter);

开篇还介绍了如果添加扩展方法，比如为dialog组件添加一个移动的方法：

$.extend($.fn.dialog.methods, {

mymove: function(jq, newposition){

return jq.each(function(){

$(this).dialog('move', newposition);

});

}

});

调用时：

$('#dd').dialog('mymove', {

left: 200,

top: 100

});

EasyUI中的继承

EasyUI存在继承，在每个组件的开始都会先介绍其继承关系。比如combo组件：

扩展自$.fn.validatebox.defaults。使用$.fn.combo.defaults重写默认值对象。

那么知道这个继承关系有什么用？在某些时候需要这个组件的某些属性、事件、方法，但是文档上却查

不到，这里你可以试试从其继承链向上查。

比如datagrid，继承于panel，我想给datagrid设置标题、高度、宽度，但是在datagrid文档中没找到这

些属性，这时可以去panel组件文档上找，由于继承的关系，这些属性也是可用的。

缺点

EasyUI一直在以版本更新的方式修正自身的缺点，并且在现在的互联网环境仍然存活，但是有些问题不

可避免。

EasyUI闭源，商业版付费，这导致如果核心出现bug难以调试。而且异步直接重写了jQuery的错误处理方

法，导致全局ajaxSetup不可用。

论坛不活跃，有问题可能难以靠别人或者资料解决。

总结

EasyUI个人觉得快速开发小型应用以及企业内部软件系统还是比较合适的。因为其闭源(可维护性、安全

性差)、过程化的代码结构，开发大型应用上估计不是很合适。

以后如果有新的心得会继续在此补充。不过现在工作中其实已经用不到EasyUI了，也不知道其以后发展

会如何，但是当初使用的时候真的用的很舒服，遇到bug的时候又十分蛋疼。在此我还是希望其越来越好

项目开发组供稿