1.标准的html。
2.用户可以html自写义枚举和连接数据库为select、checkbox、radio等标签进行注入。
3.服务端返数据(json格式)html自动填充。
4.数据交互时以ajax方式传递。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
jsonToSelectHtml = function(id, data) {//json转为select的html选项
var dataObj = data;
if (dataObj.data.length > 0) { //有值的时候
var isNull = $('#' + id + '').attr('isNull');
var model = '';
if (isNull == 'true') { //判断是否能为空
model += '<option></option>';
}
for ( var i = 0; i < dataObj.data.length; i++) {
model += '<option value='+dataObj.data[i].value+'>'
+ dataObj.data[i].key + '</option>';
}
$('#' + id + '').append(model);
}
}
jsonToInputCheckBoxHtml = function(id, data) {//json转为input的checkbox html选项
var dataObj = data;
if (dataObj.data.length > 0) { //有值的时候
var model = '';
for ( var i = 0; i < dataObj.data.length; i++) {
model += '<input id='+id+' name='+id+' type="checkbox" value='+dataObj.data[i].value+'>'
+ dataObj.data[i].key + '</input>';
}
$('#' + id + '').after(model);
$('#' + id + '').remove();
}
}
jsonToInputRadioHtml = function(id, data) {//json转为input的radio html选项
var dataObj = data;
if (dataObj.data.length > 0) {
var model = '';
for ( var i = 0; i < dataObj.data.length; i++) {
model += '<input id='+id+' name='+id+' type="radio" value='+dataObj.data[i].value+'>'
+ dataObj.data[i].key + '</input>';
}
$('#' + id + '').after(model);
$('#' + id + '').remove();
}
}
intoHtml = function(id, data) {
var tagName = $('#' + id + '')[0].tagName;
if (tagName == 'SELECT') {//判断tagName是否等于SELECT
jsonToSelectHtml(id, data);
}
if (tagName == 'INPUT') {//判断tagName是否等于INPUT
var type = $('#' + id + '').attr('type');
if (type == 'checkbox') { //判断type是否为checkbox
jsonToInputCheckBoxHtml(id, data);
}
if (type == 'radio') { //判断type是否为radio
jsonToInputRadioHtml(id, data);
}
}
}
initPage = function(id) {//为表单加载元素
var dataType = $('#' + id + '').attr('dataType');
var data = '';
if (dataType == 'json') { //读取本页面的json
data = $('#' + id + '').attr('dataValue'); //格式为:{data:[{'key':'男','value':'1'},{'key':'女','value':'2'},{'key':'其它','value':'0'}]}
data = eval("(" + data + ")");//转换为json
intoHtml(id, data);
} else if (dataType == 'dataBase') {//读取后台数据
var dataMenu = $('#' + id + '').attr('dataMenu');
$.ajax({
url : "CodeManager",
method : "POST",
data : {
'dataMenu' : dataMenu
},
error : function(respData) {
alert("加载失败，错误信息:" + respData);
},
success : function(respData) { //读取数据库json
data = eval("(" + respData + ")"); //转换为json
intoHtml(id, data);
}
});
}
}
initHtml=function(obj,formName){ //服务端返回的josn注入html中
for ( var attr in obj) {
if (typeof (obj[attr]) == 'function') {
continue;
}
var $input = $("#"+formName+" :input[name='" + attr + "']");
var type = $input.attr("type");
if (type == "checkbox" || type == "radio") {
var avalues = obj[attr].split(",");
for ( var v = 0; v < avalues.length; v++) {
$input.each(function(i, n) {
var value = $(n).val();
if (value == avalues[v]) {
$(n).attr("checked", "checked");
}
});
}
} else {
$input.val(obj[attr]);
}
}
}
$('document').ready(function() {
var initData="sex,sex1"; //等找到jquery能读取表单的所有name时再改写
var array=initData.split(",");
for(var i=0;i<array.length;i++){
initPage(''+array[i]+'');
}
$('#saveBtn').click(function() {
$('#formValue').html($('#myform').serialize());
});
$('#saveBtn1').click(function() {
var obj = jQuery.parseJSON('{"username":"victor","sex":"2","sex2":"1,2","interesting1":"0,2","interesting3":"1"}'); //当客户端返回一串json的字符串
initHtml(obj,'myform');
});
//填冲值
});
</script>
</head>
<body>
<form ID="myform">
<table border="1" style="border: solid black;">
<tr>
<td>用户名:<input type="text" id="username" name="username" /></td>
<td>性别 <select id="sex" name="sex" dataType="json"
dataValue="{data:[{'key':'男','value':'1'},{'key':'女','value':'2'},{'key':'其它','value':'0'}]}"
isNull="true">
</select>
</td>
</tr>
<tr>
<td>兴趣 <input id="interesting1" name="interesting1"
type="checkbox" dataType="json"
dataValue="{data:[{'key':'篮球','value':'1'},{'key':'足球','value':'2'},{'key':'乒乓球','value':'0'}]}"/>
</td>
<td>兴趣3 <input id="interesting3" name="interesting3"
type="radio" dataType="dataBase" dataMenu="性别" />
</td>
</tr>
<tr>
<td><input type="button" id="saveBtn" value="提交" />
<input type="button" id="saveBtn1" value="读取客户端返回的数据" /></td>
</tr>
</table>
</form>
<div id="formValue"></div>
</body>
</html>