热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

优化升级版数据采集与赋值方法,专为前文内容设计

在前一篇文章中,方法的局限性主要体现在需要传递参数,并且参数数量受限。当页面布局与所需参数不匹配时,该方法将无法正常工作。为此,我们推出了优化升级版1.1,旨在解决这些问题并提高灵活性和适用性。

上篇文章的缺点在于需要传参数,而且参数的个数被限制,当页面的布局不符合参数是,上篇文章的js封装即为失败品。

下面是稍微升级版的1.1版本。通过自定义的属性来收集 参数,就破除了参数的设定,在页面布局的时候只需要录入一个固定的自定义属性即可。

我自己在项目中固定的属性为:表格外面需要获取的数据自定义属性为--savename,表格属性为--saveitem,表格内需要收集的自定义属性为--saveitemname

如果我有幸帮到您,您可自行更改

代码如下:

<div id&#61;"foot">
<div class&#61;"form-horizontal form-pd"><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">参数类型&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" name&#61;"ParameterID" savename placeholder&#61;"参数类型">div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">参数名称&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" name&#61;"ParameterName" savename placeholder&#61;"参数名称">div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">排序&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"number" class&#61;"form-control" name&#61;"Sort" savename>div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">备注&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" placeholder&#61;"备注" name&#61;"Remark" savename>div>div>
div>
div><table class&#61;"table table-bordered"id&#61;"tables" saveitem name&#61;"table1"><tr class&#61;"bg-cl"><th style&#61;"display: none">产品IDth><th>产品编号th><th>产品名称th><th>产品参数th><th>操作th>tr><tr><td style&#61;"display:none"><input type&#61;"hidden" style&#61;"width: 100%" name&#61;"data1" saveitemname/>td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data2" saveitemname/>td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data3"saveitemname />td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data4" saveitemname/>td><td style&#61;"text-align: center;" onclick&#61;"trDelete(this)"><button type&#61;"button" class&#61;"btn btn-xs btn-danger">删除button>td>tr>table><div><button type&#61;"button" class&#61;"btn btn-xs btn-primary" onclick&#61;"trAdd($(&#39;#tables&#39;))">添加button>div>


var jsons &#61; function () { };
jsons.prototype
&#61; {get: function () {return GetData();},set: function (json) {FillData(json);}
}
function GetData() {//所有的表格外的输入框&#xff0c;下拉框&#xff0c;单选&#xff0c;多选&#xff0c;富文本&#xff0c;必须强调属性savenamevar content &#61; $(&#39;*[savename]&#39;);var root &#61; CollectionInputData(content);//所有的表格内的数据必须给表格声明属性 saveitemvar tablejson &#61; [];var tablecontent &#61; $(&#39;*[saveitem]&#39;);for (var j &#61; 0; j ) {try {var tabledata &#61; new Array();var tables &#61; tablecontent.eq(j).find("tr");for (var i &#61; 0; i ) {var trDatas &#61; new Object();var tdData &#61; tables.eq(i).find(&#39;*[saveitemname]&#39;);if (tdData.length <1) continue;trDatas &#61; CollectionInputData(tdData);tabledata.push(trDatas);}tablejson[tablecontent.eq(j).attr("name")] &#61; tabledata;} catch (e) {alert("抱歉&#xff0c;攻城狮正在攻城&#xff01;");}}return $.extend(root, tablejson);
}
//收集指定容器内输入框的数据
function CollectionInputData(content) {var root &#61; new Object();try {for (var j &#61; 0; j ) {var myobject &#61; new Object();switch (content[j].type) {case "text":case "hidden":case "textarea":case "number":if (content[j].value !&#61; "" && content[j].value !&#61; undefined) {if (root[content[j].name]) {myobject[content[j].name] &#61; content[j].value;} else {root[content[j].name] &#61; content[j].value;}}break;case "radio":case "checkbox":root[content[j].name] &#61; content[j].checked ? 1 : 0;break;case "select-one":if (content[j].value !&#61; "" && content[j].value !&#61; undefined) {root[content[j].name] &#61; content[j].value;} else {root[content[j].name] &#61; -1;}break;default:break;}}return root;} catch (error) {alert("抱歉&#xff0c;攻城狮正在攻城&#xff01;");}return root;
}
function FillData(json) {var content &#61; $("*[savename]");Fill(content, json);var tablecontent &#61; $("*[saveitem]");for (var i &#61; 0; i ) {var tables &#61; tablecontent.eq(i);FillTableData(tables, json);}
}
// 指定位置容器赋值
function Fill(content, json) {for (var i &#61; 0; i ) {if (json[content[i].name]) {switch (content[i].type) {case "text":case "hidden":case "textarea":case "number":content[i].value &#61; json[content[i].name];break;case "radio":case "checkbox":content[i].checked &#61; json[content[i].name];case "select-one":content[i].value &#61; json[content[i].name];break;default:}//移除json中已经使用过的值// delete json[content[i].name];
}}
}
//填充表格数据
function FillTableData(content, json) {var tables &#61; content.find("tr");var tdData;switch (tables.length) {case 0:return;default:tdData &#61; tables.eq(0).find("*[saveitemname]");var i;if (tdData.length > 0) {for (i &#61; 0; i ) {trAdd(content);}//重新获取有几个trtables &#61; content.find("tr");for (i &#61; 0; i ) {//循环赋值tdData &#61; tables.eq(i).find("*[saveitemname]");Fill(tdData, json[content.attr("name")][i]);}} else {if (json[content.attr("name")] !&#61; "" && json[content.attr("name")] !&#61; undefined) {for (i &#61; 0; i ) {trAdd(content);}//重新获取有几个trtables &#61; content.find("tr");for (i &#61; 0; i ) {//循环赋值tdData &#61; tables.eq(i &#43; 1).find("*[saveitemname]");Fill(tdData, json[content.attr("name")][i]);}}}break;}
}
//增加表格行
function trAdd(content) {var str &#61; "";if (content.find(&#39;tr&#39;).length > 1) {str &#43;&#61; content.find(&#39;tr&#39;).eq(1)[0].innerHTML;} else {str &#43;&#61; content.find(&#39;tr&#39;).eq(0)[0].innerHTML;}str &#43;&#61; "";content.append(str);
}
//删除指定行
function trDelete(content) {var td &#61; $(content);td.parents("tr").remove();
}

View Code

还请不吝指教。

转:https://www.cnblogs.com/CnnBlog/p/9366207.html



推荐阅读
author-avatar
怪兽朴朴朴
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有