搜索
web组件列表组件使用手册版本号：1.0作者：高林时间：2004年07月12日山东浪潮齐鲁软件产业股份有限公司Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第2页共9页修订历史记录日期版本说明作者2004年07月12日1.0创建高林修订历史记录说明日期登记修订具体日期版本登记版本号说明文档变更内容、变更时间作者本次修改人Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第3页共9页目录1.列表组件概述..............................................................41.1组件功能描述............................................................41.2组件实现的技术..........................................................41.3组件在包中的路径........................................................42.列表组件使用说明..........................................................52.1组件配置................................................................52.2组件标签节点说明........................................................52.3注意事项................................................................63.列表组件使用示例..........................................................73.1示例场景................................................................73.2示例源码................................................................7Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第4页共9页1.列表组件概述在web应用开发中，存在大量需要类似下面的下拉列表使用的地方。列表图÷但是，从实现上面的功能来看，程序员用js加上服务器端脚本开发，也是可以实现的，但是这样的结果是工作量大，难以维护。可重用性小。因此，我们采用javataglib技术封装js。用简单的标签技术。实现这些复杂的功能。风格统一,简化开发,操作更加友好灵活1.1组件功能描述列表组件，采用统一的风格，开发使用起来简单。四种不同形式的列表组件，基本满足客户端显示需求。对于进行数据调整操作。1.2组件实现的技术采用javataglib技术封装javaScript。1.3组件在包中的路径在web组件包org.loushang.web.taglib.list.*Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第5页共9页2.列表组件使用说明2.1组件配置1:导入loushang3.0_web.jar2:引用web-list.tld标签库放到WEB-INF/tlds目录下3:在web.xml文件中配置：taglibtaglib-uri/tags/web-list/taglib-uritaglib-location/WEB-INF/tlds/web-list.tld/taglib-location/taglib4.导入JS文件list.js到相应目录getRightOptionsValues（）;获取所有右边选项值(value)getLeftOptionsValues（）;获取所有左边选项值(value)getRightOptionsLabels（）;获取所有右边选项显示值(label)getLeftOptionsLabels（）;获取所有左边选项显示值(label)getRightOptions（）;获取所有右边选项(包括value和label)getLeftOptions（）;获取所有左边选项(包括value和label)5:使用例子在下面或者是看loushang3.0-web-demo.war(可从技术中心网站下载)2.2组件标签节点说明节点属性说明：pageToPage属性默认值必需描述nametrue用来区分不同的列表，生成不同的名称。在同一个页面用多个列表时，需要用该值来区分。必须唯一。typetrue列表类型：oneImg单选类型multiImg多选类型stylefalse样式styleClassfalse样式classstyleIdfalse样式id.Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第6页共9页bkImglistbg.giffalse背景图片imgCatalog配置文件配置的images目录false图表目录left属性默认值必需描述nametrue列表Select名称propertytrue根据改值从bean中获取选中值size1false列表显示选项个数multiplefalsefalse是否是单选，还是多选beanNamefalse数据来源集合名称如果该属性存在，则从其中按照javabean的规测，。stylefalse样式自定义styleClassfalse样式class引用styleIdfalse样式id其他关于事件属性同样支持onchange等right属性基本和left一样属性默认值必需描述2.3注意事项相同的列表不要在一个页面使用。需要的话，可采用同类型的混和使用。列表数据来源应该采用html组件标签Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第7页共9页3.列表组件使用示例3.1示例场景需要形象表达记录属于那一边，且需要实现互移的场面。3.2示例源码详细例子见loushang3.0-wb=demo组件例子。这里只作简单的例子：首先说明的是：列表中每条数据都要用javabean或者是map。Java代码：这里可以在jsp中实现，也可以是后台传到jsp页面%@tagliburi=/WEB-INF/web-list.tldprefix=list%%@tagliburi=/WEB-INF/web-html.tldprefix=html%%@pagecontentType=text/html;charset=gb2312%%@pageimport=java.util.*%%@pageimport=html.*%%@pageimport=tree.*%%@pageimport=org.loushang.web.taglib.util.Global%%Vectoroptions=newVector();options.add(newLabelValueBean(Label0,Value0));options.add(newLabelValueBean(Label1,Value1));options.add(newLabelValueBean(Label2,Value2));options.add(newLabelValueBean(Label3,Value3));options.add(newLabelValueBean(Label4,Value4));options.add(newLabelValueBean(Label5,Value5));options.add(newLabelValueBean(Label6,Value6));options.add(newLabelValueBean(Label7,Value7));options.add(newLabelValueBean(Label8,Value8));options.add(newLabelValueBean(Label9,Value9));request.setAttribute(options,options);Mapmap=newHashMap();map.put(id,2);Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第8页共9页map.put(ids,newString[]{2,4});map.put(name,web-html组件);map.put(code,Value3);map.put(codes,newString[]{Value2,Value4,Value6});map.put(optionsCollection,options);request.setAttribute(Global.getString(html.data),map);%1：数据自己定义单选list组件(option):list:pageToPagestyle=width:400type=oneImgname=onelist:leftsize=10name=下拉条1property=idstyleTd=align:center;width:40%style=width:100%html:optionvalue=1新浪/html:optionhtml:optionvalue=2搜狐/html:optionhtml:optionvalue=3中国人/html:optionhtml:optionvalue=4343/html:optionhtml:optionvalue=5google/html:optionhtml:optionvalue=6csdn/html:option/list:leftlist:rightsize=10name=下拉条2styleTd=align:center;width:40%style=width:100%value=/list:right/list:pageToPage2：数据自己定义采用option多选list组件(option)list:pageToPagestyle=width:400type=multiImgname=multilist:leftsize=10name=下拉条3property=idsmultiple=truestyleTd=align:center;width:40%style=width:100%html:optionvalue=1Chinese/html:optionhtml:optionvalue=2Russian/html:optionhtml:optionvalue=3American/html:optionhtml:optionvalue=4French/html:optionhtml:optionvalue=5korean/html:optionhtml:optionvalue=5Spaniard/html:option/list:leftlist:rightsize=10name=下拉条4multiple=truestyleTd=align:center;width:40%value=style=width:100%Web组件（列表组件）使用手册版本号:1.0浪潮软件技术研究中心2004年07月12日第9页共9页/list:right/list:pageToPage3:单选list组件(options):list:pageTo