1 Overview
The content of this document includes the introduction of easyui and the use practice of easyui. The purpose of writing this document is to have rules to follow when using easyui next time to improve development efficiency; secondly, record some key points encountered during use Questions, for your own and other students' reference.
2 Introduction of EasyUI
Jquery library reference
EasyUI comes with the Jquery library, and the version is V2.0.0. Please note that this version may not be suitable for your project scenario. Every developer needs to pay attention to the support of Jquery V2.0.0 for IE browser.
Jquery V2.0.0 supports IE9+.
The latest is not necessarily the best. Sometimes, please change your jquery version decisively.
Another point to note is that jqeury is usually not only used in one place in the project. When using easy ui, it is also a good solution to use the unified jquey repository in the project.
About easyui package directory structure adjustment instructions
The package usually downloaded from the jquery-easyui official website is a fairly complete package: its directory structure is as follows:
among them:
- The demo directory is an example of easyui usage;
- The locale directory is internationalization support;
- The src directory is the source code of some easyui plug-ins;
- The plugins directory is the plugins used by easyui;
- The themes directory contains multiple sets of easyui themes that can be used.
Usually used in the project, the demo directory and src directory are not required, the locale can remove the useless js library, if the theme only uses the default theme, you can also remove the unused theme. In the project, the easyui directory structure after cleaning is as follows:
The extends directory is some extensions based on the easyui framework in the project.
Use easyui need to reference js and css
In this project, the easyui framework was introduced mainly in order to use easyui's datagrid control. Since easyui is used by different modules, the easyui-related js and css are unified in the editInclude.jsp page. The content of the editInclude.jsp page is as follows:
| page contentType="text/html; charset=gbk" language="java" %> String webContext = request.getContextPath(); %> k rel="stylesheet" type="text/css" href="%=webContext %>/js/jquery-easyui/themes/gray/easyui.css"> k rel="stylesheet" type="text/css" href="%=webContext %>/js/jquery-easyui/themes/icon.css"> ipt type="text/javascript" src="ext %>/js/jquery/jquery-1.7.2.min.js"> ipt type="text/javascript" src="ext %>/js/jquery-easyui/jquery.easyui.min.js"> ipt type="text/javascript" src="ext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js"> ipt type="text/javascript" src="ext %>/js/jquery-easyui/extends/easyui.formatter.js"> ipt type="text/javascript" src="ext %>/js/jquery-easyui/extends/easyui.edit.js"> |
Js and css file description:
- easyui.css is the main style of the easyui framework;
- icon.css is the style of icons used in easyui;
- jquery-1.7.2.min.js is the basis for easyui;
- jquery.easyui.min.js is the core javascript library of easyui;
- easyui-lang-zh_CN.js is easyui’s internationalization support for Chinese;
- easyui.formatter.js and easyui.edit.js are two extension js libraries used in the project.
3 About the use of easyui controls
As a relatively mature js front-end framework, easyui library provides a very rich UI control, including form control, layout control, grid control and so on.
Here are some precautions in the use of easyui controls.
Control components
Each easyui control is usually composed of properties (Properties), events (Events) and methods (Methods).
The information used by the control itself can be stored through properties, and the control can use certain properties (such as url) to complete specific operations; the control is event-driven, and developers can bind certain events to the control when the control is initialized (than: The onSubmit event of the form); easyui provides functions for each control to manipulate the content of the control, and each function corresponds to a specific function (for example: the options method of the datagrid, which can obtain the property settings of the datagrid control). Here is a simple example:
| Form |
The attribute list and event list of the form control are listed above.
Tips: For the understanding of control attributes, events, and methods, you can refer to the input element of HTML (with attributes and events).
Control inheritance characteristics
The inheritance feature is used in easyui. On the basis of defining some basic controls (such as tree, combo, etc.), more complete controls can be extended, such as: combo-based extended combotree, combogrid, combobox, panel-based Extensions include tab, layout, Accordion, etc.
The inheritance feature of Easyui control, the attributes defined in the parent control are applicable to the child control. For example, there is a business scenario where the input box in the combobox can be edited by default. In our business, we need to block the editing function of the combobox. For the business scenario just now, let's check the properties of the combobox (usually the properties of the control can control the control), but none of the properties of the combobox can be used to control the editability of the input box. However, because the easyui control has inheritance characteristics, the properties defined in the parent control are applicable to the child control, so you can check which controls the combobox inherits. The API tells us that the combobox inherits the combo control. At the same time, there is an editable item in the properties of the combo. It is used to control the editability of the edit box, so the inheritance feature of easyui control solves the problems encountered in our project very well.
For the inheritance characteristics of controls, the inheritance of properties is used more. Regarding the inheritance of events and methods, I personally think it is supported, but there is no practice.
Method of calling the control
After the Easyui control is initialized, the operation of the control in the javascript language is completed through the control-related methods.
The following uses the combobox control to illustrate how to call the control method:
| var options = $(“#datagrid”).datagrid(“options”); | | | A B C described as follows The above code can be divided into three parts: A: Usually each control will have an ID attribute, and the datagrid object can be obtained through Jquery; B: Usually this part corresponds to the name of the control; C: The parameter is the method name provided in the control. |
Modify the properties of the control
When the controls in Easyui are initialized, all the initialization information (including the value of the property and the function corresponding to the event) are stored in a javascript object. Basically all controls provide a method "options", which can be obtained through this method. Object. The following example is to modify the url property of the datagrid control:
| var options = $(“#datagrid”).datagrid(“options”); options.url = “targetUrl”; |
Note: The properties of the easyui control can be manipulated as the properties of options to achieve the purpose of modification. In particular, the modification of the url property of the datagrid control will trigger a remote call of the datagrid.
Registration of control events
Easyui control supports events. When the corresponding operation is triggered, you can call specific functions to complete custom processing actions.
The following examples are used to illustrate how to register:
Example 1: Register the onSelect event when the tab control is initialized
| Normal HTML code --> id="baseTab" > id="matter" title="111" selected="true"> |
id="object" title="222">
id="project" title="333">
v>
Js processing script -->
ipt type="text/javascript">
$(function(){
var selectedIndex = -1;
$('#baseTab').tabs({
border:false,
plain:true,
fit:true,
tools:'#tab-tools',
onSelect:function(title,index){
localSearch();
}
});
});
ript>
说明如下
上面的HTML代码没有任何特别之处，着重解释js初始化的动作。
上面的js代码可以分成两部分：$('#baseTab').tabs()和{border:false,…}，两部分的结合使用代表tab控件的初始化，tabs方法的参数是一个javascript对象，如上所说，在该对象中就包括了对tabs控件属性的赋值，比如border的值false；以及注册了onSelect事件，其中函数的参数，在easyui提供的api中有说明。
例子二在HTML中为Editor注册onSelect事件
| 普通的HTML代码 --> |
ditor='{type:"combobox",options:{onSelect:onSelectOperateType,valueField:"itemValue",textField:"itemName",data:}}'data-options="field:'operateType' ">操作类别 |
|---|
Js处理脚本-->
pt type="text/javascript">
function onSelectOperateType(){
//处理过程
}
ipt>
说明如下
HTML中为Editor控件注册了onSelectOperateType，同时需要在script脚本中提供该函数。
例子三初始化datagrid后注册onDblClickCell事件
| 代码 --> table.datagrid({ onDblClickCell:function(rowIndex,field,value){
} }); 说明如下 同js初始化控件一样，不过在函数对应的参数中，只指定了要注册的事件。 |
4 关于Combobox的使用_wangxz
示例：input
问题：二次加载
下拉项数据加载：loadData,url
常用事件注册,onSelect,级联操作
常用属性设置：width、panelWidth、editable
常用方法：setValue、getValue、enable、options
示例代码
Select创建
- id="cc" class="easyui-combobox" name="dept" style="width:200px;">
- value="aa">aitem1
- bitem2
- bitem3
- ditem4
- eitem5
Input创建
- id="cc" class="easyui-combobox" name="dept"
- data-options="valueField:'id',textField:'text',url:'get_data.php'" />
使用javascript脚本创建
- id="cc" name="dept" value="aa">
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
创建2个有依赖关系的下拉列表框。
- id="cc1" class="easyui-combobox" data-options="
- valueField: 'id',
- textField: 'text',
- url: 'get_data1.php',
- onSelect: function(rec){
- var url = 'get_data2.php?id='+rec.id;
- $('#cc2').combobox('reload', url);
- }" />
- id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />
常用属性
Data属性 通过一个对象数组初始化下拉combobox的数据
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]" />
Url属性 通过一个url地址 返回个个json对象数组初始化数据
url: '/hr/emp/abc.js'" />
valueField属性 下拉项对象的提交到后台的值
textField属性 用于显示下拉项的文本
Formatter属性 用户格式化数据的显示
常用事件
onSelect 下拉框的选择事件
| 代码 --> tid="empInfoVOpostName" data-options="valueField:'content',editable:false,onSelect:selectPostName,textField:'name',url:'/otherbusiness/hr/emp/empInfo.do?method=postNameDetailJson'" class="easyui-combobox"> function selectPostName(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("领导"); }else if(rec.postTypeId==ST_TYPE_NOTLEADER%>){ $("#showempInfoVO\\.postType").html("非领导"); }else if(rec.postTypeId==ST_TYPE_NOT%>){ $("#showempInfoVO\\.postType").html("不确定"); }else{ $("#showempInfoVO\\.postType").html(""); } } 说明如下
|
常用方法
getData 获取加载的数据
setValue 设置下拉列表框的值。 选中的值
常见问题
不会的问题：
1、要求combobox支持拼音查询，比如民族 输入hanzu出现汉族怎么做？
5 关于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
6 关于treegrid的使用
动态加载treegrid数据
7 关于tab的使用
tab-tools的布局
项目中有同学布局没有按照easy ui的方式布局，比如使用如下的方式：
| div id="baseTab" class="easyui-tabs" border="false" plain="true" fit="true" style="overflow: no;" tools='#tab-tools'> div title="事项"> iframe id="secretMatter" src="erUrl %>?method=list"style="width: 100%;height: 100%;" frameborder="0" scrolling="no">ame> /div>
div id="object" title="111">
/div> div id="project" title="222">
/div>
div id="summary" title="333">
/div> div id="tab-tools"> 报表期：donly="readonly" type="text" name="reportPeriod" id="reportPeriod" Usage="empty"> /div> /div> |
使用如下的布局，工具条会照样出来，不过却多了一个tab页
效果如下：
正确的布局方式应该是：
| div id="baseTab" class="easyui-tabs" border="false" plain="true" fit="true" style="overflow: no;" tools='#tab-tools'> div title="事项"> iframe id="secretMatter" src="erUrl %>?method=list"style="width: 100%;height: 100%;" frameborder="0" scrolling="no">ame> /div>
div id="object" title="111">
/div> div id="project" title="222">
/div>
div id="summary" title="333">
/div> /div> div id="tab-tools"> 报表期：input readonly="readonly" type="text" name="reportPeriod" id="reportPeriod" Usage="empty"> /div> |
减少Tab中使用iframe时的请求次数
通过Iframe来组织tab控件标签页的内容是一种常用的方法，直接的好处，使用iframe操作简单，但是简单的同时也可能会造成资源的重复加载这也体现了事物的双面性。当然这些都不是重点，这里提供一种方法，避免tab控件使用iframe时，重复请求数据。
造成tab控件中iframe对此请求数据的原因，大概有以下两种：
1、tab控件中，每个tab页关联一个iframe，tab控件在加载的时候，会依次请求所有iframe中的内容，为了页面的加载速度，通常只需要加载一个iframe就可以了；
2、在使用tab控件的一些方法时，会触发tab控件，更新tab页内容，比如：已经通过html的方法，初始化tab控件，但是在jquery的初始脚本中仍然用$(“#tab”).tabs({…})这种方式操作tab控件，这样会引起iframe内容的重新请求。
多余的资源请求，肯定不是我们想要的，这样造成了网络资源的浪费，也造成了缓慢的页面加载。通过实践，我们使用了如下的方法来解决这个问题：
| 代码 --> ="loseCaseTab" class="easyui-tabs" border="false" plain="true" fit="true" style="overflow: no;" tools='#tab-tools'> iv id="caseNum" title="失泄密案件数量" selected="true"> ="peopleNum" title="处理责任人数量"> |
处理脚本-->
type="text/javascript">
$(function(){
var selectedIndex = -1;
$('#loseCaseTab').tabs({
border:false,
plain:true,
fit:true,
tools:'#tab-tools',
onSelect:function(title,index){
localSearch();
}
});
//查询
function localSearch(){
var loseCaseTab = $('#loseCaseTab');
var selectedTab = loseCaseTab.tabs("getSelected");
var targetIframe = selectedTab.find("iframe");
//
if(targetIframe.length == 0){
var id = selectedTab.attr("id");
if(id){
if(id == "caseNum"){
selectedTab.append('');
$("#loseCaseNum").attr("src","?query.caseType=&method=list&query.reportPeriod="+$("#reportPeriod").val());
}else if(id == "peopleNum"){
selectedTab.append('');
$("#punitivePeopleNum").attr("src","?query.type=&method=list&query.reportPeriod="+$("#reportPeriod").val());
}
}
}else{
var iframeContents = targetIframe.contents();
var form = iframeContents.find("form");
var queryReportPeriod = iframeContents.find("#query\\.reportPeriod");
queryReportPeriod.val($("#reportPeriod").val());
form.submit();
}
}
});
t>
说明如下
同js初始化控件一样，不过在函数对应的参数中，只指定了要注册的事件。
8 Easyui深度学习
查看easyui解析后的页面元素
为什么会提出这个问题？easyui有着自己的一套解析思路，根据相应的class和js，用自己的方式实现html表单元素的功能。比如：html中的select元素，在easyui中是通过combobox来实现的，在easyui初始化combobox控件后，生成的HTML源码也不再是。
话说回来，查看easyui控件的源码，有助于我们去实现一些特定的效果，比如绑定事件。
个人的习惯是通过chrome开发工具中的“审查元素”功能来查看easyui控件具体的HTML源码；或者也可以使用IE8的开发人员工具中，HTML查看工具来实现该功能。
学习easyui源码的一种方式
Easyui不开源它的源码，不代表我们就没有办法解读它的源码。在深入使用easyui库的时候，有时候也需要我们进一步探究easyui本身的实现机制。
下面介绍一种查看easyui源码的方式：
| 处理脚本--> type="text/javascript"> $(function(){ var selectedIndex = -1; $('#loseCaseTab').tabs({ //在此处设置断点即可 border:false, plain:true, fit:true, tools:'#tab-tools', onSelect:function(title,index){ localSearch(); } }); }); t> 说明如下 具体的操作方式，通过chrome或者IE的开发人员工具的脚本调试工具来完成。在上面设置断点的地方，首先需要单步进入代码内部，此时会发现其实进入的只是Jquery的源码；接着跳出该函数，调试会回到$('#loseCaseTab').tabs，这步很重要，跳出没必要的执行步骤；继续单步进入，这时候进来的才是easyui的源码。同时你会发现easyui做过一些处理，函数名称和变量名称基本上没任何意义，所以解读easyui的源码也算是一个枯燥的事情。 |
9 常见问题
My97DatePicker报“权限错误”问题
当同时使用easyui和My97DatePicker两个组件的时候，很有可能会遇到“权限错误”的问题。
问题可以定焦在easyui中有些控件中会自动通过iframe来加载内容有关，但是怎么会出现跨域问题，个人也没理解，但是这里给出解决问题的办法：
| 对WdatePicket.js中的$crossFrame:true做出修改，true改为false。 |
表单数据提交
通常前台表单的提交都是使用form表单元素，在form中会有很多的input或者其他的输入表单元素，不知道你遇到过这类情况没有，前台页面写法如下：
|
|
java后台通过getParameter时，获取不到createDate修改后的值。
原因是因为不在form内部的表单元素是不会被传入后台的，所以在java后台获取不到createDate的值。
正确的写法是：
|
|
Datagrid的重复加载问题
为numberbox设置maxlength属性
延迟detailview加载
Datagrid横向滚动条设置
Datagrid异步提交问题
Datagrid列表中数据字典显示问题
通过脚本自动生成formatter函数
editor类型为datebox，endEditor后显示的时间格式_wangzw