`
fuleonardo
  • 浏览: 178756 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用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>
			单击左边输入框,输入管辖所代码或管辖所名称&lt;br /&gt;
			要求代码长度大于4位,名称长度大于2位&lt;br /&gt;
			输入完成后,按"回车(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 = 
			WebApplicationContextUtils.getRequiredWebApplicationContext(
				(ServletContext)getDesktop().getWebApp().getNativeContext());
		
		DtgkService dtgkService = (DtgkService)ctx.getBean("dtgkService");
		//根据条件搜索内容
		List<Map<String, String>> gxsList = dtgkService.getGxsInfoByInput(value,firstNum,maxNum);
		//填充到listbox中
		for (Map<String, String> map : gxsList) {
			Listitem item = new Listitem();
			Listcell lc = new Listcell();
			lc.setLabel(map.get("NAME"));
			lc.setValue(map.get("CODE"));
			lc.setParent(item);
			gxsBox.appendChild(item);
		}
	
		//为listbox添加select事件,当选中数据后返填到bandbox中
		gxsBox.addEventListener(Events.ON_SELECT, new EventListener() {
	
			public void onEvent(Event e) throws Exception {
				Listitem item = gxsBox.getSelectedItem();
				List<Listcell> cellList = item.getChildren();
				for (Listcell lc : cellList) {
					combo.setValue(lc.getLabel()+","+lc.getValue());
				}
				combo.closeDropdown();
			}});
	}

}
 

step.3---service的方法就两句话,一块贴出来了

/**
	 * 获取信息,根据输入框的录入
	 * @param value
	 * @param firstNum
	 * @param maxNum
	 * @return
	 */
	public List<Map<String, String>> getGxsInfoByInput(String value, int firstNum, int maxNum) {
		return this.userDao.queryGxsByInput(value, firstNum, maxNum);
	}
	
	/**
	 * 获取count
	 * @param value
	 * @return
	 */
	public int getGxsInfoCountByInput(String value) {
		return this.userDao.queryGxsCountByInput(value);
	}
 

step.4-----dao

public int queryGxsCountByInput(final String value) {
		String sql = "SELECT DISTINCT COUNT(*) FROM " +
			"TABLENAME WHERE CODE LIKE '%"+value+"%' OR NAME LIKE '%"+value+"%'";
		return this.getJdbcTemplate().queryForInt(sql);
	}


public List<Map<String, String>> queryGxsByInput(final String value, int firstNum, int maxNum) {
		String sql = "SELECT * FROM (SELECT DISTINCT ROWNUM AS RN, T.CODE,T.NAME FROM " +
			"TABLENAME T WHERE T.CODE LIKE ? OR T.NAME LIKE ?) WHERE RN>"+firstNum+" AND RN<="+maxNum;
		
		return this.getJdbcTemplate().query(sql, new PreparedStatementSetter(){

			public void setValues(PreparedStatement pst) throws SQLException {
				pst.setString(1, "%"+value+"%");
				pst.setString(2, "%"+value+"%");
				
			}}, new GxsMapper());
	}
	
	protected class GxsMapper implements RowMapper {

		public Object mapRow(ResultSet rs, int rowNum) throws SQLException {
			Map<String, String> gxsMap = new HashMap<String, String>();
			gxsMap.put("CODE", rs.getString("CODE"));
			gxsMap.put("NAME", rs.getString("NAME"));
			
			return gxsMap;
		}
		
	}
 

 

写的很烂,希望大家不要拍砖,有什么不对的地方请高手们多指正,谢谢!

 

还是那句话,希望对大家有所帮助.

 

 

  • 大小: 8.7 KB
3
0
分享到:
评论
3 楼 rewop998 2012-08-01  
rewop998 写道
使用bandbox和combobox组合就能实现,将combobox.setButtonVisible(false);

不好意思,只要combobox就能实现,
加个ON_CHANGING监听
combobox.setButtonVisible(false);
就跟google的搜索框一样了。
2 楼 rewop998 2012-08-01  
使用bandbox和combobox组合就能实现,将combobox.setButtonVisible(false);
1 楼 major361 2009-08-11  
            
ApplicationContext ctx =    
                WebApplicationContextUtils.getRequiredWebApplicationContext(   
                    (ServletContext)getDesktop().getWebApp().getNativeContext());   
               
            DtgkService dtgkService = (DtgkService)ctx.getBean("dtgkService"); 


这句直接用
DtgkService dtgkService = SpringUtil.getBean("dtgkService");
就可以了。SpringUtil是ZK提供的一个工具类

相关推荐

    网络游戏交易平台信息管理系统--毕业设计.doc

    设计本系统的目的在于创建一个可以帮助网络游戏交易平台准确并且快速的收集、整合 、处理、记录与游戏交易平台相关信息的系统,显然凭借传统的手工管理方式已经无法 正常处理每天巨额的信息量。在本系统的帮助下,...

    基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip

    基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip基于Android Studio的个人记账应用帮助用户轻松管理和跟踪他们的财务源码.zip

    基于python实现树莓派和传感器的植物生长环境评估信息系统

    【作品名称】:基于python实现树莓派和传感器的植物生长环境评估信息系统 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:基于python实现树莓派和传感器的植物生长环境评估信息系统

    优质资源,Yearning Mysql SQL审核平台

    Yearning Mysql SQL审核平台(使用go语言)

    c语言课程设计-职工资源管理系统.rar

    void displayMenu() { printf("\n+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\n"); printf("+ 职工资源管理系统 +\n"); printf("+ +\n"); printf("+ 1. 录入职工信息 +\n"); printf("+ 2. 显示全部职工信息 +\n"); printf("+ 3. 根据工号查询

    华为OD机试D卷 - 来自异国的客人 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    2024华为OD机试D卷 - 最长的指定瑕疵度的元音子串 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    基于nodejs电影交流网站(源码 + 说明文档)

    基于nodejs电影交流网站(源码 + 说明文档) 第二章 开发技术介绍 1 2.2.1 Nodejs技术 1 2.2.2 mysql数据库介绍 1 2.2.3 MySQL环境配置 1 2.2.4 B/S架构 2 2.2.5 Vue框架 2 第三章 系统分析 1 3.1 可行性分析 1 3.1.1 技术可行性 1 3.1.2操作可行性 1 3.1.3 经济可行性 1 3.2性能需求分析 1 3.3功能分析 2 第四章 系统设计 4 4.1功能结构 4 4.2 数据库设计 4 4.2.1 数据库E/R图 4 4.2.2 数据库表 5 第五章 系统功能实现 11 5.1系统功能模块 11 5.2后台登录模块 12 5.2.1管理员功能 13 5.2.2 用户功能 15 第六章 系统测试 16

    setuptools-0.9.8.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-23.2.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-10.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    App工具查看md5、公钥等信息

    App工具查看md5、公钥等信息

    2024华为OD机试D卷 - 高效的任务规划 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    基于co-revDSD方法的计算程序

    基于co-revDSD方法的计算程序

    setuptools-54.0.0-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    课程设计 基于FPGA的电子表源码+全部资料齐全.zip

    【资源说明】 课程设计 基于FPGA的电子表源码+全部资料齐全.zip课程设计 基于FPGA的电子表源码+全部资料齐全.zip 【备注】 1、该项目是高分课程设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    Fig0309.tif

    Fig0309.tif

    setuptools-5.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-8.0.1.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    华为OD机试D卷 - 连续字母长度 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

Global site tag (gtag.js) - Google Analytics