正文

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

IP云
IP云V管理员/2 阅读
09/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

实现思路：利用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个多小时，完成了一部分，以后再往更深层次优化吧，希望可以为一些新手朋友带来一点帮助！

源码下载