文档章节

easyui使用总结

科比可比克
 科比可比克
发布于 2016/10/26 19:59
字数 2431
阅读 1127
收藏 41

1   概述

        本文档内容包括easyui的引入和easyui的使用实践,编写该文档的目的,主要为了给下次需要使用的easyui的同事做参考,提高开发效率。

2       EasyUI的引入说明

2.1         Jquery库引用

项目中使用EasyUI版本为1.3.3版本其中中自带了Jquery的库,版本是V2.0.0,请注意该版本不一定适用于你的项目场景,关于Jquery V2.0.0对IE浏览器的支持也是每一个开发人员需要注意的。Jquery V2.0.0支IE9+。为了统一项目中的jquery版本,所以就把easyui自带的jquery版本换成项目中使用的版本1.7.2。

2.2         关于easyui包目录结构调整说明

通常从jquery-easyui官网中下载下来的包,是一个相当完整的包其中包括一下文件夹及目录:

demo目录是easyui使用示例;

locale目录是国际化支持;

src目录是部分easyui插件的源码;

plugins目录是easyui使用的插件;

themes目录包含多套easyui可使用的主题。

通常在项目中使用的话,demo目录、src目录可以不用,locale可以去除没用的js库,主题如果只使用默认的主题,也可以去除不用的主题。

2.3         使用easyui需要引用的js和css

要使用easyui的功能,需要引入一下样式及js。引入代码如下

<link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/gray/easyui.css">

<link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/icon.css">

<script type="text/javascript" src="<%=webContext %>/js/jquery/jquery-1.7.2.min.js"></script>

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

<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

Js和css文件说明:

        easyui.css是easyui框架的主样式;

        icon.css是easyui中用到的图标的样式;

        jquery-1.7.2.min.js是easyui使用的基础;

        jquery.easyui.min.js是easyui的核心javascript库;

        easyui-lang-zh_CN.js是easyui对中文的国际化支持;

3       关于easyui控件的使用

        easyui库作为一个相对成熟的js前端框架,提供了非常丰富的UI控件,包括form表单控件、layout布局控件、gird控件等等。

        这里对使用easyui控件过程中的一些注意事项进行说明。

3.1         控件组成部分

每一个easyui控件通常都是由属性(Properties)、事件(Events)和方法(Methods)这些组成部分

控件自身用到的信息可以通过属性存储,控件可以利用某些属性(比如url)完成特定的操作;控件基于事件驱动,开发人员可以在控件初始化的时候,为控件绑定一些特定事件(比:form的onSubmit事件);easyui为每个控件提供了操作控件相关内容的函数,每个函数对应特定的功能(比如:datagrid的options方法,可以获取datagrid控件的属性设置)。

 

 

小贴士:对控件属性、事件、方法的理解,可以参考HTML的input元素(有属性、事件)。

3.2         控件的继承特性

        在easyui中使用了继承特性,在定义了一部分基础控件的基础上(比如:tree、combo等),可以扩展出功能更完善的控件,比如:基于combo的扩展combotree、combogrid、combobox,基于panel的扩展有tab、layout、Accordion等。

        Easyui控件的继承特性,在父控件中定义的属性适用于子控件,比如有这么一个业务场景,combobox中输入框默认是可以编辑,在我们的业务上需要屏蔽对combobox的编辑功能。针对刚才的业务场景,我们去查看combobox的属性(通常控件的属性可以对控件进行控制),但是在combobox的一堆属性中没有一个可以用于控制输入框的编辑性。不过由于easyui控件拥有继承特性,父控件中定义的属性适用于子控,所以可以查看combobox继承了哪些控件,API告诉我们combobox继承了combo这个控件,同时combo的属性中有editable这一项,专门用于控制编辑框的可编辑性,所以easyui控件的继承特性很好的解决了我们项目中遇到的问题。

3.3         调用控件的方法

Easyui控件在初始化之后,javascript语言中对控件的操作通过控件相关的方法完成。

下面通过combobox控件来说明怎样来调用控件的方法:

