Easy UI 的总结

jQuery EasyUI是一组基于jQuery的Ui插件集合体，而jQuery EasyUI的目标是更轻松，更美观和功能丰富的UI界面。
EasyUI的特点：
1.封装了大量的控件
2.控件通过Html或者JS代码创建
3.控件与服务器端的通信方式是Ajax基于Json的通信方式。
通常用于后台管理系统。
easyUI-环境搭建：
1、copy资源文件到项目中 （thems、2js）
2、在jsp中引入资源 js和css资源的导入顺序要保持不变。

<link rel="stylesheet" type="text/css" 		href="${pageContext.request.contextPath}/jquery/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery/themes/icon.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/easyui-lang-zh_CN.js"></script>

基本语法：
创建easyUI控件的两种方式：标签 和 javascript方式。
<标签名 class=“easyui-控件类型名” data-options=“easyui控件属性名:值,属性名2:值,事件名:函数名”>
<标签名 id=“id”>
$(function(){
// 初始化
$("#id").控件类型名({
easyui控件属性名:值,
属性名2:值,
事件名:函数名,
事件名:function(){}
});
})
调easyui控件的方法： $("#id").控件类型名(“方法名”, 参数);
主要控件：

1、linkbutton

$("#id").linkbutton({
iconCls:“icon-add”,//图标
plain:true,//为true时显示简洁效果。
onClick:function(){
$("#btn1").linkbutton(“resize”,{width:200,height:50});
}
});
// 右下角提示
$.messager.show({
title:“系统提示”,//标题
msg:“保存成功！”，//提示文本内容
showType:“show”,
showSpeed:5000
});
$.messager.alert(“标题”,
“msg内容”,
“question”,//提示图标类型：info/error/warning
function(){
console.log(“ok…”);
});
$.messager.confirm(“标题”,
“确认删除吗？”,
function(bn){
console.log(bn);
});
2、dialog

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d1").dialog({ …{pageContext.request.contextPath}/addUser.jsp", //dialog中加载的远程内容
modal:true, //是否模块化显示
cache:false
//iconCls:“icon-man”,
//toolbar:"#tbs",
//buttons:"#bb", //Array，定制dialog底部按钮
//collapsible:true,
//minimizable:true,
//maximizable:true,
//resizable:true
});
$("#d1").dialog(“open”);
$("#d1").dialog(“close”);

	<!-- dialog的按钮区域
	<div id="bb">
		<a id="addUserSave">保存</a>
		<a id="addUserExit">关闭</a>
	</div> -->

注意：抓取页面时,被抓取的页面中的js的处理:
js需要定制在body中，子页面的head无效， 或者在子页面中只定义需要执行的代码片段。父页面抓取了子页面后，父子页面融为一张页面，互相的资源共享。
3、validatebox(验证框)

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲input1").valida…{pageContext.request.contextPath }/reg’,‘uname’]"
remote[‘http://…/action.do’,‘paramName’]：发送ajax请求需要验证的值，当成功时返回true。

});
自定义检查规则：
$.extend($.fn.validatebox.defaults.rules, {
// 扩展规则1
自定义名称:{
validator:function(val, params){
params[0]
return true|false;
},
message:“错误提示信息 {0}”
},
// 扩展规则2
自定义名称2:{}
});
例子：
// 自定义校验规则
$.extend($.fn.validatebox.defaults.rules, {
// 长度至少6位
minLength:{
validator:function(val,params){ //val代表当前元素中输入的内容 params代表使用规则时传递的参数
// 检查长度
return val.length>=params[0];
},
message:“长度至少 {0} 位” //{0} 代表在错误提示信息中 获取规则参数数组中的第一个元素
},
// 长度必须在 某个范围
rangeLength:{
validator:function(val, params){
return val.length>=params[0] && val.length<=params1;
},
message:“长度必须在 {0} 到 {1} 之间”
},
// 必须是数字
isNumber:{
validator:function(val){
return !isNaN(val);
},
message:“必须是数字”
},
// 两次输入必须 相同
isEquals:{
validator:function(val, params){
// 获取input1输入的内容
var input1Val = $(params[0]).val();
// 检查
return input1Val==val;
},
message:“两次输入必须相同”
},
// 爱好至少选一项
myCheckbox:{
validator:function(val, params){
return $(“input[name=hobby]:checked”).length>=1;
},
message:“爱好至少选一项”
}
});

// 全局日期格式
$.fn.datebox.defaults.formatter = function(date){ // 把date转换为指定格式的字符串
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+"-"+m+"-"+d;
}

$.fn.datebox.defaults.parser = function(s){
var t = Date.parse(s);
if (!isNaN(t)){
return new Date(t);
} else {
return new Date();
}
}
自定义验证规则：
注意：在validator中，如果返回true则表示验证通过反之，验证非法
注意：在自定义的规则的key中不要包含数字,如：minz,eqz
4、textbox（文本框）

$("#input1").textbox({
type:“text|password”,
required:true,
validType:“isNumber”,
iconCls:“icon-search”
//type:“password”,
//value:444,
//width:500,
//height:50,
//prompt:“请输入数字”,
//multiline:true //定义是否是多行文本框。
//prompt://提示信息
});
$("#input1").textbox(“getValue”);//取值方法
$("#input1").textbox(“setValue”,“hello”);//赋值方法
5、datebox

$("#input1").datebox({
editable:false，//是否可编辑
formatter:function(date){return “”;}//格式化显示
parser:fucntion(str){return new Date();//日期解析，要和formatter配合使用

}

});
}
日期输入框，有两个行为：format和parse，分别负责Date->String和String->Date,而且两个行为是相互呼应的,所以在定制format时，需要将parse一起修改,才能保证插件正常运作。
提示：在easyui的汉化包中定义了一组format和parse方法，可以直接使用，或基于其修改后使用； 或者直接导入汉化包，也是可行的。
NumberBox数字输入框，属性：min:0, //最小值
value:10, //默认值
max:10, //最大值
precision:2, //精度，最多保留几位小数(四舍五入)
prefix:‘￥’, //数字前缀
groupSeparator:’,’, //分隔：112,444,225,111.11
required:‘required’" //必填
方法：setValue
getValue 使用方式参照TextBox
6、combobox（下拉列表框）

$("#input1").combobox({
eidtable:false,//是否允许直接在组件中输入内容
url:"",//下拉框的数据来源(json)
textField:"",//基础数据字段名称绑定到该下拉列表框。
valueField:"",//基础数据值名称绑定到该下拉列表框。
panelHeight：下拉panel的高度
selected：选中项 ，默认第一项被选中
onLoadSuccess:function(data){// data-list/array，下拉列表被选中
$(this).combobox(“setValue”, data[0].sid);
},
onChange:function(newVal, oldVal){
//当下拉框的选项发生更改时触发
console.log(“aaaa… " + newVal +”, “+oldVal);
},
onSelect:function(item){
//当下拉框的选项被选中时触发
console.log(item.text+”, “+item.value);
}
});
// 初始化 reload1Btn 按钮，测试reload（不带参数）
$(”#reload1Btn").linkbutton({
onClick:function(){
// 使用旧的URL重新载入列表数据
$("#select1").combobox(“reload”); // 调combobox的reload方法
}
});