经常遇到一些项目，需要在数据库某些表中增加一些字段；但是这些字段既不用于查询，也不用于统计，仅仅用于显示。这样一来，每次更改就需要改动许多地方，显得非常繁琐。
比较流行的动态表单/智能表单，都是很好的解决方案，但用在这里显得大材小用，有些浪费了。
所以特地用javascript实现一种比较简便的方法，对于所有仅用于显示的表单元素，取得它们的值，以”key=value,key=value”形式存储到数据库中，数据库中仅需要一个text字段即可；在修改时，从数据库取得这些值，再根据key给相应的元素赋值。
主要使用data-skey的自定义属性作为key，支持select、textarea及input type为text、radio、checkbox的表单元素。
具体实现如下：
function dynamicForm(container) { this.container = typeof (container) === 'string' ? document.getElementById(container) : container; } dynamicForm.prototype = { _keyValueSplitter: '=', _itemSplitter: ',', _attrKey: 'data-skey', _chkTypes: ['checkbox', 'radio'], _isInType: function (a, el) { var etype = el.type.toLowerCase(); var i = a.length; while (i--) { if (a[i] === etype) { return true; } } return false; }, _addElement: function (array, tag, types) { var el, nodes = this.container.getElementsByTagName(tag); for (var i = 0, l = nodes.length; i < l; i++) { el = nodes[i]; if (!types || (types && this._isInType(types, el))) { array.push(el); } } }, _getElements: function () { var ret = []; this._addElement(ret, 'input', ['text'].concat(this._chkTypes)); this._addElement(ret, 'textarea'); this._addElement(ret, 'select'); return ret; }, /*获取所有元素的值*/ getValues: function () { var elArray = this._getElements(), ret = [], el, key, isChk; for (var i = 0, l = elArray.length; i < l; i++) { el = elArray[i]; key = el.getAttribute(this._attrKey); if (key) { isChk = this._isInType(this._chkTypes, el); if ((!isChk && el.value) || (isChk && el.checked)) ret.push(key + this._keyValueSplitter + encodeURIComponent(el.value)); } } return ret.join(this._itemSplitter); }, _setValues: function (val, elArray, callback) { if (!(val || val.length)) return; var elen = elArray.length, valArray = val.split(this._itemSplitter), keyValue; for (var i = 0, l = valArray.length; i < l; i++) { keyValue = valArray[i].split(this._keyValueSplitter); callback.call(this, elArray, elen, keyValue); } }, /*为所有元素赋值(可用于修改页面)*/ setValues: function (val) { if (!(val || val.length)) return; this._setValues(val, this._getElements(), this._setElementValue); }, _setElementValue: function (elArray, elen, keyValue) { var el, key = keyValue[0], val = decodeURIComponent(keyValue[1]), hasSet; for (var i = 0; i < elen; i++) { el = elArray[i]; if (el.getAttribute(this._attrKey) == key) { if (this._isInType(this._chkTypes, el)) { if (val == el.value) hasSet = el.checked = true; } else if (val) { el.value = val; hasSet = true; } if (hasSet) { elArray.splice(i, 1); break; } } } }, /*用于显示到页面(只读)*/ showTo: function (val, tag) { if (!(val || val.length)) return; var ret = []; this._addElement(ret, tag); this._setValues(val, ret, this._showToElement); }, _showToElement: function (elArray, elen, keyValue) { var el, key = keyValue[0], val = decodeURIComponent(keyValue[1]), hasSet; for (var i = 0; i < elen; i++) { el = elArray[i]; if (el.getAttribute(this._attrKey) == key) { el.innerHTML = val; elArray.splice(i, 1); break; } } } }; 相关的测试代码：
<!DOCTYPE HTML> <html> <head> <title></title> <script src="dynamicForm-compiled.js"></script> <script> function saveData() { var f = new dynamicForm('form-wrapper'); document.getElementById('hf1').value = f.getValues(); } function restoreData() { var f = new dynamicForm('form-wrapper'); f.setValues(document.getElementById('hf1').value); } function showData() { var f = new dynamicForm('view-wrapper'); f.showTo(document.getElementById('hf1').value, 'span'); } </script> </head> <body> <form id="form1" runat="server"> <div id="form-wrapper"> <asp:Literal runat="server" ID="view1" /> </div> <asp:HiddenField ID="hf1" runat="server" /> <asp:Button ID="B1" runat="server" Text="提交" onclick="B1_Click" OnClientClick="saveData()" /> <input type="button" value="还原表单" onclick="restoreData()" /> <hr /> <div id="view-wrapper"> <asp:Literal runat="server" ID="view2" /> </div> </form> </body> </html> 后台代码：
public partial class test_Default : Page { protected override void OnLoad(EventArgs e) { view1.Text = File.ReadAllText(Server.MapPath("template-form.html")); base.OnLoad(e); } protected void B1_Click(object sender, EventArgs e) { view2.Text = File.ReadAllText(Server.MapPath("template-view.html")); ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), "showData();", true); } } 用于添加修改数据的模板：
姓名：<input type="text" data-skey="name" /> <br /> 性别： <input type="radio" name="rdo_group1" value="男" data-skey="gender" />男 <input type="radio" name="rdo_group1" value="女" data-skey="gender" />女 <br /> 谁可以看到： <select data-skey="see"> <option value="">请选择</option> <option value="任何人">任何人</option> <option value="仅好友">仅好友</option> <option value="保密">保密</option> </select> <br /> 自我介绍： <textarea data-skey="intro"></textarea>
用于显示数据的模板：
姓名：<span data-skey="name"></span> <br /> 性别： <span data-skey="gender"></span> <br /> 谁可以看到： <span data-skey="see"></span> <br /> 自我介绍： <span data-skey="intro"></span>
代码下载：点击下载
