利用Jquery+JS生成Json串，动态创建添加项

需求：在一张页面中创建若干个子问题。创建数量不确定，子问题没有主键ID可查。页面内容和子问题内容存在主外键关系。点击“保存”时，将主表内容和子问题内容一同保存进数据库。页面如下图：

主表和子表数据库主外键结构如图：

添加位置的HTML代码为：

<div id="J_FankuiList">
<!-- 添加子表格位置 -->
</div>

解决方案：

1、在页面“新建选项内容”中添加 onclick 方法οnclick="newFankui(this);"

<button type="button" οnclick="newFankui(this);" id="newFankuiPropertyButton" class="">新建选项内容</button>

2、在JS中创建 newFankui() 方法：

function newFankui(obj){
 	$("#J_FankuiList").append(fankui());
}

3、创建 fankui() 方法，用来生成需要的子表格式：

function fankui(iz){
	var html = "";
	html += "<div class='sku-div-in-controls'>";
	html += "	<div class='hidentop5px'>";
	html += "		<ul>";
	html += "			<li class='marginright5'>";
	html += "				<input type='hidden' name='optionId'/>";
	html += "			</li>";
	html += "			<li class='marginright5'>选项名称：";
	html += "				<input type='text' name='name' id='paramValue0' class='text required' maxlength='10' />";
	html += "			</li>";
	html += "			<li class='marginright5'>排序序号：";
	html += "				<input type='text' name='sequence' id='paramValue1' class='text required' maxlength='10' />";
	html += "			</li>";
	html += "			<li class='marginright5'>是否默认选择：<br/>";
	html += "				<select name='checked'>";
	html += "					<option value='1' class='required'>选中</option>";
	html += "					<option value='0' class='required'>非选中</option>";
	html += "									";	
	html += "				</select>";
	html += "			</li>";
	html += "		</ul>";
	html +="		<div>";
	html +="			<a title='删除' href='javascript:void(0);'";
	html +="				οnclick='delFankui(this);'>删除</a>";
	html +="		</div>";
	html +="		<div></div>";
	html +="	</div>"	;
	html +="</div>"	;
	iz++;
	return html;
}

4、因为3中涉及到“删除”功能，所以创建对应的方法 delFankui(obj)

function delFankui(obj){
	$(obj).parent().parent().parent().remove();
 	$("#J_AddCustomSKU").attr("class","");
 	$("#J_AddCustomSKU").attr("onclick","addSkuList(this)");
	$("#newFankuiPropertyButton").attr("class","");
	$("#newFankuiPropertyButton").attr("onclick","newFankui(this);");

}

5、以上表格已经建好。下面需要填写表格内容，并获取。这里使用JS中的 JSON.stringify() 方法生成Json串儿。

function feedbackProperty(){
	var feedbackMap = new Map();
	var valueList = null;
	
	var outerLength = $(".sku-div-in-controls > .hidentop5px > ul").get();	//外部“选项内容的集合”
	
	
	for(var i=0; i<outerLength.length; i++){
		if(valueList ==null){
			valueList = new Array();
		}
		//手机所有input=hidden对象
		var valueHiddenList = $(outerLength[i]).parent().find(" ul > .marginright5 > input[type='hidden']").get();
		
		//收集所有input=text对象
		var valueTextList = $(outerLength[i]).parent().find(" ul > .marginright5 > input[type='text']").get();
		
		//收集所有input=selected对象
		var valueSelect = $(outerLength[i]).parent().find("ul > .marginright5 > select option:selected").get();
		
		//将input=hidden的值压入list
		var a = $.trim($(valueHiddenList).val());
		if(a!=null && a!="" && a!= undefined){
			valueList.push(a);
		}else{
			a = "0";
			valueList.push(a);
		}
		
		//内循环2次，将input=text的值压入list
		for(var j=0;j<3; j++){
			if($(valueTextList[j]).val()!=null && $(valueTextList[j]).val() !="" && $(valueTextList[j]).val() != undefined){
				valueList.push($.trim($(valueTextList[j]).val())); 
			}
		}
		//将selected的值压入list
		valueList.push($.trim($(valueSelect).val()));
		var option = "option"+i;
		feedbackMap.put(option, valueList);
		valueList = null;
	}
	var json = JSON.stringify(feedbackMap.getElements());
	if($("#feedback_value").val()!=null){	//#feedback_value不为空时，清空
		$("#feedback_value").val();
	}
	$("#feedback_value").val(json);
}

以上方法的思路是：

1）、创建一个Map用来装最后的JSON数据

2）、再创建一个List存储key：value中的value值。设计最后的JSON格式为[{key:[data1,data2,data3]}]

3）、通过JQuery获取所有三个数据对应的 <input >标签个数（见 $(".sku-div-in-controls > .hidentop5px > ul").get() ）

4）、遍历所有 dom 元素，分别找到属性为 hidden、text和selected的<input>元素

5）、分别将以上元素的值存入2中的List中，顺序为[hidden，text，text，selected]（这里是表单属性顺序）

6）、因为 JSON.stringify() 生成的json格式为[{"key":"a","value":["a1","a2","a3","a4"]},{"key":"b","value":["b1","b2","b3","b4"]}]，所以要为每个对象生成一个key对应的name值，所以在4的循环中手动生成一个name名。

var option = "option"+i;

feedbackMap.put(option, valueList);

7）、将生成好的map作为参数存放进 var json = JSON.stringify(map) 中。将json值存入 id为feedback_value 的hidden 中。

6、生成json的方法完成。下面如何在不使用 Ajax 的情况下调用该方法。（不用Ajax是因为我目前不会Ajax）：

在“保存”按钮中添加一个 οnmοuseοver="feedbackProperty()" 方法，表示当鼠标划过“保存按钮”时，就调用生成json的方法。这样就可以把json传递给后台获取。

以上就是利用JQuery完成动态创建子表的过程。