关闭

Json转换Form

799人阅读 评论(0) 收藏 举报
分类:

Json转换Form(Json2Form Plugin)  

2011-03-03 10:57:00|  分类: JQuery |字号 订阅

/* jQuery json2form Plugin 
 * version: 1.0 (2011-03-01)
 *
 * Copyright (c) 2011, Crystal, shimingxy@163.com
 * 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+
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:372197次
    • 积分:5677
    • 等级:
    • 排名:第4605名
    • 原创:42篇
    • 转载:1055篇
    • 译文:1篇
    • 评论:6条
    文章分类
    最新评论