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表单的更多相关文章

  1. 通过JQuery的$.ajax()把 json 数据 post 给 PHP

    通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...

  2. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  3. Ajax提交数据后,清空form表单

    按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...

  4. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  5. jquery实现ajax,返回json数据

    jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...

  6. jquery插件-table转Json数据插件

    使 用开源插件Table-to-json: 官方地址:http://lightswitch05.github.io/table-to-json/ 功能说明:将js对象table转换成javascrip ...

  7. html、css/bootStrap、js/Jquery、ajax与json数据交互总结

    设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的flo ...

  8. Jquery请求Ajax的json数据

      获得单个json对象 $.getJSON("test.js", { name: "John", time: "2pm" }, funct ...

  9. 及时从数据库中取得数据填放进Form表单的多选框中

    #写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...

随机推荐

  1. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  2. 制作Visual Studio 2017 (VS 2017) 离线安装包

    史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...

  3. 非空与 jquery.each

    return :只能跳出each方法 ,无法跳出aaa() function aaa{ var result = false;            //非空            $("i ...

  4. jsp---jstl配置

    关于eclipse中jstl标准标签库的配置问题 我的eclipse的版本是:Version: Neon.3 Release (4.6.3) 用的1.8.0_121的jre,Tomcat用的9.0, ...

  5. 团队作业4——第一次项目冲刺 fOURth DaY

    项目冲刺--Quadra Kill 兄弟们,再坚持一下,再坚持一下,再给我一个头我就五杀了. 今天可谓是项目的一个转折点,因为跳转和数据库已经基本写好啦,鼓掌~[啪啪啪啪啪啪] 让我们来看看今天大家做 ...

  6. 团队作业8——第二次项目冲刺(Beta阶段)--第三天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 16% 201421123002 翁珊 16% 201421123004 ...

  7. 201521123073 《Java程序设计》第6周学习总结

    1. 本章学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 1.2 自己设计类时,一 ...

  8. 201521123111《Java程序设计》第3周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 1. 代码阅读 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private ...

  9. 201521123088《Java程序》第二周总结

    #1. 本章学习总结 ①java基本数据类型 ②String类对象使用 #2. 书面作业 使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析String使用什么来存储字符 ...

  10. 201521123080《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...