上篇文章的缺点在于需要传参数,而且参数的个数被限制,当页面的布局不符合参数是,上篇文章的js封装即为失败品。
下面是稍微升级版的1.1版本。通过自定义的属性来收集 参数,就破除了参数的设定,在页面布局的时候只需要录入一个固定的自定义属性即可。
我自己在项目中固定的属性为:表格外面需要获取的数据自定义属性为--savename,表格属性为--saveitem,表格内需要收集的自定义属性为--saveitemname
如果我有幸帮到您,您可自行更改
代码如下:
<div id="foot"> <div class="form-horizontal form-pd"> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">参数类型:</label> <div class="col-xs-9 "> <input type="text" class="form-control" name="ParameterID" savename placeholder="参数类型"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">参数名称:</label> <div class="col-xs-9 "> <input type="text" class="form-control" name="ParameterName" savename placeholder="参数名称"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">排序:</label> <div class="col-xs-9 "> <input type="number" class="form-control" name="Sort" savename> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">备注:</label> <div class="col-xs-9 "> <input type="text" class="form-control" placeholder="备注" name="Remark" savename> </div> </div> </div> </div> <table class="table table-bordered"id="tables" saveitem name="table1"> <tr class="bg-cl"> <th style="display: none">产品ID</th> <th>产品编号</th> <th>产品名称</th> <th>产品参数</th> <th>操作</th> </tr> <tr> <td style="display:none"> <input type="hidden" style=" 100%" name="data1" saveitemname/> </td> <td > <input type="text" style=" 100%" name="data2" saveitemname/> </td> <td > <input type="text" style=" 100%" name="data3"saveitemname /> </td> <td > <input type="text" style=" 100%" name="data4" saveitemname/> </td> <td style="text-align: center;" onclick="trDelete(this)"> <button type="button" class="btn btn-xs btn-danger">删除</button> </td> </tr> </table> <div> <button type="button" class="btn btn-xs btn-primary" onclick="trAdd($('#tables'))">添加</button> </div>
<script> var json = { ParameterID: "11", ParameterName: "222", Remark: "44", Sort: "33", table1: [{ data1: "10086", data2: "YD", data3: "中国移动",data4:"坑" }, { data1: "10010", data2: "LT", data3: "中国联通", data4: "蒙" }, { data1: "10000", data2: "DX", data3: "中国电信", data4: "拐" } ] } $(function () { var json1 = new jsons(); json1.set(json); $("#test").click(function () { var root = GetData(); console.log(root); }); }); </script> var jsons = function () { }; jsons.prototype = { get: function () { return GetData(); }, set: function (json) { FillData(json); } } function GetData() { //所有的表格外的输入框,下拉框,单选,多选,富文本,必须强调属性savename var content = $('*[savename]'); var root = CollectionInputData(content); //所有的表格内的数据必须给表格声明属性 saveitem var tablejson = []; var tablecontent = $('*[saveitem]'); for (var j = 0; j < tablecontent.length; j++) { try { var tabledata = new Array(); var tables = tablecontent.eq(j).find("tr"); for (var i = 0; i < tables.length; i++) { var trDatas = new Object(); var tdData = tables.eq(i).find('*[saveitemname]'); if (tdData.length < 1) continue; trDatas = CollectionInputData(tdData); tabledata.push(trDatas); } tablejson[tablecontent.eq(j).attr("name")] = tabledata; } catch (e) { alert("抱歉,攻城狮正在攻城!"); } } return $.extend(root, tablejson); } //收集指定容器内输入框的数据 function CollectionInputData(content) { var root = new Object(); try { for (var j = 0; j < content.length; j++) { var myobject = new Object(); switch (content[j].type) { case "text": case "hidden": case "textarea": case "number": if (content[j].value != "" && content[j].value != undefined) { if (root[content[j].name]) { myobject[content[j].name] = content[j].value; } else { root[content[j].name] = content[j].value; } } break; case "radio": case "checkbox": root[content[j].name] = content[j].checked ? 1 : 0; break; case "select-one": if (content[j].value != "" && content[j].value != undefined) { root[content[j].name] = content[j].value; } else { root[content[j].name] = -1; } break; default: break; } } return root; } catch (error) { alert("抱歉,攻城狮正在攻城!"); } return root; } function FillData(json) { var content = $("*[savename]"); Fill(content, json); var tablecontent = $("*[saveitem]"); for (var i = 0; i < tablecontent.length; i++) { var tables = tablecontent.eq(i); FillTableData(tables, json); } } // 指定位置容器赋值 function Fill(content, json) { for (var i = 0; i < content.length; i++) { if (json[content[i].name]) { switch (content[i].type) { case "text": case "hidden": case "textarea": case "number": content[i].value = json[content[i].name]; break; case "radio": case "checkbox": content[i].checked = json[content[i].name]; case "select-one": content[i].value = json[content[i].name]; break; default: } //移除json中已经使用过的值 // delete json[content[i].name]; } } } //填充表格数据 function FillTableData(content, json) { var tables = content.find("tr"); var tdData; switch (tables.length) { case 0: return; default: tdData = tables.eq(0).find("*[saveitemname]"); var i; if (tdData.length > 0) { for (i = 0; i < json[content.attr("name")].length - tables.length; i++) { trAdd(content); } //重新获取有几个tr tables = content.find("tr"); for (i = 0; i < json[content.attr("name")].length; i++) { //循环赋值 tdData = tables.eq(i).find("*[saveitemname]"); Fill(tdData, json[content.attr("name")][i]); } } else { if (json[content.attr("name")] != "" && json[content.attr("name")] != undefined) { for (i = 0; i < json[content.attr("name")].length - (tables.length - 1) ; i++) { trAdd(content); } //重新获取有几个tr tables = content.find("tr"); for (i = 0; i < json[content.attr("name")].length; i++) { //循环赋值 tdData = tables.eq(i + 1).find("*[saveitemname]"); Fill(tdData, json[content.attr("name")][i]); } } } break; } } //增加表格行 function trAdd(content) { var str = "<tr>"; if (content.find('tr').length > 1) { str += content.find('tr').eq(1)[0].innerHTML; } else { str += content.find('tr').eq(0)[0].innerHTML; } str += "</tr>"; content.append(str); } //删除指定行 function trDelete(content) { var td = $(content); td.parents("tr").remove(); }
还请不吝指教。