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


    <!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>


  • 相关阅读:
    Java基础语法
    Struts2--带参数的结果集
    Struts2--Dynamic Result动态结果集
    Struts2--Global Result全局结果集
    Struts2--Result类型
    Struts2--默认Action
    Struts2--模块包含
    Struts2--访问web元素
    puppeteer 填充基础表单
    animejs 动画库
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234043.html
Copyright © 2020-2023  润新知