热门标签 | 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



推荐阅读
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 本文介绍如何使用Objective-C结合dispatch库进行并发编程,以提高素数计数任务的效率。通过对比纯C代码与引入并发机制后的代码,展示dispatch库的强大功能。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • 在 Swift 编程中,遇到错误提示“一元运算符 '!' 不能应用于 '()' 类型的操作数”,通常是因为尝试对没有返回值的方法或函数应用逻辑非运算符。本文将详细解释该错误的原因,并提供解决方案。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
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社区 版权所有