jQuery结合Handlebars生成简单的Input,Select

53873039oycg

浏览: 843946 次
性别:

最近访客更多访客>>

junJZ_2008

nessiah

hao___feng

China丰

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

工作记录
jQuery

下面的例子是使用Handlebars生成简单的input,select ,代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用Handlebars动态生成input</title>
<style>
* {
	margin: 0px;
	padding: 0px;
	margin: 0 auto;
}

#contentDiv {
	width: 800px;
	margin: 0 auto;
	border-bottom: 2px solid #e6e6e6;
	padding:0 0 10px 0;
}

#titleDiv {
	padding: 30px 0 5px 5px;
	font: 500 18px "微软雅黑";
}

#inputDiv {
	border-top: 2px solid #e6e6e6;
	vertical-align: middle;
	padding: 5px 0 0 7px;
}

#inputDiv input {
	width: 120px;
}

#inputDiv span {
	font-size: 14px;
}

.fixClass {
	width: 120px;
	height: 22px;
	line-height: 20px;
}

#submitDiv {
	padding: 20px 0 15px 0;
	text-align: center;
}

.spanClass {
	color: #fff;
	background: #89D900;
	height: 25px;
	width: 100px;
	display: inline-block;
	line-height: 25px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

.banClass {
	padding: 0 20px 0 20px;
}
</style>
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../../js/wdatepicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../js/handlebars-v1.3.0.js"></script>
<script type="text/javascript">
	var inputNormalTemp = {
		'result_temp' : '<input type="text" id="{{V_KEY}}" name="{{V_KEY}}">'
	};
	var inputDateTemp = {
		'result_temp' : '<input type="text" id="{{V_KEY}}" name="{{V_KEY}}" class="Wdate" onfocus="WdatePicker({{V_DateFocus}})">'
	};
	var selectTemp = {
		'result_temp' : '<select name="{{V_KEY}}" id="{{V_KEY}}" class="fixClass">'
				+ '<option value="-1">所有</option>'
				+ '{{#each selectData}}'
				+ '<option value="{{S_KEY}}">{{S_VALUE}}</option>'
				+ '{{/each}}</select>'
	};
	var hiddenTemp = {
		'result_temp' : '<input type="hidden" id="{{V_KEY}}" name="{{V_KEY}}" value="{{V_VALUE}}" />'
	};
	var typeTemp = {
		'text' : inputNormalTemp,
		'date' : inputDateTemp,
		'select' : selectTemp,
		'hidden' : hiddenTemp
	};
	function generateTableData(v_jsonData, v_form) {
		var jsonData = v_jsonData.data;
		var varTableHtml = '<table  cellpadding="0" cellspacing="0" border="0" width="100%">';
		for (var i = 0, len = jsonData.length; i < len;) {
			varTableHtml += "<tr>";
			/* 注意不要越界 */
			for (var j = 0; j < 3&&i<len; j++) {
				var varType = jsonData[i].V_TYPE;
				var varTemp =Handlebars.compile(typeTemp[varType].result_temp);
				var varHtml =varTemp(jsonData[i]);/* 注意和上面的变量一样 */
				if (varType!='hidden') {
					varTableHtml += "<td><label>" + jsonData[i].V_NAME
							+ "：</label></td><td>" + varHtml + "</td>";
				} else {
					varTableHtml += varHtml;
				}
				i++;
			}
			varTableHtml += "</tr>";
		}
		varTableHtml += "</table>";
		$('#' + v_form).html(varTableHtml);
	}
	var jsonData = {
		data : [ {
			V_TYPE : "date",
			V_KEY : "begin_date",
			V_NAME : "开始时间",
			V_DateFocus: "{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{$dp.$D(\\'end_date\\')}'}",
		}, {
			V_TYPE : "date",
			V_KEY : "end_date",
			V_NAME : "结束时间",
			V_DateFocus:"{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{\\'2099-12-31\\'}',minDate:'#F{$dp.$D(\\'begin_date\\')}'}",
		}, {
			V_TYPE : "select",
			V_KEY : "selectId",
			V_NAME : "测试单选",
			selectData : [ {
				S_KEY : "1",
				S_VALUE : "测试"
			}, {
				S_KEY : "2",
				S_VALUE : "测试2"
			}, {
				S_KEY : "3",
				S_VALUE : "测试3"
			} ]
		}, {
			V_TYPE : "hidden",
			V_KEY : "hiddenId",
			V_VALUE : "123"
			
		}]
	};
	function closeWin() {
		var browserName = navigator.appName;
		if (browserName == "Netscape") {
			var opened = window.open('about:blank', '_self');
			opened.opener = null;
			opened.close();
		} else if (browserName == "Microsoft Internet Explorer") {
			window.opener = null;
			window.open('', '_self');
			window.close();
		}
	}
	$(function() {
		generateTableData(jsonData, "inputForm");
		$('#sbtSpan').on('click',function() {
			var varForm = $('#inputForm').serialize();
			console.log(varForm);
		});
		$('#closeSpan').on('click',closeWin);
	});
</script>
</head>
<body>
	<div id="contentDiv">
		<div id="titleDiv">
			<label>名称:HandlerBars动态生成Input</label>
		</div>
		<div id="inputDiv">
			<form method="post" action="#" id="inputForm">
				
			</form>
		</div>
		<div id="submitDiv">
			<span class="spanClass" id="sbtSpan">提交</span> <span class="banClass" /> <span
				class="spanClass" id="closeSpan">关闭</span>
		</div>
	</div>
</body>
</html>

结果如下：

点击提交，结果为：