在升级版数据的收集和赋值。只针对上篇文章。
上篇文章的缺点在于需要传参数，而且参数的个数被限制，当页面的布局不符合参数是，上篇文章的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="width: 100%" name="data1" saveitemname/> </td> <td > <input type="text" style="width: 100%" name="data2" saveitemname/> </td> <td > <input type="text" style="width: 100%" name="data3"saveitemname /> </td> <td > <input type="text" style="width: 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();
}
还请不吝指教。
浙公网安备 33010602011771号