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

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

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

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

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

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

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

主要扩展代码：

(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 = 0; 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 = 1, Name = "汉族" };
            Nationality n2 = new Nationality() { Code = 2, Name = "回族" };

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

            return Nation;
        }
        private Users GetUser()
        {
            Users users = new Users()
            {
                ID = 1,
                Email = "jackandmary@qq.com",
                Name = "jack",
                Pass = "123",
                Sex = 1,
                IsUse = false,
                NationType = 2
            };
            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个多小时，完成了一部分，以后再往更深层次优化吧，希望可以为一些新手朋友带来一点帮助！

源码下载