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



推荐阅读
  • 利用HTML5 Canvas高效构建电信网络拓扑图
    电信网络拓扑图在实际应用中具有很高的实用价值。本文介绍了一个基于HTML5 Canvas的电信网络拓扑图项目,不仅实现了基本的图形展示功能,还加入了自动布局和属性栏功能,使项目更加完善。此Demo经过细微调整即可直接应用于实际项目中。 ... [详细]
  • DataList内容详解
    DataList是另一种显示数据控件,它与GridView不同的是,它全部使用模板进行设计,并且DataList的模板是对整行设置 ... [详细]
  • 深入探讨jQuery中的事件处理、动画效果及表单操作
    本文详细介绍了jQuery这一流行的JavaScript库在事件处理、动画效果实现以及表单操作方面的应用。通过具体的示例和代码片段,帮助开发者更好地理解和运用jQuery的强大功能。 ... [详细]
  • 优化 DropDownList 与 TextBox 的交互体验
    本文介绍了一种解决方案,通过在 DropDownList 前添加一个 TextBox 来提升用户体验。当选项过多时,用户可以通过在 TextBox 中输入关键词来快速定位并选择相应的选项。 ... [详细]
  • css 网站页面内容占位加载动画效果的实现
    阅读目录阐述index.htmlindex.jsindex.css阐述内容占位动画效果,这个也是我们经常在一些网站上看到的效果,这种效果的设计 ... [详细]
  • Docker基础指南:快速入门与实践
    Docker自发布以来便受到广泛欢迎,其提供的容器化技术极大地简化了软件开发和部署流程。本文旨在帮助初学者快速掌握Docker的基本操作,包括安装、运行容器、创建和管理镜像等内容,以激发大家对Docker的兴趣。 ... [详细]
  • Flex 截图 实例 ... [详细]
  • 本文介绍了基于Java的汽车租赁系统开发,涵盖了从车辆采购预算到车辆维护的全过程管理。该系统利用现代互联网技术和数据库技术,实现了汽车租赁行业的全面信息化。 ... [详细]
  • 本文详细介绍了如何使用 Element UI 的 Cascader 组件来实现省、市、区数据的动态加载。主要通过地址传递和递归函数来动态更新选项列表。 ... [详细]
  • 本文详细探讨了如何在 SparkSQL 中创建 DataFrame,涵盖了从基本概念到具体实践的各种方法。作为持续学习的一部分,本文将持续更新以提供最新信息。 ... [详细]
  • 本文详细介绍了如何通过微信H5网页授权机制获取用户的code,并进一步获取用户的基本信息,包括必要的配置步骤和前端代码实现。 ... [详细]
  • Java集合框架源码解读(1)——ArrayList、LinkedList和Vector
    java.util.List接口是JavaCollectionsFramework的一个重要组成部分,List接口的架构图如下:本文将通过剖析List接 ... [详细]
  • 本文探讨了在Git子模块目录中运行pre-commit时遇到的错误,并提供了一种通过Docker环境解决此问题的方法。 ... [详细]
  • 本文介绍了如何通过Java语言结合嵌入式Jetty服务器来提供静态文件服务,包括Gradle构建配置和核心代码实现。 ... [详细]
  • SaaS定价策略:数学建模与商业交易重构
    本文探讨了如何通过数学建模来优化SaaS产品的定价策略,并详细介绍了将传统应用转化为云应用时,所需进行的业务功能和架构层面的调整。 ... [详细]
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社区 版权所有