上篇文章的缺点在于需要传参数,而且参数的个数被限制,当页面的布局不符合参数是,上篇文章的js封装即为失败品。
下面是稍微升级版的1.1版本。通过自定义的属性来收集 参数,就破除了参数的设定,在页面布局的时候只需要录入一个固定的自定义属性即可。
我自己在项目中固定的属性为:表格外面需要获取的数据自定义属性为--savename,表格属性为--saveitem,表格内需要收集的自定义属性为--saveitemname
如果我有幸帮到您,您可自行更改
代码如下:
产品编号 | 产品名称 | 产品参数 | 操作 |
---|---|---|---|
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 = ""; if (content.find('tr').length > 1) { str += content.find('tr').eq(1)[0].innerHTML; } else { str += content.find('tr').eq(0)[0].innerHTML; } str += ""; content.append(str);}//删除指定行function trDelete(content) { var td = $(content); td.parents("tr").remove();}
还请不吝指教。