①searchbox
①创建方式
①标签方式
<input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
②编码方式
<input id="ss" style="width:300px"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$("#ss").searchbox({
menu:'#mm', //关联搜索下拉列表
prompt:'Please Input Value' //提示信息
width:宽
height:高
value：搜索内容默认值
searcher ：function(value,name){
} 指定搜索回调函数
});
②方法：
getValue none 返回当前搜索值。
setValue value 设置一个新的搜索值。
getName none 返回当前搜索类型名。
selectName name 选择当前搜索类型名。
代码示例：
$('#ss').searchbox('selectName', 'sports');
②validatebox
①创建方式
① 标签式
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
② 编码方式
<input id="box"/>
$(function(){
$("#box").validatebox({
required: true,
validType: 'email' | ['email','length[0,20]']
注意：email,url,length[2,10],remote['url','param']
missingMessage:"如果出现未填内容时的提示信息"，
invalidMessage:"自定义的错误信息"，
})
})
②方法
$("#box").validatebox("isValid") 返回值 true|false
③自定义校验规则：
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '两次密码不一致'
}
});
<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
required="required" validType="equals['#pwd']" />
<input id="password" name="password" class="easyui-validatebox" data-options="required:true,validType='pwdLengthEqual[6]'"/>
$.extend($.fn.validatebox.defaults.rules, {
pwdLengthEqual: {
validator: function(value,param){
return value.length == param[0];
},
message: '密码长度必须为{0}'
}
});
------------------------------------------------------------------------------------------
numberbox
①创建方式
①标签式
<input class="easyui-numberbox" data-options="min:0,precision:2" value='100'>
②编码方式
<input id="box"/>
$(function(){
$("#box").numberbox({
min:0,
precision:2,
});
})
②常见属性
value number 默认值。
min number 允许的最小值。 null
max number 允许的最大值。 null
precision number 在十进制分隔符之后显示的最大精度。（即小数点后的显示精度） 0
prefix string 前缀字符。(比如：金额的$或者￥)
suffix string 后缀字符。(比如：后置的欧元符号€)
③常见方法
setValue value 设置数值输入框的值。
代码示例：
$('#nn').numberbox('setValue', 206.12);
getValue none 获取数值输入框的值。
代码示例：
var v = $('#nn').numberbox('getValue');
alert(v);
clear none 清楚数值输入框的值。
------------------------------------------------------------------------------------
combo【了解】
①创建方式 注意：使用自定义下拉框不能通过标签的方式进行创建
<input id="box">
<div id="food">
<div class="padding:5px;">
<input type="radio" name="food" value="01"><span>煎饼果子</span><br>
<input type="radio" name="food" value="02"><span>牛腩米线</span><br>
<input type="radio" name="food" value="03"><span>水果沙拉</span><br>
<input type="radio" name="food" value="04"><span>蛋黄派</span><br>
<input type="radio" name="food" value="05"><span>其他</span><br>
</div>
</div>
$("#box").combo({
required:true,
});
$('#box').combo('panel').append($('#food'));
$('input[type=radio]').click(function(){
$('#box').combo('setText', $(this).next().text()).combo('setValue',$(this).val());
});
②常见属性
editable:false,
validType:"email",
required:true,
invalidMessage:"此项内容不允许为空",
missingMessage:""
width number 组件的宽度。 auto
height number 组件的高度。（该属性自1.3.2版开始可用） 22
panelWidth number 下拉面板宽度。 null
panelHeight number 下拉面板高度。 200
value:01 字段的默认值
③常用方法
showPanel none 显示下拉面板。
hidePanel none 隐藏下拉面板。
isValid none 返回验证结果。
clear none 清除控件的值。
reset none 重置控件的值。（该方法自1.3.2版开始可用）
getText none 获取输入的文本。
setText text 设置输入的文本。
getValue none 获取组件的值。
setValue value 设置组件的值。
textbox none 返回文本框对象。
$("#box").combo("textbox").val("煎饼果子");
------------------------------------------------------------------------
combobox
①创建方式
①标签式
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
②编程方式
<input id="box"/>
[{
"id":1,
"text":"菜单1"
},{
"id":2,
"text":"菜单2"
}]
$(function(){
$("#box").combobox({
url:'/EasyUI/combobox.json',
valueField:'id',
textField:'suns',
editable:false,
formatter:function(row){
return "<img src='/EasyUI/themes/icons/ok.png'/>"+" "+ row['text'];
}
});
②常见属性
groupField string 指定分组的字段名称（译者注：分组的字段由数据源决定）。（该属性自1.3.4版开始可用） null
groupFormatter function(group) 返回格式化后的分组标题文本，以显示分组项（该属性自1.3.4版开始可用）
代码示例：
$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group + '</span>';
}
});
method string HTTP方法检索数据(POST / GET)。
mode string 定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。 local
onSelect record 在用户选择列表项的时候触发。
onUnselect record 在用户取消选择列表项的时候触发。
③常见方法
setValue value 设置下拉列表框的值。
代码示例：
$('#cc').combobox('setValue', '001');
getData none 返回加载数据。
clear none 清除下拉列表框的值。
select value 选择指定项。
unselect value 取消选择指定项。
-------------------------------------------------------------------------------
datebox 显示日期 但不显示时 分 秒
①创建方式
①标签式
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
②编程方式
<input id="box"/>
$(function(){
$('#box').datebox({
value:
required:true,
editable:false,
invlidMessage:'必须填入日期',
});
});
②常见属性
onSelect date 在用户选择了一个日期的时候触发。
代码示例：
$('#dd').datebox({
onSelect: function(date){
alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
}
});
③常见方法
setValue value 设置日期输入框的值。
代码示例：
$('#dd').datebox('setValue', '6/1/2012'); // 设置日期输入框的值
var v = $('#dd').datebox('getValue'); // 获取日期输入框的值
calendar
---------------------------------------------------------------------
datetimebox 继承子 datetimebox
①创建方式
①标签式
<input class="easyui-datetimebox" name="birthday"
data-options="required:true,showSeconds:false,editable:false,showSeconds:true" style="width:150px">
②编程式
<input id="box" />
$('#box').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});
②常见方法
setValue value 设置日期时间输入框值。
代码示例：
$('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // 设置日期时间输入框的值
var v = $('#dt').datetimebox('getValue'); // 获取日期时间输入框的值
alert(v);
calendar
------------------------------------------------------
linkbutton
①创建方式：
标签方式
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
编程方式
<a href="javascript:void(0)" id="box" name="sex"></a>
$('#box').linkbutton({
text : '提交',
iconCls: 'icon-add',
plain: 'true',
});
②常见属性
disabled boolean 为true时禁用按钮
③常见方法
disable none 禁用按钮。
代码示例：
$('#btn').linkbutton('disable');
enable none 启用按钮。
代码示例：
$('#btn').linkbutton('enable');
select none 选择按钮。（该属性自1.3.3版开始可用）
unselect none 取消选择按钮。（该属性自1.3.3版开始可用
-----------------------------------------------------
form
①提交表单
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
②提交额外参数
$('#ff').form('submit', {
url:...,
onSubmit: function(param){
param.p1 = 'value1';
param.p2 = 'value2';
}
});
③接受服务器的返回结果
{
"success": true,
"message": "Message sent successfully."
}
$('#ff').form('submit', {
success: function(data){
var dataObject = $.parseJSON(data); // change the JSON string to javascript object
if (dataObject.success){
alert(data.message)
}
}
});
④常见方法
submit options 执行提交操作，该选项的参数是一个对象，它包含以下属性：
url：请求的URL地址。
onSubmit: 提交之前的回调函数。
success: 提交成功后的回调函数。
下面的例子演示了如何提交一个有效并且避免重复提交的表单。
$.messager.progress(); // 显示进度条
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success: function(){
$.messager.progress('close'); // 如果提交成功则隐藏进度条
}
});
load data 读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
代码示例：
$('#ff').form('load','/easyui_day2/query.do'); // 读取表单的URL
$('#ff').form('load',{
name:'name2',
email:'mymail@gmail.com',
subject:'subject2',
message:'message2',
language:5
});
clear none 清除表单数据。
reset none 重置表单数据。（该方法自1.3.2版开始可用）
validate none 做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。
⑤ 监听
onSubmit param 在提交之前触发，返回false可以终止提交。
uccess data 在表单提交成功以后触发。
onBeforeLoad param 在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccess data 在表单数据加载完成后触发。
onLoadError none 在表单数据加载出现错误的时候触发。
--------------------------------------------------
messager 对话框
①提示框 info warning error question
$.messager.alert("警告","这是一个警告的内容","warning",function(){
alert("确认后 执行");
});
②对话框
$.messager.confirm("确认对话框","您是否确认删除",function(flag){
if(flag){
alert("继续处理");
}else{
alert("终端操作");
}
});
③进度框
$.messager.progress({
title : '执行中',
msg : '努力加载中...',
text : '{value}%',
interval : 100,
});
④自动消失提示框 slide,fade,show
$.messager.show({
title : '我的消息',
msg : '消息在 5 秒后关闭',
timeout : 2000,
showType : 'show',
});
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
