应用zk的bandbox和listbox实现的一个具有搜索功能的combobox(实现后台分页)
日期：2014-05-16 浏览次数：20628 次
使用zk的bandbox和listbox实现的一个具有搜索功能的combobox(实现后台分页)
在图片附件中有效果图,可以先看一下.
?
先说下来由:因为不太喜欢zk的tree,也因为数据量实在太大,每次都用tree全部现实出来很耗费性能
所以就想到了google的搜索框,打算自己做一个.
?
整体思路是这样的:
?
做一个bandbox,里边包含一个textbox和一个listbox
?
textbox用于接收搜索的条件
?
listbox用于显示搜索的内容,选定后反填到bandbox中
?
step.1---页面(test.zul)
<window id="testWnd" title="test" border="normal" use="com.test.TestWindow" height="95%"> <grid width="60%"> <columns> <column label=""/> <column label=""/> </columns> <rows> <row height="40px" spans="1,2"> 名称: <hbox> <!-- autodrop属性实现bandbox的自动弹出 constraint属性是对bandbox的验证,其中"no empty"是非空验证 如果你想定义验证后显示的内容只需要"no empty: 你想显示的信息"就可以了 --> <bandbox id="gxsmc" readonly="true" autodrop="true" constraint="no empty" width="300px"> <bandpopup> <hbox> <label value="输入代码或名称查找:"></label> <!-- 用于输入搜索条件的textbox 为其添加onChang和onOK事件 目前这个版本需要输入完成后将textbox失去焦点或按回车键才能显示搜索内容 我想做个类似google那种效果的,一直没搞成,所有的事件都试过了 希望高手们帮忙看看 --> <textbox id="term" onChange="testWnd.initTest(self.value)" onOK="testWnd.initTest(self.value)"/> </hbox> <vbox> <!-- 用于显示搜索内容的listbox --> <listbox id="gxsList" width="320px" height="175px"> <listhead> <listheader label="名称" width="300px" sort="auto" /> </listhead> </listbox> <!-- 用于分页的控件 --> <paging id="gxsPag" pageSize="10"></paging> </vbox> </bandpopup> </bandbox> <image src="img/Centigrade-Widget-Icons/QuestionmarkButton-16x16.png" tooltip="title" style="cursor:pointer" popup="title"/>操作说明 </hbox> </row> </rows> </grid> <popup id="title" width="300px"> <html> 单击左边输入框,输入管辖所代码或管辖所名称<br /> 要求代码长度大于4位,名称长度大于2位<br /> 输入完成后,按"回车(Enter)键"或"Tab"键选择 </html> </popup> </window>?
step.2----建立页面use的后台类
public class TestWindow extends Window {
private static final long serialVersionUID = 1L;
public void initTest(final String value) {
//这么做有点笨了,主要是怕sql语句报错,dao中也用了PreparedStatementSetter,主要是以防万一
if (value.contains("'") || value.contains("_")) {
try {
Messagebox.show("包含非法字符","提示",Messagebox.OK,Messagebox.INFORMATION);
return ;
} catch (InterruptedException e) {
e.printStackTrace();
}
}
//限制输入的条件的长度大于4的时候才去数据查找数据
if (value.getBytes().length >= 4) {
//spring
ApplicationContext ctx =
WebApplicationContextUtils.getRequiredWebApplicationContext(
(ServletContext)getDesktop().getWebApp().getNativeContext());
DtgkService dtgkService = (DtgkService)ctx.getBean("dtgkService");
//获得总条数
int maxNum = dtgkService.getGxsInfoCountByInput(value);
Paging pag = (Paging)getFellow("gxsPag");
pag.setTotalSize(maxNum);
final int PAGE_SIZE = pag.getPageSize();
//显示数据
reDramGxsInfo(value, 0, PAGE_SIZE);
//注册onpaging事件
pag.addEventListener("onPaging", new EventListener() {
public void onEvent(Event event) {
PagingEvent pe = (PagingEvent) event;
int pgno = pe.getActivePage();//页数(从零计算)
int start=pgno * PAGE_SIZE;
int end = start+PAGE_SIZE;
// System.out.println("pgno"+pgno+"\tstart+"+start+"\tend"+end);
reDramGxsInfo(value, start, end);
}
});
}
}
public void reDramGxsInfo(String value, int firstNum, int maxNum) {
final Listbox gxsBox = (Listbox) this.getFellow("gxsList");
gxsBox.getItems().clear();
final Bandbox combo = (Bandbox) this.getFellow("gxsmc");
ApplicationContext ctx =
WebAp
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
