学习EasyUI不久,总会遇到一些问题,对某些属性不怎么了解,所以对某些组件和属性做一些记录。
1)combo
- <input id="cc" value="001">
- $('#cc').combo({
- required:true,
- multiple:true
- });
因为查看了该组件的属性甚至其依赖的组件发现并没有url属性,所以断定该组件只用来本地获取数据。但可以扩展选项元素,如把input改成image等
<input type="radio" name="lang" value="01"><span>Java</span><br/>
<input type="radio" name="lang" value="02"><span>C#</span><br/>
<input type="radio" name="lang" value="02"><span>C#</span><br/>
扩展成:
<div>
<img src="images/03.jpg" text="leblan" value="3"></img>
</div>
<div>
<img src="images/04.jpg" text="ouwen" value="4"></img>
</div>
<img src="images/03.jpg" text="leblan" value="3"></img>
</div>
<div>
<img src="images/04.jpg" text="ouwen" value="4"></img>
</div>
2)combobox
1,作为常用的下拉列表,只发送一次请求
2,作为常用的下拉列表,根据文本框输入的值,每隔delay时间发送一次请求,实现自动搜索功能
3,多个combobox一起使用,形成级联搜索
其中很重要的属性:mode:‘remote’、‘local’ 与 ‘remote’对应的有delay属性,如果同时设置mode:‘remote’ 和 delay:1000,意思是当用户向下拉框中停止输入数据一秒之后,浏览器就会向服务端发送一次获取数据的请求,其中用户输入的数据会以参数q的形式携带至后台,然后返回给浏览器,刷新下拉框的内容,也就是完成自动搜索功能,如果把mode设置为‘local’那么浏览器初始化easyUI组件的时候就已经向服务器发送请求,装载好下拉列表,以后不会发送请求,然而‘local’的意思估计是用
当用户向下拉框中停止输入数据delay时间之后,浏览器会根据输入的数据往已经装载好的数据中搜索。
$('#search').combobox({
mode:'remote' ,
url:'UserServlet?method=searchName' ,
valueField:'id' ,
textField:'name' ,
delay:1000
});
mode:'remote' ,
url:'UserServlet?method=searchName' ,
valueField:'id' ,
textField:'name' ,
delay:1000
});
下面是两个下拉框的级联搜索
$('#sel_1').combobox({
onSelect:function(){
var pid = $('#sel_1').combobox('getValue');
$('#sel_2').combobox('setValue' , '');
$('#sel_2').combobox('reload' , 'ProvinceServlet?method=getCity&pid='+pid);
}
});
onSelect:function(){
var pid = $('#sel_1').combobox('getValue');
$('#sel_2').combobox('setValue' , '');
$('#sel_2').combobox('reload' , 'ProvinceServlet?method=getCity&pid='+pid);
}
});