Json2Form
/*
jQuery json2form Plugin
*
version: 1.0 (2011-03-01)
*
*
Copyright (c) 2011, Crystal, [email protected]
*
Dual licensed under the MIT and GPL licenses:
*
http://www.opensource.org/licenses/mit-license.php
*
http://www.gnu.org/licenses/gpl.html
*
Date: 2011-03-01 rev 1
*/
json2form Plugin based jquery,Simple and util Utility 、OpenSource and FREE.
- javascript object or json value transform to html form element value.
- support local data and remort data using Ajax
- when object or json property name equal to html element attribute name,fill value to element.
- support element input [text password hidden button reset submit checkbox radio] and select textarea
- support element init,checkbox radio select and lable.
Homepage&Blog:
http://blog.163.com/shimingxy/
any questions ,you can visite
download source:
json2form Plugin基于JQuery框架，简单实用，基于开源协议，免费使用。
- 把javascript的对象或者json对象的值转换为html表单元素的值
- 支持本地数据和动态AJAX远程数据。
- 当对象或者json的属性等于html表单元素name属性值，该对象或json属性值赋予该表单元素
- 支持表单元素input [text password hidden button reset submit checkbox radio] 和 select textarea
- 支持初始化表单元素,checkbox radio select 和 lable.
项目博客：http://blog.163.com/shimingxy/
源代码的下载:
在网页的头加入js
<html>
<head>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="json2form.js" type="text/javascript"></script>
</head>
<body>
<form id="json2form" name="json2form">
....
</form>
</body>
</html>
var json2fromdata ={
txt:'文字输入',
pwd:'密码输入',
hd:'隐藏',
are:'多行文字json2form',
btn:'按钮',
rt:'重置按钮',
sb:'提交按钮',
rad:'男',
chk:'chk1',
chk:['美国','中国'],
sl:['法国','日本'],
label:{
txt:'自定义文本框标签',
sl :'自定义下拉列表标签'
},
init:{
chk444:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
chk555:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
slinit:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}]
}
};
1、对象的属性名必须和表单元素name的值对应/object property equal to html element attribute name
2、checkbox select对应的值可以为字符数组，表示多选/if multiple choice,checkbox select value can be string array,
3、label初始化label，label对象的属性必须和表单元素for的值对应/object lable property initialize html label by for value
4、init初始化checkbox radio select，init对象的属性必须和表单元素name的值对应，init对象为对象数组，value为值，display为显示名称
/object init property initialize checkbox radio select,init property initialize html element by attribute name,init is array,value and display
5、init初始化checkbox radio select使用ajax,checkbox radio select有url的属性，则读取url的数据进行初始化。
/initialize checkbox radio select use ajax,if checkbox radio select has url attribute ,read url data initialize html element.
本地调用/local data
$("#json2form").json2form({data:json2fromdata});
远程调用/remote data
$("#json2form").json2form({url:"http://...",data:{id:"json2form",name:"json2form"}});
1、支持浏览器/supported browsers are:
Internet Explorer 6+ *
Mozilla Firefox 3+
Google Chrome
2、未测试浏览器/UnTest browsers are:
Safari 3+
Opera 9+