文档章节

Jquery实现数据双向绑定(赋值和取值),类似AngularJS

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 453
阅读 38
收藏 0
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Jquery实现数据双向绑定(赋值和取值)</title>
    <link href="~/Css/css.css" rel="stylesheet" />
    <script src="~/Js/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var objData = {
                'id': 1,
                'name': '张三',
                'area': 'futian',
                'sex': 'male',
                'hobby': 'music,movie',
                'intro': '你好,世界'
            };
            //将数据加载到表单中
            $.mloadData(objData);
            //读取表单中的数据 提交
            $("#btnSave").click(function () {
                var data = $.mSaveData(objData); 
                console.log(data);
            });
        });


        /*
        *双向数据绑定(赋值)
        *param objData 源对象
        *return
        */
        $.mloadData = function (objData) {
            var obj = objData;
            var key, value, tagName, type, arr;
            for (x in obj) {
                key = x;
                value = obj[x];
                $("[name='" + key + "']").each(function () {
                    tagName = $(this)[0].tagName;
                    type = $(this).attr('type');
                    if (tagName == 'INPUT') {
                        if (type == 'radio') {
                            $(this).attr('checked', $(this).val() == value);
                        } else if (type == 'checkbox') {
                            arr = value.split(',');
                            for (var i = 0; i < arr.length; i++) {
                                if ($(this).val() == arr[i]) {
                                    $(this).attr('checked', true);
                                    break;
                                }
                            }
                        } else {
                            $(this).val(value);
                        }
                    } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
                        $(this).val(value);
                    }
                });
            }
        };

        /*
        *双向数据绑定(取值)
        *param objData 源对象
        *return
        */
        $.mSaveData = function (objData) {
            var tagName, type;
            for (x in objData) {
                $("[name='" + x + "']").each(function () {
                    tagName = $(this)[0].tagName;
                    type = $(this).attr('type');
                    if (tagName == 'INPUT') {
                        if (type == 'radio') {
                            objData[x] = $("input[name='" + x + "']:checked").attr("value");
                        } else if (type == 'checkbox') {
                            var checkValue = [];
                            $("input[name='" + x + "']:checked").each(function () {
                                checkValue.push($(this).val());
                            });
                            objData[x] = checkValue.join(",");
                        } else {
                            objData[x] = $(this).val();
                        }
                    } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
                        objData[x] = $(this).val();
                    }
                });
            }
            return objData;
        };
    </script>
</head>
<body>
    <div>
        <form id="myform" method="post" action="">
            <fieldset>
                <legend>jquery数据双向绑定</legend>
                <table>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <input type="hidden" name="id" />
                            <input type="text" name="name" />
                        </td>
                    </tr>

                    <tr>
                        <td>地区</td>
                        <td>
                            <select name="area">
                                <option value="futian">福田区</option>
                                <option value="nanshan">南山区</option>
                                <option value="luohu">罗湖区</option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td>性别</td>
                        <td>
                            <input type="radio" name="sex" value="male" />男
                            <input type="radio" name="sex" value="female" />女
                        </td>
                    </tr>

                    <tr>
                        <td>爱好</td>
                        <td>
                            <input type="checkbox" name="hobby" value="movie" />电影
                            <input type="checkbox" name="hobby" value="music" />音乐
                            <input type="checkbox" name="hobby" value="basketball" />篮球
                        </td>
                    </tr>

                    <tr>
                        <td>简介</td>
                        <td>
                            <textarea name="intro"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center;">
                            <input id="btnSave" type="button" value="提交" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</body>
</html>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/53336944

共有 人打赏支持
深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
什么时候 AngularJS 会超越 jQuery

web 新手常问的一个问题是“我应该使用哪个框架?”但这个问题却没有‘正确’的答案,通常主要讨论的是 AngularJS 和 jQuery的区别。但它们间的比较在某些方面就像是在比较苹果和橘子的区别,...

oschina
2015/02/17
16.5K
47
AngularJS 提交表单的方式

在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表...

oschina
2014/06/21
59.2K
17
StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维

【编辑注】本文来自StackOverFlow上How do I “think in AngularJS” if I have a jQuery background?一题中得票最高的回答。该回答得票超过3000次,回答者Josh David Miller是活跃于开源社区...

玛雅牛
2014/01/04
0
0
AngularJS 2014-10-22

前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分:基本概念和...

jayronwang
2014/10/22
0
0
【MVVM】- AngularJS基础学习

Angular JS ---- AngularJS 基础入门案例 外观页面 AngularJS 模块 模块是应用控制器的容器,Angularjs代码依赖Jquery,在使用angualrjs代码时,Jquery脚本文件须在AngularJS脚本之前加载,此...

ZeroneLove
02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring学习记录

Java类定义配置 @Configuration //标记为配置类@ComponentScan //标记为扫描当前包及子包所有标记为@Component的类@ComponentScan(basePackageClasses = {接口.class,...}) //标记为扫描当...

CHONGCHEN
今天
1
0
如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
3
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
4
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
4
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部