Web组件(FlexGrid)组件使用手册.doc

FlexGrid组件使用手册版本号: FlexGrid组件使用手册版本号：1.0 作者：王素华时间： 2004 年 10 月 10日山东浪潮齐鲁软件产业股份有限公司文档修订修订历史记录序号版本号作者提交日期变更内容变更原因1.1.0王素华2004-10-12始建目录1概述411相关文档42 使用说明421所需要的数据源说明422标签说明423页面说明724 环境搭建925客户端外部接口10FlexGrid组件使用手册1概述 在web开发中会遇到大量的查询页面,工作量非常大,根据查询页面的共性,我们可以用组件来实现,这样既简化了开发又实现了重用.11相关文档 web组件(FlexGrid)分析设计.doc。 EditGrid组件使用手册.doc。2 使用说明 21所需要的数据源说明 FlexGrid中所需要的数据源,可以是二维的数据集合，如：HashMap或collection或dataBean，也可以提供Hql语句(类似sql语句)，只要按照规定配置属性标签，可以自动生成hql语句。Hql语句的有点是：对数据库是透明的，开发人员不必了解自己的数据库是SQL Server,DB2，还是Oracle都可以使用这套组件来开发查询页面。22标签说明l 标签属性属性默认值是否标签属性和必须描述nameY,yGrid名称headCssdivToucssY,nGrid头风格wholeCssdivAllcssY,nGrid整体风格detailCssdivTiSkinY,nGrid体风格sumCssdivSumcssY,n合计区风格，可以自定义风格leftCssdivLeftCssY,n左边序号列风格height3000Y,nGrid高度propertyY,n从上下文环境取得数据集合dataSourceTypeY,n暂时没有使用actionY,nForm提交时交由处理的jsp或urlisSubmittrueY,ntrue时后台排序，false时面前台排序。exportfalseY,nTrue时导出页面，false时不导出备注：后台排序是提交页面和后台数据库交互，使所有页面一起排序。 前台排序是只对当前页面排序。l 标签属性属性默认值是否标签属性和必须描述nameY,nimage组件的名称ImageChaxun.gifY,n查询按钮使用图片的urlActionY,n点击查询form提交时交由处理的jsp或urll 标签从html的TextTag标签扩展而来,其增加的属性属性默认值是否标签属性和必须描述serchNameY,y表名+”.”+列名形式，数据库查询时要过滤的列textY,n描述该数据库列的文本dataTypeJava.lang.stringY,n该数据库列的类型l 标签属性默认值是否标签属性和必须描述joinLY,y表名+”.”+列名形式JoinRY,y表名+”.”+列名形式l 标签从EditGrid的ColTag标签扩展而来的，其增加的属性：属性默认值是否标签属性和必须描述sortNameY,y排序字段名称, 表名+”.”+列名形式queryNameY，n查询数据库字段名称, 表名+”.”+列名形式SortedY,n还未使用positionY,n一维集合为数组时,从数组中取值的索引值typeY,n有效值为：percent，double，currency,datefomatY,nType为percent和currency时不需要;为date时值为yyyy年MM月dd日样式;为double时为3#,(3表示3位小数,逗号表示千分位分隔符)isSumfalseY,n该列是否合计标签从标签扩展而来的，其增加的属性：属性默认值是否标签属性和必须描述openFlagY,n打开节点时的图片closeFlagY,n关闭节点时的图片标签从ColTag标签扩展而来，与ColTag属性相同。标签从标签扩展而来，与属性相同。l 标签从标签扩展而来，去掉标签的position和property属性，新增属性属性默认值是否标签属性和必须描述beginIndexY,y一维集合为数组时,从数组中取值的起始索引值endIndexY,y一维集合为数组时,从数组中取值的终止索引值,动态列的列数即为：endIndex-beginIndex+1l 标签属性说明：属性默认值是否标签属性和必须描述bgImageY,n按钮背景图片previousValueõY,n上一个按钮上的文字previousPageValueçY,n上一页按钮上的文字nextValueøY,n下一个按钮上的文字nextPageValueY,n下一页按钮上的文字turnPageValue¿Y,n翻页按钮上的文字previousNameY,n上一个按钮上的名称previousPageNameY,n上一页按钮上的名称nextNameY,n下一个按钮上的名称nextPageNameY,n下一页按钮上的名称turnPageNameY,n翻页按钮上的名称styleClassdatactrlY,n风格ActionY,y点击翻页时,form提交时交由处理的jsp或urlpageSizeY,y每页显示的记录数23页面说明1. 对简单的查询，程序员只要编写jsp页面即可。对复杂的查询，程序员可以将数据集合提供给标签，让标签显示数据。页面上面为search标签，可以输入查询的条件。中间为数据显示区在flexgrid标签里面。下面是取值：可以取出这一行的id对应的值（可以取出多个id，也可以取出一个），用getDataKey()方法；也可以取出这一行的所有值，用getData()方法。如下：2. 采用树型组件形式，选中列可以显示sql语句，同时可以将页面转到另一个详细页面： 3. 上面显示sql语句，下面是导航条，提供翻页及跳转功能： 4. 可以把表单用excel表格的形式导出来。 5标签的使用：这个标签主要用于两个表的关联，两个表如：t_customer,t_city，字段city是t_customer的外键，是t_city的主键，现在用city字段来关联这两个表。用法如下：要显示的列名是“城市名称”，取得是t_city表主键的name，请看效果：24 环境搭建1. 在应用程序的类路径中添加loushang3.0-wb-(版本号).jar。添加：spring.jar,spring-jdbc.jar,spring-context.jar,spring-beans.jar,log4j-1.2.8.jar,commons-beanutils.jar,commons-collections.jar,commons-logging.jar,hibernate.jar,db2.jar(或者使用其他的数据库的jar)比如$WebSphereAppServerinstalledAppsstandard.eartobacco.warWEB-INFlib目录。2. 添加js文件flexgrid.js。比如$WebSphereAppServerinstalledAppsstandard.eartobacco.warzhntskinsdefaultjs目录。3. 添加标签库web-flex.tld。比如$WebSphereAppServerinstalledAppsstandard1.eartobacco.warzhnttlds目录。25客户端外部接口为了方便使用，我们封装了一些客户端需要使用的js方法，调用时用grid标签的name加上“.”加js的方法名。如：grid.getCheckLine（）。1) getCheckLIne（），得到所选中的checkbox的valu