标签：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="../resources/javascript/json2form.min.js"></script>
<script src="../resources/javascript/jquery-1.8.3.min.js"></script>
<script src="../resources/javascript/json2.js"></script>
<style type="text/css">
</style>
</head>
<body>
<form id="MyForm">
<div id="form1"></div>
<input type="button" value="获取json" onclick="GetString()" />
</form>
<script type="text/javascript">
var jf = new JsonForm("form1", {
arrayIndex: {
show: true
},
fields: {
Name: { label: "姓名", readonly: true },
Married: { label: "已婚" },
Height: { label: "身高", required: true, type: "number", ctrlArrt: { min: 100, max: 200, step: 1 } },
Age: { label: "年龄", maxlength: 3, required: true, pattern: "\\d+", title: "请输入数字", tips: "小于100" },
Sexy: { label: "性别", type: "radio", datalist: [{ value: 0, text: "男" }, { value: 1, text: "女" }] },
Childrent: { label: "子女", noCreate: false, noDelete: true, cssText: "" },
Hobby: {
label: "爱好", required: true, cssText: "background:infobackground;border:1px solid gray", type: "checkbox",
delimiter: "、", multiple: true, size: 5, datalist: ["烹饪", "音乐", "电影", "篮球", "旅行"]
},
Address: { label: "居住地" },
Street: { label: "街道", width: "300px", tips: "居住所", inline: true },
zipCode: { label: "邮政编码", tips: "居住地", inlint: true },
City: { label: "城市", cssText: "", inline: true, ctrlCssText: "color:red", hideLabel: false, maxlength: 2, size: 15, tips: "hello" },
Country: { label: "国家", width: "300px", inline: true, readonly: true, type: "select", datalist: [‘美国‘, ‘中国‘, ‘韩国‘] }
}
});
var data = {
"Name": "XXX",
"Age": 32,
"Height": 165,
"Married": true,
"Sexy": 1,
"Hobby": "篮球、电影",
"Address": {
"Street": "济南\"区XX路XX号",
"City": "山东",
"Country": "中国",
"zipCode": "543210"
},
"Children": [
{
"Name": "XXX",
"Age": 8
},
{
"Name": "YYYY",
"Age": 4
}
]
}
jf.render(data);
function GetString() {
var jsonTxt = jf.getJsonString();
alert(jsonTxt);
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mfc-itblog/p/4760366.html
