Jquery實現數據雙向綁定（賦值和取值），相似AngularJS

時間 2019-11-29
標籤 jquery 實現數據雙向綁定賦值取值相似 angularjs 欄目 JQuery 简体版
原文原文鏈接
<!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>