`
uule
  • 浏览: 6351991 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

某一模块动态+、—效果的实现

    博客分类：
  • JSP
jQueryJSPJ#CC++ 
阅读更多



 代码(去掉部分css细节，只关注主要功能)： 

<tr>
	<td><br />Additional charges item(s)</td>
</tr>
<tr>
	<td>
		<table id="additionalItemsPanel" name="additionalItemsPanel" border="0">
			<tr>
				<td width="5%"></td>
				<td width="29%">Type</td>
				<td width="1%"></td>	
				<td width="39%">Description</td>	
				<td width="1%"></td>	
				<td width="19%">Charge per person</td>	
				<td width="1%"></td>	
				<td width="5%"></td>	
			</tr>
			<tr id="additionalItemTr1">
				<td>Item</td>	
				<td>
					<select id="addItemType1" name="addItemType1" onchange="">
						<option value="">Select additional charge items</option>
						<c:forEach items="${ADDITIONALITEMSLIST}" var="item">
							<option value="${item.code}">${item.code } - ${item.itemnameEn }</option>
						</c:forEach>
					</select>
				</td>
				<td></td>	
				<td>
					<input  type="text" id="addItemDescription1" name="addItemDescription1"/>
				</td>
				<td></td>	
				<td>
					<input  type="text" id="addItemPrice1" name="addItemPrice1">
				</td>
				<td></td>	
				<td>
<input  id="additionalItemAddBtn" name="additionalItemAddBtn" type="button" value="+"       onClick="additionalItemOP('+', '')">
<input  id="additionalItemDelBtn" name="additionalItemDelBtn" type="button" value="-"       onClick="additionalItemOP('-', 'additionalItemTr1')">
				</td>	
			</tr>
		</table>	
	</td>
</tr>

模块添加与删除： 

	var ADDITIONAL_ITEMS_ROWS_CNT  = 1;
	var addiItemIndex            = 2;
	
	function additionalItemOP( op, idName) {
		if( op == '+') {
			var rowSize = $('additionalItemsPanel').rows.length;
			
			if(rowSize > 6) {
				alert('You can\'t continue to add items!');
				return;
			}
			
			var tmpinnerhtml = [];
			tmpinnerhtml.push( '<tr id="additionalItemTr'+addiItemIndex+'">' );
			tmpinnerhtml.push( '<td>Item</td>' );
			tmpinnerhtml.push( '<td>');
			tmpinnerhtml.push( '<select id="addItemType'+addiItemIndex+'" name="addItemType'+addiItemIndex+'" onchange="");
			tmpinnerhtml.push( '<option>Select additional charge items</option>' );
			<c:forEach items="${ADDITIONALITEMSLIST}" var="item">
			tmpinnerhtml.push( '<option value="${item.code}">${item.code } - ${item.itemnameEn }</option>' );				
			</c:forEach>
			tmpinnerhtml.push( '</select>');
			tmpinnerhtml.push( '</td>');
			tmpinnerhtml.push( '<td></td>');
			tmpinnerhtml.push( '<td>');
			tmpinnerhtml.push( '<input  type="text" id="addItemDescription'+addiItemIndex+'" name="addItemDescription'+addiItemIndex+'"/>');
			tmpinnerhtml.push( '</td>');
			tmpinnerhtml.push( '<td></td>');
			tmpinnerhtml.push( '<td>');
			tmpinnerhtml.push( '<input  type="text" id="addItemPrice'+addiItemIndex+'" name="addItemPrice'+addiItemIndex+'">');
			tmpinnerhtml.push( '</td>');
			tmpinnerhtml.push( '<td></td>');
			tmpinnerhtml.push( '<td>');
			tmpinnerhtml.push( '<input id="additionalItemAddBtn'+addiItemIndex+'" name="additionalItemAddBtn'+addiItemIndex+'" type="button" value="+" onClick="additionalItemOP(\'+\', \'\')">');
			tmpinnerhtml.push( '&nbsp;');
			tmpinnerhtml.push( '<input id="additionalItemDelBtn'+addiItemIndex+'" name="additionalItemDelBtn'+addiItemIndex+'" type="button" value="-" onClick="additionalItemOP(\'-\', \'additionalItemTr'+addiItemIndex+'\')">');
			tmpinnerhtml.push( '</td>');
			tmpinnerhtml.push( '</tr>');

			jQuery('#additionalItemsPanel tbody>tr:last').append( tmpinnerhtml.join('') );	

			addiItemIndex++;
			
		} else if (op == '-') {
			var rowSize = $('additionalItemsPanel').rows.length;
			
			if( rowSize <= 2 || idName == 'additionalItemTr1') {
				alert("First row can not be deleted!");
				return;
			}			
			if(!confirm("Do you confirm delete?")) return;			
			jQuery('#' + idName).remove();
//注意remove时addiItemIndex值不减，这样保存时循环过程中可以获取所有行
 }
	}

也可如此：


注意此处button的Id、name

另注意此处转义： 

addcontent[addcontent.length] = "<input id='markupAddBtn"+index+"' name='markupAddBtn"+index+"' type='button' value='+' onClick='markupOP(\"+\", \"\")'>";											
addcontent[addcontent.length] = "<input id='markupDelBtn"+index+"' name='markupDelBtn"+index+"' type='button' value='-' onClick='markupOP(\"-\", \"markupTr"+index+"\")'>";
 

 

1、保存到数据库JS（省略验证）： 

	function doSave(){
			var additionalitemtypeList  = '';
			var additionalitemnameList  = '';
			var additionalitempriceList = '';

			for(var i=1; i<addiItemIndex; i++) {  //addiItemIndex为添加模块时的全局变量

               var additionalitemObj = $('additionalItemTr' + i);
			    if ( !additionalitemObj ) continue;  //必须加上这句，否则当删除了中间某一行，保存时由于该行已不存在，故$('addItemPrice'+i).value等都不存在，会报缺少对象而无法保存

			    var itemType = $('addItemType' + i).options[$('addItemType' + i).selectedIndex].value;
			 		    				    	
			    	if(additionalitemtypeList != "") {
			    		additionalitemtypeList += ',' + itemType.trim();
			    		additionalitemnameList += ',' + $('addItemDescription' + i).value;
			    		additionalitempriceList += ',' + $('addItemPrice' + i).value;
			    	} else {
			    		additionalitemtypeList += itemType.trim();
			    		additionalitemnameList += $('addItemDescription' + i).value;
			    		additionalitempriceList += $('addItemPrice' + i).value;
			    	}
			}
			
			$('additionalitemtype').value = additionalitemtypeList;
			$('additionalitemname').value = additionalitemnameList;
			$('additionalitemprice').value = additionalitempriceList;
	}
  
form中：
		<html:hidden property="additionalitemtype" styleId="additionalitemtype"/>
		<html:hidden property="additionalitemname" styleId="additionalitemtype"/>
		<html:hidden property="additionalitemprice" styleId="additionalitemtype"/>

实现类中分割各个List： 

public String update(ActionForm form, HttpServletRequest request,HttpServletResponse response) throws SystemException {
	
		String additionalitemtype = tariffForm.getString("additionalitemtype");
		String additionalitemname = tariffForm.getString("additionalitemname");
		String additionalitemprice = tariffForm.getString("additionalitemprice");
		
		String[] additionalitemtypeList = additionalitemtype.split(",");
		String[] additionalitemnameList = additionalitemname.split(",");
		String[] additionalitempriceList = additionalitemprice.split(",");
		
		TariffUtils tariffUtils = new TariffUtils();
		Tariff tariffBean = (Tariff)tariffForm.get("tariffBean");

		tariffUtils.setAdditionalitemtypes(tariffBean, additionalitemtypeList,true);
		tariffUtils.setAdditionalitemnames(tariffBean, additionalitemnameList,true);
		tariffUtils.setAdditionalitemprices(tariffBean, additionalitempriceList,true);
}
  
TariffUtils.java:
	public void setAdditionalitemtypes(Tariff tariffBean, String[] additionalitemtypes, boolean isUpdate) {
		if(isUpdate) {
			for(int i=0; i<6; i++) {
				if(i == 0) {
					tariffBean.setAdditionalitemtype1(null);
				} else if(i == 1) {
					tariffBean.setAdditionalitemtype2(null);
				} else if(i == 2) {
					tariffBean.setAdditionalitemtype3(null);
				} else if(i == 3) {
					tariffBean.setAdditionalitemtype4(null);
				} else if(i == 4) {
					tariffBean.setAdditionalitemtype5(null);
				} else if(i == 5) {
					tariffBean.setAdditionalitemtype6(null);
				}
			}
		}
		
		if(additionalitemtypes.length == 0)
			return;
		
		//将每一行的type值赋给Bean
		for(int i=0; i<additionalitemtypes.length; i++) {
			String code = additionalitemtypes[i];
			if(i == 0) {
				tariffBean.setAdditionalitemtype1(code);
			} else if(i == 1) {
				tariffBean.setAdditionalitemtype2(code);
			} else if(i == 2) {
				tariffBean.setAdditionalitemtype3(code);
			} else if(i == 3) {
				tariffBean.setAdditionalitemtype4(code);
			} else if(i == 4) {
				tariffBean.setAdditionalitemtype5(code);
			} else if(i == 5) {
				tariffBean.setAdditionalitemtype6(code);
			}
		}
	}
//注意Tariff类中属性分别为：
//    private String additionalitemtype1;
//    private String additionalitemtype2;
//    private String additionalitemtype3;
//    。。。

到此数据保存成功！

 

2、进入页面时读取显示： 

	public String read(ActionForm form, HttpServletRequest request, HttpServletResponse response) throws SystemException {	

		TariffUtils tariffUtils = new TariffUtils();
		tariffForm.set("additionalitemtype", tariffUtils.getAdditionalitemtypes(tmpTariff));
		tariffForm.set("additionalitemname", tariffUtils.getAdditionalitemnames(tmpTariff));
		tariffForm.set("additionalitemprice", tariffUtils.getAdditionalitemprices(tmpTariff));
	}
  
	public String getAdditionalitemtypes(Tariff tariff) {
		StringBuffer sb = new StringBuffer();
		if(tariff.getAdditionalitemtype1() != null && !"".equals(tariff.getAdditionalitemtype1().trim())) {
			sb.append(tariff.getAdditionalitemtype1().trim());
		} 
		
		if(tariff.getAdditionalitemtype2() != null && !"".equals(tariff.getAdditionalitemtype2().trim())) {
			sb.append("," + tariff.getAdditionalitemtype2().trim());
		} 
		
		if(tariff.getAdditionalitemtype3() != null && !"".equals(tariff.getAdditionalitemtype3().trim())) {
			sb.append("," + tariff.getAdditionalitemtype3().trim());
		} 
		...		
		return sb.toString();
	}

 JSP页面： 

window.onload = function(){
	initAdditionalItems();
}
  
	function initAdditionalItems() {
		var additionalitemtype = $('additionalitemtype').value;
		var additionalitemname = $('additionalitemname').value;
		var additionalitemprice = $('additionalitemprice').value;	
		
		//存在,表明有多行additionalItem
		if( additionalitemtype.indexOf(',') > 0) {
			var additionalitemtypelist = additionalitemtype.split(',');
			var additionalitemnamelist = additionalitemname.split(',');
			var additionalitempricelist    = additionalitemprice.split(',');
			
			//因为进入时JSP页面中只有第一行，故先将其赋值additionalItem；
			//其他行需要先 additionalItemOP('+', '') 后再赋值
			for (var i = 0, j = $('addItemType1').options.length; i < j; i++) {
				if ( $('addItemType1').options[i].value.trim() == additionalitemtypelist[0] ) {
					$('addItemType1').options[i].selected = true;
					break;
				}
			}
			
			if(additionalitemnamelist[0] == undefined) {
				$('addItemDescription1').value = '';
			} else {
				$('addItemDescription1').value = additionalitemnamelist[0];
			}
			
			if(additionalitempricelist[0] == undefined) {
				$('addItemPrice1').value = '';
			} else {
				$('addItemPrice1').value = additionalitempricelist[0];
			}
			
			var tmp = 2;
			var index = 1;
			for(var i = 0; i<additionalitemtypelist.length-1; i++) {
			
				additionalItemOP('+', '');

				for (var k = 0, j = $('addItemType' + tmp).options.length; k < j; k++) {
					if ( $('addItemType'+tmp).options[k].value.trim() == additionalitemtypelist[index] ) {
						$('addItemType'+tmp).options[k].selected = true;
						break;
					}
				}
				if(additionalitemnamelist[index] == undefined) {
					$('addItemDescription'+tmp).value = '';
				} else {
					$('addItemDescription'+tmp).value = additionalitemnamelist[index];
				}
				if(additionalitemnamelist[index] == undefined) {
					$('addItemPrice'+tmp).value = '';
				} else {
					$('addItemPrice'+tmp).value = additionalitempricelist[index];
				}
				
				index ++;
				tmp ++;
			}		
		//only one additional times result.
		} else {
			for (var i = 0, j = $('addItemType1').options.length; i < j; i++) {
				if ( $('addItemType1').options[i].value.trim() == additionalitemtype ) {
					$('addItemType1').options[i].selected = true;
					break;
				}
			}
			if(additionalitemname == undefined) {
				$('addItemDescription1').value = '';
			} else {
				var additionalitemnamelist = additionalitemname.split(',');
				$('addItemDescription1').value = additionalitemnamelist[0];
			}
			if(additionalitemprice == undefined) {
				$('addItemPrice1').value = '';
			} else {
				var additionalitempricelist = additionalitemprice.split(',');
				$('addItemPrice1').value = additionalitempricelist[0];
			}
		}
	}
 

。。。

  • 大小: 36.2 KB
  • 大小: 138.2 KB
分享到：
| 我在等一个人
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    51单片机实现将温度模块读取到的温度的内容显示在数码管上，并实现高于某一温度或低于某一温度实现报警效果

    在51单片机编程中，温度模块的读取与数码管显示以及报警功能的实现是常见的应用之一。以下是对这个项目的详细解析： 首先，51单片机是一类广泛应用的微控制器，由Intel公司开发，以其简洁的指令集和广泛的可用资源...

    基于PXI某处理器模块ATE设备的设计与实现.pdf

    基于PXI的处理器模块ATE（Automatic Test Equipment）设备设计与实现是一项在现代电子测试技术中的重要任务。随着科技的迅速进步，特别是在电子技术和计算机技术的推动下，自动测试系统已经成为确保处理器模块可靠...

    jquery版悬浮模块demo

    在网页设计中，悬浮模块是一种常见的交互元素，它能够在用户滚动页面时始终保持在屏幕的某一固定位置，提供持续的导航或信息展示。本篇文章将详细解析“jquery版悬浮模块demo”所涉及的技术点，帮助你理解和实现类似...

    Android Recyclerview实现水平分页GridView效果示例

    很明显横向滑动的分页，第一反应就是使用ViewPager，毕竟只要通过自定义ViewPager，实现这个效果还是很容易，但是实际中问题时，当前模块是Recyclerview中某一个Holder，为了性能，肯定尽量使用Recyclerview去复用...

    完整版透明化指定控件背景模块＋例程.rar

    在实际开发中，可以根据需求调整透明度，或者实现动态透明效果，增加用户界面的视觉吸引力。同时，这也涉及到性能优化，因为过度的透明效果可能会对设备性能产生影响，需要权衡美观与性能之间的平衡。

    易语言 设置超级列表框行高度 模块+DLL

    模块是易语言中的一个关键概念，它是一组相关功能的集合，可以被其他程序调用，而DLL则是一种在运行时动态加载的代码库，可以在多个程序之间共享功能。 易语言模块（.ec文件）是由易语言5.72版本编写的，它包含了...

    asp在线考试系统(asp+access实现)

    本系统采用B/S模式，采用现在使用广泛的ASP语言和对数据文件安全保护性极好的SQL Server2000设计开发出的一个实现在线考试的动态网站—基于Web的考试管理系统，也就是在线考试系统。该系统基本上具备一个网上数据...

    实现QQ程序的抽屉效果

    在移动应用设计中，抽屉效果（Drawer Effect）是一种常见的导航模式，常见于许多应用程序，如QQ、微信等。这种效果允许用户通过从屏幕边缘滑动来打开一个隐藏的侧边栏，通常包含导航菜单、设置选项或者其他的附加...

    C#开发典型模块大全

    10.3.5　转到某天、某周、某月及某年的实现　243 10.3.6　节日管理　245 10.3.7　提醒管理　249 第11章　文件批量处理器 11.1　概述　256 11.2　关键技术　256 11.2.1　文件流技术　256 11.2.2　文件解压缩技术　...

    易语言模块优化内存模块.rar

    例如，可以创建一个内存池，当不再需要某一对象时，不是立即释放，而是将其放入池中，供后续需要时再次使用。 6. **内存泄漏检测**：内存泄漏是程序中常见的问题，该模块可能包含了检测和预防内存泄漏的机制，确保...

    java+mysql实现的代码分享网（所有源码已开源，效果可看网址：www.admintwo.com）

    分词功能（点击某一个分享，进入详情页的时候，会对该分享名称进行分词，并且加入到head中，利于网站seo）。 可能还有一些其他功能，通过查看源码可了解。 网站技术介绍： 1、采用语言，java 2、后台框架，struts2+...

    基于omnet++的leach协议的仿真研究

    它提供了模块化的设计，使得用户能够轻松构建复杂的网络模型，包括WSN、物联网（IoT）和移动自组网（MANET）等。omnet++的开源特性吸引了全球范围内的研究者和开发者，形成了丰富的社区资源和插件库，进一步增强了其...

    易语言模块丶窗口透明

    使用者只需在自己的程序中引入这个模块，即可轻松实现窗口透明效果，而无需深入了解底层的API细节。通过这种方式，易语言提供了一种简单易用的方法，让开发者可以快速开发出具有窗口透明效果的应用程序。

    大功率电源模块并联均流的设计方案

    无主均流法中，每个模块都可能成为输出电流最大的模块，从而避免了对某一特定模块的依赖。由于电路中二极管的存在，使得压降变化，这导致输出电流最大的模块始终处于一种轮换状态，由此产生的均流方式称为无主均流。...

    某资讯项目文章模块前端代码打包

    JavaScript可能用于实现诸如加载更多文章、评论交互、点赞功能等动态效果。 其次，前端代码的模块化管理是现代开发的常态。这通常通过引入像CommonJS、ES6的import/export语法或者使用模块打包工具如Webpack来实现...

    完整版置超级列表框指定行列前景、背景色模块＋例程（06.10.8更新）1.rar

    在IT领域，尤其是在Windows应用程序开发...在这个"完整版置超级列表框指定行列前景、背景色模块＋例程（06.10.8更新）1.rar"压缩包中，我们很显然会找到一个专门针对超级列表框的编程模块和示例代码...

    4位动态数码管其中1位闪烁

    4. **闪烁效果实现**：通过定时器中断服务程序定期改变某个位选线的状态，实现闪烁效果。 5. **延时控制**：合理设置延时时间，确保数码管有足够的时间被点亮，并且不会因为显示时间过短而无法被人眼察觉。 通过...

    Jquery+CSS 原子插件 效果

    原子插件就是这种思想的体现，它们是可复用的代码片段，专注于某一特定效果。 综上所述，"Jquery+CSS 原子插件 效果"是关于利用jQuery的强大功能和CSS的灵活性，创建出高效、简洁且可复用的动态效果。在实际开发中...

    最新状元分销V2.0钻石版，全开源纯净安装完美运营版+某猪微店系统+可任意二开.txt

    ### 最新状元分销V2.0钻石版全开源纯净安装完美运营版+某猪微店系统+可任意二开 #### 一、简介 “最新状元分销V2.0钻石版”是一款专为电商和微店商家设计的分销管理系统。该版本支持全开源，意味着用户可以完全...

    JS 实现雅虎首页收缩效果

    在JavaScript（JS）中实现类似雅虎首页的局部收缩效果是一项常见的前端开发任务，它可以提升网页的用户体验，尤其是在有限的空间内展示更多的信息。雅虎首页的收缩效果通常指的是当用户鼠标悬停在某个模块上时，该...

Magicbox
Global site tag (gtag.js) - Google Analytics