在刚刚接触EasyUI时,感觉它的操作方式很别扭,看文档看的我“闷闷哒”现在一个项目下来,基本已经没什么问题了,如果有朋友遇见什么问题也可以给我发邮件,我邮箱:hanpanpan@outlook.com ,没错,我是.net忠实粉丝,嘻嘻
我使用的版本:jQuery EasyUI 1.5.1
easyui有两种用法
第一种:用html的方式写,eg:
<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
这种写法比较简单,如果前端逻辑比较复杂就要种第二种了。
第二种:js方式,eg:
$('#tb').textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left'
})
来看看一些术语:
属性
比如:控件textbox 的宽度,是否必填,默认值等。用法格式:
//html input 上只写id就好
<input id="tb">
//js
$('#tb').textbox({
属性名1:'属性值1',
属性名2:'属性值2',
})
事件
比如:控件textbox 的的值改变时,向后台请求数据.用法格式:
$('#tb').textbox({
属性名1:'属性值1',
属性名2:'属性值2',
onChange:function(newValue,oldValue) {
$.post('后台地址',{id:newValue},function(data){
console.log(data);
});
}
})
方法
方法一定要在控件初始化后才能使用,上面“事件”的例子就是初始化的过程,初始化后,你就可以给textbox 设置值,用法格式:
$('#tb').textbox('readonly',true);//只读
$('#tb').textbox('clear');//清空值
//当然可以连着用
$('#tb').textbox({
属性名1:'属性值1',
属性名2:'属性值2',
onChange:function(newValue,oldValue) {
$.post('后台地址',{id:newValue},function(data){
console.log(data);
});
}
}).textbox('readonly',true)