jQuery插件:Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式:
//jQuery静态方法注册
//调用方法$.a1()
$.extend({
a1: function () {
console.log("a1");
}
})
//jQuery插件方法注册
//调用方法$("#col").b1()
$.fn.extend({
b1: function () {
console.log("b1");
}
})
将ajax返回的数据自动绑定到form表单中的插件,常用语修改等业务,源码如下:
/*!
* Json To Form v0.0.1
* Requires jQuery v1.7.2 or later
* Author:taiyonghai
*/
; (function ($) { /*
flagName:标识绑定字段元素的属性,如:
data-bind是寻找绑定字段的属性:
<input data-bind='Time' type='text' />
<input data-bind='User.Time' type='text' />
注意区分大小写,与对象名相同即可
jsonData:json数据对象,根据其中的属性名,绑定到对应属性名的字段上
*/
var JsonBind = function (ele, opt) {
this.$element = $(ele),
this.defaults = {
flagName: 'name'
},
/*
当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。
同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。
将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,
这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
*/
this.options = $.extend({}, this.defaults, opt)
};
//取值方法,可以单独以实体属性名进行取值,如:UserName,也可以复合实体取值,如:UserInfo.UserName,注意区分大小写
JsonBind.getValue = function (key, data) {
if (key.split('.').length == 1) {
return data[key];
}
else if (key.split('.').length == 2) {
var keys = key.split('.');
//数据有值时获取
if (data[keys[0]]) {
//先判断数组后判断object,因为数组也是object
if (Array.isArray(data[keys[0]])) {
return data[keys[0]][0][keys[1]];
}
else if (typeof (data[keys[0]]) == 'object') {
return data[keys[0]][keys[1]];
}
else {
return console.error("对象类型错误,无法解析");
}
}
}
else {
return console.error("实体对象层级过多,最多支持两级,如:test.name");
}
};
JsonBind.prototype = {
bind: function () {
if (this.options.jsonData) {
if (this.options.jsonData == 'string') {
this.options.jsonData = JSON.parse(this.options.jsonData);
}
}
//获得触发事件的元素
var dom = this.$element;
var name = this.options.flagName;
var data = this.options.jsonData;
//遍历元素内所有含有name属性的元素
dom.find("[" + name + "]").each(function () {
//取出json中对应name属性的值
var key = $.trim($(this).attr(name));
var val = JsonBind.getValue(key, data);
if (val != '') {
//检查当前元素标签,并根据不同标签进行赋值操作
if ($(this).is("input")) {
//检查当前元素类型,并根据不同类型进行赋值操作
switch ($(this).attr("type")) {
case "radio":
$(dom).find("input:radio[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);
break;
case "checkbox":
$(dom).find("input:checkbox[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);
//$(this).siblings("[value='" + val + "']").prop("checked", true);
break;
default:
$(this).val(val);
break;
}
}
else {
//如:select、textarea
$(this).val(val);
}
}
});
}
};
//将方法增加到jQuery扩展方法中
$.fn.extend({
dataBind: function (options) {
var jsBind = new JsonBind(this, options);
jsBind.bind();
}
}); })(jQuery);
调用方式:
//flagName是可选参数,默认是元素的name属性
$("#menuForm").dataBind({
jsonData:JSON.parse(data),
flagName:'name'
});
复合实体调用方式
var data = {
Tag: 'aaa',
FunctionName: 'bbb',
Url: 'ccc',
OrderBy: '111'
};
$("#menuForm").dataBind({
flagName: 'name',
jsonData: { menu: data, menu1: data, menu2: data, menu3: data }
});
变量声明,var $abc=$("#test"),这里面的$abc我们认为它是一个jQuery对象,所以前面加上$符
jQuery插件:Ajax将Json数据自动绑定到Form表单的更多相关文章
- 通过JQuery的$.ajax()把 json 数据 post 给 PHP
通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- Ajax提交数据后,清空form表单
按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- jquery实现ajax,返回json数据
jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...
- jquery插件-table转Json数据插件
使 用开源插件Table-to-json: 官方地址:http://lightswitch05.github.io/table-to-json/ 功能说明:将js对象table转换成javascrip ...
- html、css/bootStrap、js/Jquery、ajax与json数据交互总结
设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块: 个人简历模块: 包涵个人基本信息(利用CSS的flo ...
- Jquery请求Ajax的json数据
获得单个json对象 $.getJSON("test.js", { name: "John", time: "2pm" }, funct ...
- 及时从数据库中取得数据填放进Form表单的多选框中
#写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...
随机推荐
- java基础解析系列(五)---HashMap并发下的问题以及HashTable和CurrentHashMap的区别
java基础解析系列(五)---HashMap并发下的问题以及HashTable和CurrentHashMap的区别 目录 java基础解析系列(一)---String.StringBuffer.St ...
- 关于用VMware克隆linux系统后,无法联网找不到eth0网卡的问题
当使用克隆后的虚拟机时发现系统中的网卡eth0没有了,使用ifconfig -a会发现只有eth1.因为系统是克隆过来的,原有的eth0以及ip地址都是原先网卡的,VMware发现已经被占用,就会创建 ...
- 在STEP7 TIA PORTAL中,设置模块的地址和设备名(Device name)
assign device name, ip address for PROFINET componet in TIA Portal 方法1: PLC --> online & diag ...
- DES加密:8051实现(C语言) & FPGA实现(VHDL+NIOS II)
本文将利用C语言和VHDL语言分别实现DES加密,并在8051和FPGA上测试. 终于有机会阅读<深入浅出密码学一书>,趁此机会深入研究了DES加密的思想与实现.本文将分为两部分,第一部分 ...
- Linux Centos 6.9中SSH默认端口修改的坑
关于Linux Centos6.5的SSH默认端口修改的博客有一大堆,我在这里就不啰嗦了,但是面对Centos 6.9,就会发现有一个巨坑: 修改iptables之后执行下面的命令后: # servi ...
- 五,ESP8266 TCP服务器多连接
一些时间去准备朋友的元器件了... 接着写,,争取今天写完所有的文章,,因为答应了朋友下周5之前要做好朋友的东西 对于TCP大家在玩AT指令的时候有没有发现客户端最多连接5个,,,再连接就不行了?? ...
- mybaties-plus入门
目前正在维护的公司的一个项目是一个ssm架构的java项目,dao层的接口有大量数据库查询的方法,一个条件变化就要对应一个方法,再加上一些通用的curd方法,对应一张表的dao层方法有时候多达近20个 ...
- 软件工程(GZSD2015)第二次作业进度
贵州师范大学软件工程第二次作业 徐 镇 王铭霞 张 英 涂江枫 张 燕 安 坤 周 娟 杨明颢 杨家堂 罗文豪 娄秀盛 周 娟 李盼 岳庆 张颖 李丽思 邓婷 唐洁 郑倩 尚清丽 陈小丽 毛茸 宋光能 ...
- 个人作业1——四则运算题目生成程序(基于java)
项目代码: https://git.coding.net/YJh_/11.git 题目要求: 除了整数以外,还要支持真分数的四则运算,真分数的运算,例如:/ + / = / 运算符为 +, −, ×, ...
- 201521123077 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型类 利用泛型可以写出一个更加通用的类,比如下面的例子: class simpleHolder<T&g ...