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



推荐阅读
  • iOS开发中MVC架构模式的深入解析(第一部分)
    在iOS开发中,MVC架构模式是常用的设计模式之一。本文将深入解析MVC架构的第一部分,重点介绍View组件。View组件继承自UIView,主要负责内容的展示(如UILabel等视图类)和用户输入的处理(如UIButton等控件类)。通过详细的代码示例和实际应用,帮助开发者更好地理解和掌握View在MVC架构中的作用和实现方式。 ... [详细]
  • 深入解析 Android 选择器与形状绘制技术
    本文深入探讨了 Android 中选择器(Selector)与形状绘制(Shape Drawing)技术的应用与实现。重点分析了 `Selector` 的 `item` 元素,其中包括 `android:drawable` 属性的使用方法及其在不同状态下的表现。此外,还详细介绍了如何通过 XML 定义复杂的形状和渐变效果,以提升 UI 设计的灵活性和美观性。 ... [详细]
  • C#中实现高效UDP数据传输技术
    C#中实现高效UDP数据传输技术 ... [详细]
  • 深入解析 Vue 中通过 $route.params 实现参数传递的方法与技巧
    本文深入探讨了在 Vue 框架中利用 `$route.params` 进行参数传递的方法和技巧。通过详细解析 `$route.params` 的工作机制及其与 `$route.query` 的区别,帮助开发者更好地理解和应用这一功能。文章不仅涵盖了基本的使用方法,还提供了实际案例和最佳实践,以便读者能够灵活运用这些技术,提升开发效率和代码质量。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 本文提供了在Windows系统上部署和启动MySQL免安装版本的详细步骤。首先,从MySQL官方网站下载社区版免安装包(https://dev.mysql.com/downloads/mysql/8.0.html),将其解压至指定目录,例如D:\tools\mysql。接着,配置系统环境变量,确保MySQL命令行工具可以在任意路径下使用。此外,还需创建并配置my.ini文件以设置MySQL的基本参数,确保数据库服务能够顺利启动和运行。 ... [详细]
  • 在探讨C语言编程文本编辑器的最佳选择与专业推荐时,本文将引导读者构建一个基础的文本编辑器程序。该程序不仅能够打开并显示文本文件的内容及其路径,还集成了菜单和工具栏功能,为用户提供更加便捷的操作体验。通过本案例的学习,读者可以深入了解文本编辑器的核心实现机制。 ... [详细]
  • 深入解析JavaScript中的函数防抖与节流技术及其应用场景
    本文深入探讨了JavaScript中函数防抖和节流技术的原理及应用场景。通过详细的示例代码,全面解析了这两种优化方法在实际开发中的重要作用,为开发者提供了宝贵的参考和实践指导。 ... [详细]
  • 在数据仓库管理中,定时更新程序与查询SQL之间的冲突常常导致性能瓶颈和阻塞问题。为了解决这些问题,通常需要对SQL Server进行详细的性能诊断。常用的诊断工具包括系统动态管理视图(DMVs)和扩展事件(Extended Events),这些工具能够帮助识别和分析性能瓶颈的具体原因,从而采取有效的优化措施。 ... [详细]
  • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
  • 本文详细介绍了如何在 Grafana 中独立于 Alertmanager 配置邮件和微信告警。具体步骤包括配置 SMTP 服务器以实现邮件告警,以及设置微信告警的集成方式。通过这些配置,用户可以更灵活地管理和接收来自 Grafana 的告警通知,确保及时响应系统异常。文章还提供了详细的配置示例和常见问题的解决方案,帮助用户顺利完成设置。 ... [详细]
  • 本文深入探讨了 MXOTDLL.dll 在 C# 环境中的应用与优化策略。针对近期公司从某生物技术供应商采购的指纹识别设备,该设备提供的 DLL 文件是用 C 语言编写的。为了更好地集成到现有的 C# 系统中,我们对原生的 C 语言 DLL 进行了封装,并利用 C# 的互操作性功能实现了高效调用。此外,文章还详细分析了在实际应用中可能遇到的性能瓶颈,并提出了一系列优化措施,以确保系统的稳定性和高效运行。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
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社区 版权所有