easyui使用总结Word下载.docx
- 文档编号:19190235
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:18
- 大小:107.37KB
easyui使用总结Word下载.docx
《easyui使用总结Word下载.docx》由会员分享,可在线阅读,更多相关《easyui使用总结Word下载.docx(18页珍藏版)》请在冰豆网上搜索。
href="
%=webContext%>
/js/jquery-easyui/themes/gray/easyui.css"
>
/js/jquery-easyui/themes/icon.css"
scripttype="
text/javascript"
src="
/js/jquery/jquery-1.7.2.min.js"
/script>
/js/jquery-easyui/jquery.easyui.min.js"
/js/jquery-easyui/locale/easyui-lang-zh_CN.js"
/js/jquery-easyui/extends/easyui.formatter.js"
/js/jquery-easyui/extends/easyui.edit.js"
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对中文的国际化支持;
easyui.formatter.js和easyui.edit.js是项目中使用到的两个扩展js库。
关于easyui控件的使用
easyui库作为一个相对成熟的js前端框架,提供了非常丰富的UI控件,包括form表单控件、layout布局控件、gird控件等等。
这里对使用easyui控件过程中的一些注意事项进行说明。
控件组成部分
每一个easyui控件通常都是由属性(Properties)、事件(Events)和方法(Methods)这些组成部分。
控件自身用到的信息可以通过属性存储,控件可以利用某些属性(比如url)完成特定的操作;
控件基于事件驱动,开发人员可以在控件初始化的时候,为控件绑定一些特定事件(比:
form的onSubmit事件);
easyui为每个控件提供了操作控件相关内容的函数,每个函数对应特定的功能(比如:
datagrid的options方法,可以获取datagrid控件的属性设置)。
下面是一个简单的例子:
Form
上面列出了form控件的属性列表和事件列表。
小贴士:
对控件属性、事件、方法的理解,可以参考HTML的input元素(有属性、事件)。
控件的继承特性
在easyui中使用了继承特性,在定义了一部分基础控件的基础上(比如:
tree、combo等),可以扩展出功能更完善的控件,比如:
基于combo的扩展combotree、combogrid、combobox,基于panel的扩展有tab、layout、Accordion等。
Easyui控件的继承特性,在父控件中定义的属性适用于子控件,比如有这么一个业务场景,combobox中输入框默认是可以编辑,在我们的业务上需要屏蔽对combobox的编辑功能。
针对刚才的业务场景,我们去查看combobox的属性(通常控件的属性可以对控件进行控制),但是在combobox的一堆属性中没有一个可以用于控制输入框的编辑性。
不过由于easyui控件拥有继承特性,父控件中定义的属性适用于子控,所以可以查看combobox继承了哪些控件,API告诉我们combobox继承了combo这个控件,同时combo的属性中有editable这一项,专门用于控制编辑框的可编辑性,所以easyui控件的继承特性很好的解决了我们项目中遇到的问题。
对于控件的继承特性中,属性的继承是用得比较多的,关于事件和方法的继承,个人觉得是支持的,不过没有实践。
调用控件的方法
Easyui控件在初始化之后,javascript语言中对控件的操作通过控件相关的方法完成。
下面通过combobox控件来说明怎样来调用控件的方法:
varoptions=$(“#datagrid”).datagrid(“options”);
|||
ABC
说明如下
上面的代码可以分成三部分解读:
A:
通常每个控件都会有一个ID属性,通过Jquery获取到datagrid对象;
B:
通常该部分对应控件的名字;
C:
参数是控件中提供的方法名。
修改控件的属性
Easyui中控件初始化时,所有的初始化信息(包括属性的值、事件对应调用函数)都存储在一个javascript对象中,基本上所有的控件都提供了一个方法“options”,通过这个方法可以获取到这个对象。
下面的例子是修改datagrid控件的url属性:
options.url=“targetUrl”;
说明:
easyui控件的属性都可以作为options的属性来操作,达到修改的目的,特别说明,对datagrid控件的url属性的修改会触发一次datagrid的远程调用。
控件事件的注册
Easyui控件支持事件,当相应的操作触发时,可以调用特定的函数,完成自定义的处理动作。
下面的几个例子用来说明怎么注册:
例子一在初始化tab控件的时候注册onSelect事件
!
—-普通的HTML代码-->
divid="
baseTab"
>
<
matter"
title="
111"
selected="
true"
/div>
object"
222"
project"
333"
—-Js处理脚本-->
$(function(){
varselectedIndex=-1;
$('
#baseTab'
).tabs({
border:
false,
plain:
true,
fit:
tools:
'
#tab-tools'
onSelect:
function(title,index){
localSearch();
}
});
});
上面的HTML代码没有任何特别之处,着重解释js初始化的动作。
上面的js代码可以分成两部分:
$('
).tabs()和{border:
false,…},两部分的结合使用代表tab控件的初始化,tabs方法的参数是一个javascript对象,如上所说,在该对象中就包括了对tabs控件属性的赋值,比如border的值false;
以及注册了onSelect事件,其中函数的参数,在easyui提供的api中有说明。
例子二在HTML中为Editor注册onSelect事件
—-普通的HTML代码-->
theditor='
{type:
"
combobox"
options:
{onSelect:
onSelectOperateType,valueField:
itemValue"
textField:
itemName"
data:
c:
outvalue="
${operateType}"
/>
}}'
data-options="
field:
operateType'
"
操作类别<
/th>
functiononSelectOperateType(){
//处理过程
}
HTML中为Editor控件注册了onSelectOperateType,同时需要在script脚本中提供该函数。
例子三初始化datagrid后注册onDblClickCell事件
—js代码-->
table.datagrid({
onDblClickCell:
function(rowIndex,field,value){
}
同js初始化控件一样,不过在函数对应的参数中,只指定了要注册的事件。
关于Combobox的使用_wangxz
示例:
input<
select>
问题:
二次加载
下拉项数据加载:
loadData,url
常用事件注册,onSelect,级联操作
常用属性设置:
width、panelWidth、editable
常用方法:
setValue、getValue、enable、options
示例代码
Select创建
selectid="
cc"
class="
easyui-combobox"
name="
dept"
style="
width:
200px;
<
optionvalue="
aa"
aitem1<
/option>
option>
bitem2<
bitem3<
ditem4<
eitem5<
/select>
Input创建
inputid="
data-options="
valueField:
id'
text'
url:
get_data.php'
使用javascript脚本创建
1<
value="
2$('
#cc'
).combobox({
3url:
combobox_data.json'
4valueField:
5textField:
6});
创建2个有依赖关系的下拉列表框。
cc1"
data-options="
2valueField:
'
3textField:
4url:
get_data1.php'
5onSelect:
function(rec){
6varurl='
get_data2.php?
id='
+rec.id;
7$('
#cc2'
).combobox('
reload'
url);
8}"
9<
cc2"
常用属性
Data属性通过一个对象数组初始化下拉combobox的数据
inputclass="
label'
value'
data:
[{
label:
java'
value:
Java'
},{
perl'
Perl'
ruby'
Ruby'
}]"
Url属性通过一个url地址返回个个json对象数组初始化数据
url:
/hr/emp/abc.js'
valueField属性下拉项对象的提交到后台的值
textField属性用于显示下拉项的文本
Formatter属性用户格式化数据的显示
常用事件
onSelect下拉框的选择事件
inputid="
empInfoVOpostName"
content'
editable:
false,onSelect:
selectPostName,textField:
name'
/otherbusiness/hr/emp/empInfo.do?
method=postNameDetailJson'
functionselectPostName(rec){
$("
#empInfoVO\\.postName"
).val(rec.content);
#empInfoVO\\.postRank"
).val(rec.postRankId);
#empInfoVOpostRank"
).combobox("
setValue"
rec.postRankId);
#empInfoVO\\.postType"
).val(rec.postTypeId);
if(rec.postTypeId==<
%=EmpConstant.POST_TYPE_LEADER%>
){
$("
#showempInfoVO\\.postType"
).html("
领导"
);
}elseif(rec.postTypeId==<
%=EmpConstant.POST_TYPE_NOTLEADER%>
非领导"
%=EmpConstant.POST_TYPE_NOT%>
不确定"
}else{
}
常用方法
getData获取加载的数据
setValue设置下拉列表框的值。
选中的值
常见问题
不会的问题:
1、要求combobox支持拼音查询,比如民族输入hanzu出现汉族怎么做?
关于Datagrid
Datagrid中列表宽度的设置建议
Datagrid的column有width属性,说明column是可以精确的指定列的宽度,极端的做法是每列指定具体的值,但是通常不建议这么做。
建议的做法,预留一列不设置width属性,系统会为其他列分配宽度后,将剩余的宽度留给该列,注意一点:
未设置列宽的column其具体的width值未知,但是大概可以判断出他的值,根据业务需要,决定是否设置具体的width。
关于editor的使用说明
Easyui支持可编辑的datagrid控件,其中datagrid中行(row)的可编辑功能通过editor实现。
关于editor的几点说明:
可以把editor看成一个控件,他也有一些属于自己的方法,比如getValue、setValue;
在指定editor的时候,有两个参数很重要:
类型和初始对象,对初始对象的理解可以当成脚本初始化控件中的参数,类型主要指编辑控件的类型,比如text、combobox、combotree等;
在指定editor的类型之后,editor就关联了一个target的jquery对象,根据editor的类型,target对象的类型也不一样。
有如下规律:
如果editor的类型可以对应到easyui中定义的控件,则target就是一个相应类型的easyui控件;
特殊的如果editor的类型是text或者numberbox等,对应的target其实就是一个普通的代表input的jquery对象;
再有的话,需要根据edtior的具体类型具体判断。
在datagrid中,有相应的方法控制一行所有editor的编辑状态,在js脚本中需要获得行eidtor对象时,需要先调用datagrid的beginEdit,打开行编辑;
js中有两种方法获取单元格对应的editor对象,分别调用datagrid对象的getEditors和getEditor方法,具体使用请参考easyui的API;
当editor的target中提供的事件不能满足需要的时候,需要为target对象注册更多的事件,比如为类型为text的editor注册keyup事件,这时候,需要探究target对象的本质(比如:
combobox、jquery的input对象等),在此基础上为target绑定事件。
自定义editor
关于插件detailView的使用
关于排序的使用_wangzw
关于treegrid的使用
动态加载treegrid数据
关于tab的使用
tab-tools的布局
项目中有同学布局没有按照easyui的方式布局,比如使用如下的方式:
easyui-tabs"
border="
false"
plain="
fit="
overflow:
no;
tools='
divtitle="
事项"
iframeid="
secretMatter"
%=matterUrl%>
?
method=list"
style="
100%;
height:
frameborder="
0"
scrolling="
no"
/iframe>
summary"
tab-tools"
报表期:
inputreadonly="
readonly"
text"
reportPeriod"
id="
Usage="
empty"
使用如下的布局,工具条会照样出来,不过却多了一个tab页
效果如下:
正确的布局方式应该是:
报表期:
减少Tab中使用iframe时的请求次数
通过Iframe来组织tab控件标签页的内容是一种常用的方法,直接的好处,使用iframe操作简单,但是简单的同时也可能会造成资源的重复加载这也体现了事物的双面性。
当然这些都不是重点,这里提供一种方法,避免tab控件使用iframe时,重复请求数据。
造成tab控件中iframe对此请求数据的原因,大概有以下两种:
1、tab控件中,每个tab页关联一个iframe,tab控件在加载的时候,会依次请求所有iframe中的内容,为了页面的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- easyui 使用 总结