js實現動態表單方法

用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>

asp.net代碼

代碼如下

複製代碼

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>