Json转换Form

最新推荐文章于 2023-06-19 15:39:55 发布

ccecwg

最新推荐文章于 2023-06-19 15:39:55 发布

阅读量4.2k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

Json转换Form(Json2Form Plugin)

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

/* jQuery json2form Plugin

* version: 1.0 (2011-03-01)

* 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:

http://code.google.com/p/jquery-json2form/

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/

源代码的下载:

http://code.google.com/p/jquery-json2form

在网页的头加入js

<html>

<head>

</head>

<body>

....

</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+

ccecwg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Json转换Form

Json转换Form(Json2Form Plugin) 2011-03-03 10:57:00| 分类：JQuery |字号订阅/* jQuery json2form Plugin * version: 1.0 (2011-03-01) * * Copyright (c) 2011, Crystal, [email protected]
复制链接

扫一扫