一款jquery小插件：实现轻松获取和绑定编辑表单的值（带源码）

实现目的：通常在项目中，编辑页面在前后台需要一个一个框赋值，取值操作，小伙伴们普遍都会感觉繁琐，麻烦.；

实现思路：利用json对象化键值的思想；

好处：方便快速开发，提高开发效率，减少重复性代码；

缺点：还不完善，只支持文本框，复选框，下拉框几种控件；

根本原因：纯粹是为了学习与交流；

示例：只要传一个对象即可获得和给下面的控件赋值；

aaarticlea/png;base64,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" alt="" />

主要扩展代码：

(function ($) {
    $.fn.setValues = function (options) {
        var obj = JSON.parse(options);
        $("input[type='text'][datakey]").each(function () {
            $this = $(this);
            $this.val(obj[$this.attr("datakey")]);
        });
        $("input[type='checkbox'][datakey]").each(function () {
            $this = $(this);
            $this.attr("checked", obj[$this.attr("datakey")]);
        });
        $("select[datakey]").each(function () {
            $this = $(this);
            $nationtype = obj[$this.attr("datakey")];
            var str = "";
            $this.find("option[value='" + $nationtype + "']").attr("selected", true);
        });
    }
    $.fn.getValues = function () {
        var objValues = new Object();
        $("input[type='text'][datakey]").each(function () {
            $this = $(this);
            objValues[$this.attr("datakey")] = $this.val();
        });
        $("input[type='checkbox'][datakey]").each(function () {
            $this = $(this);
            objValues[$this.attr("datakey")] = $this.attr("checked") == "checked" ? true : false;
        });
        return JSON.stringify(objValues);
    }
})(jQuery);

测试页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="FormEditor.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>FormEditor.Demo</title>
    <script src="Scripts/ajaxhelper.js"></script>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/formEditor.js"></script>
    <script>
        $(document).ready(function () {
            ajaxmethod('Handler/UsersHandler.ashx?actiontype=getnations', function (data) {
                var $obj = JSON.parse(data);
                $("select[datakey]").each(function () {
                    $this = $(this);
                    var str = "";
                    for (var i = ; i < $obj.length; i++) {
                        $objson = $obj[i];
                        str += "<option value='" + $objson["Code"] + "'>" + $objson["Name"] + "</option>";
                    }
                    $this.append(str);
                });
                ajaxmethod("Handler/UsersHandler.ashx?actiontype=getusers", function (data) {
                    //通过插件方法赋值-参数为json对象
                    $(this).setValues(data);
                });
            });
            //通过插件方法取值-获得的结果为json对象
            //getValues();
        });
        function getValues() {
            return alert($(this).getValues());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="formeditor">
            用户名：<input id="Text1" type="text" datakey="Name" /><br />
            <br />
            &nbsp; 密码：<input id="Text2" type="text" datakey="Pass" /><br />
            <br />
            &nbsp; 邮箱：<input id="Text3" type="text" datakey="Email" /><br />
            <br />
            &nbsp; 启用：<input id="Text4" type="checkbox" datakey="IsUse" /><br />
            民族：<select id="sel1" datakey="NationType"></select>
            <%-- &nbsp; 性别：<input id="Radio1" type="radio" datakey="rdoMale" />男
            <input id="Radio2" type="radio" datakey="rdoFeMale" />女<br />--%>
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;
        <input id="btnSave" type="button" value="保存" /><br />
        </div>
    </form>
</body>
</html>

Hanlder.ashx 文件代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace FormEditor.Handler
{
    /// <summary>
    /// UsersHandler 的摘要说明
    /// </summary>
    public class UsersHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string actiontype = context.Request.QueryString["actiontype"];
            switch (actiontype)
            {
                case "getusers":
                    context.Response.Write(JsonConvert.SerializeObject(GetUser()));
                    break;
                case "getnations":
                    context.Response.Write(JsonConvert.SerializeObject(GetNations()));
                    break;
                default:
                    break;
            }
        }
        private List<Nationality> GetNations()
        {
            List<Nationality> Nation = new List<Nationality>();
            Nationality n1 = new Nationality() { Code = , Name = "汉族" };
            Nationality n2 = new Nationality() { Code = , Name = "回族" };

            Nation.Add(n1);
            Nation.Add(n2);

            return Nation;
        }
        private Users GetUser()
        {
            Users users = new Users()
            {
                ID = ,
                Email = "jackandmary@qq.com",
                Name = "jack",
                Pass = "",
                Sex = ,
                IsUse = false,
                NationType =
            };
            return users;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

实体类代码：

public class Users
    {
        public Users() { }
        public int ID { get; set; }
        public string Name { get; set; }
        public string Pass { get; set; }
        public int Sex { get; set; }
        public string Email { get; set; }
        public bool IsUse { get; set; }
        public int NationType { get; set; }
    }

    public class Nationality
    {
        public int Code { get; set; }
        public string Name { get; set; }
    }

说明：暂时就多说了。

PS：楼主技术积累比较浅，但是一直保持着浓厚的兴趣，现在纠结的是对jquery的源码基本不懂，想要研究却不知道从哪里下手，再摸索。

这个功能很简单，但是楼主还是从0点开始到现在花了4个多小时，完成了一部分，以后再往更深层次优化吧，希望可以为一些新手朋友带来一点帮助！

源码下载