var options = $(“#datagrid”).datagrid(“options”);

$(“#datagrid”)通过控件的id熟悉,通过Jquery获取到datagrid对象;

获取datagrid对象后,接控件名称,参数是控件中提供的方法名。

3.4         修改控件的属性

Easyui中控件初始化时,所有的初始化信息(包括属性的值、事件对应调用函数)都存储在一个javascript对象中,基本上所有的控件都提供了一个方法“options”,通过这个方法可以获取到这个对象。下面的例子是修改datagrid控件的url属性:

var options = $(“#datagrid”).datagrid(“options”);

options.url = “targetUrl”;

说明:easyui控件的属性都可以作为options的属性来操作,达到修改的目的,特别说明,对datagrid控件的url属性的修改会触发一次datagrid的远程调用。所以这个需要慎重。如果没处理好就可能引起二次加载的问题。

3.5         控件事件的注册

Easyui控件支持事件,当相应的操作触发时,可以调用特定的函数,完成自定义的处理动作。

下面的几个例子用来说明怎么注册:

例子一 在初始化tab控件的时候注册onSelect事件

<!—- 普通的HTML代码 -->

<div id="baseTab" >

       <div id="tab001" title="电脑清单" selected="true"></div>

       <div id="tab002" title="笔记本清单"></div>

       <div id="tab003" title="网线清单"></div>

</div>

<script type="text/javascript">

$(function(){

       $('#baseTab').tabs({  

           border:false, plain:true, fit:true, tools:'#tab-tools',

           onSelect:function(title,index){             

                     localSearch();

              }  

       });});

</script>

说明如下

上面的HTML代码没有任何特别之处,着重解释js初始化的动作。

上面的js代码可以分成两部分:$('#baseTab').tabs()和{border:false,…},两部分的结合使用代表tab控件的初始化,tabs方法的参数是一个javascript对象,如上所说,在该对象中就包括了对tabs控件属性的赋值,比如border的值false;以及注册了onSelect事件,其中函数的参数,在easyui提供的api中有说明。

例子二 在HTML中为Editor注册onSelect事件

<!—- 普通的HTML代码 -->

<th editor='{type:"combobox",options:{onSelect:onSelectDeviceType,valueField:"itemValue",textField:"itemName",data:<c:out value="${deviceType}" />}}' data-options="field:'deviceType' ">设备类型</th>

<!—- Js处理脚本-->

<script type="text/javascript">

function onSelectDeviceType(){

    //处理过程

}

</script>

说明如下

HTML中为Editor控件注册了onSelectDeviceType,同时需要在script脚本中提供该函数。

例子三 初始化datagrid后注册onDblClickCell事件

<!—js代码  -->

table.datagrid({

              onDblClickCell:function(rowIndex,field,value){}

       });

说明如下

同js初始化控件一样,不过在函数对应的参数中,只指定了要注册的事件。

 

4       关于Datagrid

4.1         Datagrid中列表宽度的设置建议

        Datagrid的column有width属性,说明column是可以精确的指定列的宽度,极端的做法是每列指定具体的值。如果预留一列不设置width属性,系统会为其他列分配宽度后,将剩余的宽度留给该列,注意一点:未设置列宽的column其具体的width值未知,但是大概可以判断出他的值,根据业务需要,决定是否设置具体的width。但是这样自动计算最后一列的宽度就容易影响性能,所以这里还是看界面数据量再进行设置取舍了。

4.2         关于editor的使用说明

        Easyui支持可编辑的datagrid控件,其中datagrid中行(row)的可编辑功能通过editor实现。

关于editor的几点说明:

    1、可以把editor看成一个控件,他也有一些属于自己的方法,比如getValue、setValue;

    2、在指定editor的时候,有两个参数很重要:类型和初始对象,对初始对象的理解可以当成脚本初始化控件中的参数,类型主要指编辑控件的类型,比如text、combobox、combotree等;

    3、在指定editor的类型之后,editor就关联了一个target的jquery对象,根据editor的类型,target对象的类型也不一样。有如下规律:如果editor的类型可以对应到easyui中定义的控件,则target就是一个相应类型的easyui控件;特殊的如果editor的类型是text或者numberbox等,对应的target其实就是一个普通的代表input的jquery对象;再有的话,需要根据edtior的具体类型具体判断。

4、在datagrid中,有相应的方法控制一行所有editor的编辑状态,在js脚本中需要获得行eidtor对象时,需要先调用datagrid的beginEdit,打开行编辑;

5、  js中有两种方法获取单元格对应的editor对象,分别调用datagrid对象的getEditors和getEditor方法,具体使用请参考easyui的API;

6、当editor的target中提供的事件不能满足需要的时候,需要为target对象注册更多的事件,比如为类型为text的editor注册keyup事件,这时候,需要探究target对象的本质(比如:combobox、jquery的input对象等),在此基础上为target绑定事件。

7、提交数据前需要把编辑的行关闭编辑状态endEdit

总结

        这篇文章只是简单记录easyui大概的入门及个别控件的简单用法,具体还是需要大家多实践、多差api,后期还会有问题总结更新。

© 著作权归作者所有

科比可比克
粉丝 13
博文 23
码字总数 14226
作品 0
广州
程序员
私信 提问
加载中

评论(3)

siny
siny
你公司的行业应该有特设行业吧!
科比可比克
科比可比克 博主

引用来自“KobeJie”的评论

小哥是新人吧

回复@KobeJie : 不新,技术比较新人而已,共勉!
Jackie-Lee
Jackie-Lee
小哥是新人吧

暂无文章

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
42分钟前
3
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
45分钟前
7
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
今天
10
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
8
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
1K
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部