利用struts将一对多数据传入后台

        在Struts2的Action中提供与界面元素项对应的属性,将属性名称设置为与表单元素一致的名称,并对其提供get和set方法,Struts2会自动将这些数据传输到后台。表单元素可以集中到一个Bean对象中,此时表单元素name指定为Bean.theProperty即可。

         针对一对多表单数据情况,在Action中设置一个Bean和一个List(可以用set,会复杂些)较为方便。而后对这两个对象进行转换存入一对多数据表中。

         一对多数据在表单中通常展现的形式为一排排属性下面对应一个列表(table),使用table来呈现多方数据,涉及的问题有初始化一方和多方数据时需要动态增加表行,提交数据时一方和多方数据的name需要对应到Action上。对于多方数据可以在动态初始化数据时将table每行元素映射到Action的List中,也可以在提交时动态创建一张临时表,将其对应到Action的List中,只需将临时table 附加到form上,便可一并提交到后端。后者代码如下所示:

var execContentDiv = document.createElement("div");
 		execContentDiv.style.display = "none";
 		
 		var oTable = document.getElementById("exeContentTable");//源
 		var tTable = document.createElement("table");	 
 		for(var i = 2; i < oTable.rows.length; i++){
 			var tRow = tTable.insertRow(i-2);
 			var tCol;
 			tCol = tRow.insertCell(0);
 			tCol.innerHTML = "<input type='text' name='list[" + (i-2) + "].execContextSerialNum' value='" + (i-1) + "'/>";
 			tCol =  tRow.insertCell(1);
 			tCol.innerHTML = "<input type='text' style='width:100%' name='list[" + (i-2) + "].execContext' value='" + 
 																	oTable.rows(i).cells(1).childNodes(0).value + "'/>";
 		}
 		
 		execContentDiv.appendChild(tTable);
 		document.getElementById("form").appendChild(execContentDiv);

         提交数据之前需要按需求填写多方数据,增加多方数据条目,其实就是动态增加table 行数。针对提交多方数据过程,多方数据可以有数据呈现者table直接映射到Action的List中,也可建立临时table。上面提交试用了临时table方式,下面展示创建数据时采用前者方式,从以下代码展示的增加表行和减少表行能够看出和前面的内容大同小异。

      

var index = 1;
	function addLine(){
		var row = exeContentTable.insertRow(exeContentTable.rows.length);
		var col = row.insertCell(0);
		col.innerHTML = index + "<input type='hidden'   name='list[" + (index - 1) + "].execContextSerialNum' value='" + index + "'/>";
		col = row.insertCell(1);
		col.innerHTML = "<input type='text' style='width:100%' name='list[" + (index - 1) + "].execContext' />";
		col = row.insertCell(2);
		col.innerHTML = "<input type='button'  value ='删除'  οnclick='deleteLine(this)'/>";
		index++;
	}
    function deleteLine(obj) {
    	
    	var cur = obj.parentNode.parentNode.rowIndex;
        var trobj = obj.parentNode.parentNode;
        trobj.parentNode.removeChild(trobj);
        index--;
		
        for(var i=cur; i<= exeContentTable.rows.length -1 ;i++){
 			exeContentTable.rows(i).cells(0).innerHTML  = cur +
	 					"<input type='hidden' name='list[" + (cur - 1) + "].execContextSerialNum' value='" + cur + "'/>";
 			exeContentTable.rows(i).cells(1).innerHTML  = 
		 				"<input type='text' style='width:100%'  name='list[" + (cur - 1) + "].execContext' value='" + 
						exeContentTable.rows(i).cells(1).childNodes(0).value +"'/>";
 			cur++;
		}
}

       创建、提交之后再呈现先前填写的一方和多方数据,则需要页面的初始化,其构建构成和前面方式一样是在动态创建表上做文章,而基于struts我们可以有多重方式来初始化数据,其中JS便是一种不错的选择。在较为合适的框架和架构下,了解涉及数据关系表单的创建、提交和初始化等工作,在架构下批量开发便轻松了很多。

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值