CN109284488B - 基于本地存储修改前端表格列数据的方法、装置及介质 - Google Patents

Abstract

本发明公开了一种基于本地存储修改前端表格列数据的方法，包括：将服务器端的第一表格的第一表头数据存储至本地存储；根据本地存储中的第一表头数据获取第二表头数据；在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格，第二表格所具有的表头数据为第二表头数据；本申请实施例还提供一种基于本地存储修改前端表格列数据的装置、网络设备及存储介质；通过在本地存储中存储和修改服务器端表格的表头数据，来控制浏览器显示的表格的列的数据，包括列顺序与需要显示的列，本地存储可以是localstorage，利用localstorage生命周期是永久的特性，使得每个用户浏览器中的表格个性化显示，除用户主动操作以外不会被删去，提供了更好的用户体验。

Description

基于本地存储修改前端表格列数据的方法、装置及介质

技术领域

本发明涉及通信领域，具体涉及一种基于本地存储修改前端表格列数据的方法、装置及介质。

背景技术

超级文本标记语言(hypertext markup language,HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言,通过结合使用其他的Web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。因而，超级文本标记语言是万维网(world wide web)编程的基础。在5.0版本的超级文本标记语言(HTML5)中，加入了新的特性：本地存储(localstorage)，这个特性主要是用来作为本地存储来使用的。生命周期是永久，这意味着除非用户在浏览器提供的用户界面(user interface，UI)上清除localstorage信息，否则这些信息将永远存在，存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存，不参与和服务器的通信。

在客户端中，前端表格插件(bootstrap table)是一款基于前端(bootstrap)的极快瑞(jQuery)表格插件，通过简单的设置，就可以在客户端显示的表格中拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤等功能。方便用户使用的同时，也暴露出新的需求：有些用户在查看表格时因使用习惯等问题想将列的顺序调整，将自己关注的列移到前面显示，对自己不需要的列隐去显示，对于这两种操作目前的表格插件无法很好的支持。

因此，现有技术中存在的上述技术问题还有待于改进和发展。

发明内容

本发明实施例提供一种基于本地存储修改前端表格列数据的方法、装置及介质，能够通过本地存储对前端表格插件中的表头数据进行编辑，从而按照用户的个性化需求修改前端表格的列顺序。

有鉴于此，本申请第一方面提供一种基于本地存储修改前端表格列数据的方法，该方法包括：将服务器端的第一表格的第一表头数据存储至本地存储；其中，该本地储存可以为localstorage或cookie；根据该本地存储中的该第一表头数据获取第二表头数据；其中，该第一表头数据与所述第二表头数据不相同，可以是列顺序不同，也可以是列数量不同，也可以是列顺序与列数量均不相同；在该本地存储中将该第一表头数据替换为该第二表头数据，生成该本地存储中的第二表格，该第二表格所具有的表头数据为该第二表头数据。由以上第一方面可见，本地存储获取服务器端的第一表头数据，在本地存储一端对第一表头数据进行修改，例如按照用户的个性化需求调整列顺序或隐藏不需要的列，得到第二表头数据，在本地浏览器流量网页表格时，通过本地存储将第一表头数据替换为第二表头数据，得到用户个性化定制的第二表格，方便了用户使用，且当本地存储为localstorage时，在本地存储中生命周期是永久，下次使用可直接显示用户定义好的列顺序，提升用户体验。

结合以上第一方面，在第一种可能的实现方式中，该将服务器端的第一表格的第一表头数据存储至本地存储，包括：通过该本地存储获取该服务器端的该第一表格的第一表头数据；根据该第一表头数据获取到该第一表头数据的字符串；其中，该获取的方式可以为：根据前端表格显示的列头内容复制数据为字符串；将该字符串存储至该本地存储；其中，当本地储存为localstorage时，该存储步骤可以通过对象简谱(javascript objectnotation，JS)语言进行操作，具体通过localstorage.setItem()方法，将该字符串储存至localstorage；该根据该本地存储中的该第一表头数据获取第二表头数据，包括：获取该本地存储中存储的该字符串；其中，当本地储存为localstorage时，可以使用JS语言中提供的localstorage.getItem()方法获取所述字符串；根据该字符串获取第一本地数据；当本地储存为localstorage时，可以使用JS语言中提供的JSON.parse()方法实现转化，将该字符串转化为第一本地数据，该第一本地数据可以为对象类型数据headData；根据该第一本地数据获取名称前面加输入框的页面配置项，该输入框用于输入列的序号；其中，该获取步骤可以为解析步骤；在该页面配置项中配置列的序号，根据该序号获取第二本地数据；其中，该获取步骤可以为：按该序号将数据重新生成第二本地数据，其中，该第二本地数据可以为head data格式数据new head data，将该第二本地数据在该本地存储中存储为第二表头数据；其中，当本地储存为localstorage时，可以使用JS语言中提供的localstorage.setItem()方法将该第二表头数据存储至localstorage。由以上第一方面第一种可能的实现方式可见，当本地存储为localstorage时，通过JS语言在本地进行操作，实现将服务器端第一表格中的第一表头数据储存在本地并转化为第二表头数据的工作过程，JS语言是当前主流的浏览器操作语言，能够快捷地对localstorage进行操作。

结合以上第一方面第一种可能的实现方式，在第二种可能的实现方式中，该在本地存储中将该第一表头数据替换为该第二表头数据，生成本地存储中的第二表格之前，还包括：获取该本地存储中的表头数据；若本地存储中不存在该第一表头数据和该第二表头数据，则返回执行该将服务器端的第一表格的第一表头数据存储至本地存储的步骤；若获取到该本地存储中存储有该第一表头数据，且未存储有该第二表头数据，则触发执行根据该本地存储中的该第一表头数据获取第二表头数据的步骤；若获取到该本地存储中存储有该第二表头数据，则触发执行该在本地存储中将该第一表头数据替换为该第二表头数据，生成本地存储中的第二表格的步骤。由以上第二种可能的实现方式可见，在每次开启浏览器中的表格时，首先执行该获取本地存储中的表头数据的步骤，若用户事先已经调整过列顺序，则本地存储中会存储有第二表头数据，此时即可直接调用该第二表头数据替换服务器端表格的第一表头数据，使用户预设好的列顺序在下一次开启浏览器时仍然能够得到个性化显示；若本地存储中没有表头数据，说明用户先前没有对列顺序进行预设，可重新设置列顺序，以得到个性化的显示。

结合以上第一方面第一种可能的实现方式，在第三种可能的实现方式中，该根据该第一本地数据获取名称前面加输入框的页面配置项，还包括：根据该第一本地数据获取名称前面加复选框的子页面配置项，该复选框用于勾选是否显示目标列，该目标列为该第一表格中的一列，若勾选则显示该目标列，反之则不显示该目标列；其中，当使用JS语言对该第一本地数据进行编程时，可以通过checkbox命令实现上述操作；该在该页面配置项中配置列的序号，根据该序号获取第二本地数据，还包括：在该子页面配置项中配置勾选项，该勾选项用于在该复选框中勾选该第一表格中需要显示的列，按该勾选项将数据生成到该第二本地数据中；其中，当使用JS语言对该第一本地数据进行编程时，可以通过在checkbox中勾选来完成勾选项的配置。由以上第三种可能的实现方式可见，通过在页面配置项的基础上加入子页面配置项，之后在子页面配置项中配置复选框，供用户进行勾选操作，以选择需要对哪些列进行显示，哪些列进行隐藏，从而使得用户在对表格中的列进行编辑的过程中，不仅仅可以调整列的顺序，还可以选择对哪些列进行显示，对哪些列进行隐藏，从而对表格中列的调整实现更丰富的个性化操作。

本申请第二方面提供一种基于本地存储修改前端表格列数据的装置，该装置具有实现上述第一方面或第一方面任意一种可能实现方式的方法的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。

本申请第三方面提供一种网络设备，包括：处理器和存储器；该存储器用于存储计算机执行指令，当该客户端运行时，该处理器执行该存储器存储的该计算机执行指令，以使该客户端执行如上述第一方面或第一方面任意一种可能实现方式的基于本地存储修改前端表格列数据的方法。

本申请第四方面提供一种计算机可读存储介质，包括指令，当该指令在计算机设备上运行时，使得该计算机设备执行如上述第一方面或第一方面任意一种可能实现方式的基于本地存储修改前端表格列数据的方法。

从以上技术方案可以看出，本申请实施例具有以下优点：

本发明实施例中，提出了一种基于本地存储修改前端表格bootstrap table列顺序的方法，通过在本地存储中存储和修改表格中表头数据，来控制浏览器显示的表格的列的数据，包括列顺序与需要显示的列，本地存储可以是localstorage，利用localstorage生命周期是永久的特性，使得每个用户浏览器中的表格呈现的个性化显示除用户主动操作以外不会被删去，提供了更好的用户体验。

附图说明

图1为本申请实施例中服务器端与客户端网络架构的拓扑图；

图2为本申请实施例中基于本地存储修改前端表格列数据的方法的一实施例示意图；

图3为本申请实施例中的基于本地存储修改前端表格列数据的方法的另一实施例示意图；

图4为本申请实施例中的基于本地存储修改前端表格列数据的方法的另一实施例示意图；

图5为本申请实施例中的基于本地存储修改前端表格列数据的方法的另一实施例示意图；

图6为本申请实施例中的基于本地存储修改前端表格列数据的方法的另一实施例示意图；

图7为本申请实施例中的基于本地存储修改前端表格列数据的方法的另一实施例示意图；

图8为本申请实施例中网络设备的示意图；

图9为本申请实施例中基于本地存储修改前端表格列数据的装置的示意图。

具体实施方式

本发明实施例提供一基于本地存储修改前端表格列数据的方法、装置及介质，能够通过在本地存储中存储和修改表格中表头的信息，包括列顺序与需要显示的列，来控制浏览器显示的表格的列信息，方便用户根据浏览习惯对列信息进行调整，提升用户体验。

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

如图1所示，用户在访问互联网的过程中，通过本地客户端(即浏览器)对互联网进行访问，为了对浏览器的用户身份进行识别，或跟踪会话数据，需要在本地浏览器上进行储存相关数据，从而诞生了cookie，cookie在互联网中发挥着越来越重要的作用，是用户获取、交流、传递信息的主要场所之一，然而，cookie也有一些弊端，如安全性不好，容量较小，生存周期有限容易被清除等等，为此，在第五代超级文本标记语言(HTML5)中，诞生了localstorage这个特性，用来作为本地存储使用。生命周期是永久，这意味着除非用户在浏览器提供的用户界面(user interface，UI)上清除localstorage信息，否则这些信息将永远存在，存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存，不参与和服务器的通信，从而解决了本地存储安全性，容量和生存周期的问题。

在客户端中，前端表格插件(bootstrap table)是一款基于前端(bootstrap)的极快瑞(jQuery)表格插件，通过简单的设置，就可以在客户端显示的表格中拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤等功能。方便用户使用的同时，也暴露出新的需求：有些用户在查看表格时因使用习惯等问题想将列的顺序调整，将自己关注的列移到前面显示，目前的表格插件无法很好的支持。

针对上述问题，本实施例提供一种基于本地存储修改前端表格列数据的方法，能够根据用户需要，通过本地存储修改浏览器表格的列顺序，为便于理解，下面对本申请实施例中的具体流程进行描述，请参阅图2，本申请实施例中基于本地存储修改前端表格列数据的方法的一个实施例包括：

201、将服务器端的第一表格的第一表头数据存储至本地存储。

本实施例中，该本地储存可以为localstorage或cookie，其中

localstorage内存容量为5M，cookie内存容量为4K左右，localstorage的生存周期为永久，cookie在一定的生存周期后会被清除；localstorage具有生存周期和内存容量上的优势，但是兼容性不如cookie，localstorage只兼容HTML5的浏览器，cookie可以兼容所有浏览器，因此，两种本地储存的方式各有优势，但都能实现本实施例所提供的方法。

202、根据本地存储中的第一表头数据获取第二表头数据。

本实施例中，该第一表头数据与该第二表头数据不相同，可以是列顺序不同，也可以是列数量不同，也可以是列顺序与列数量均不相同。

203、在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格。

本实施例中，该第二表格所具有的表头数据为该第二表头数据。

本实施例中，通过将服务器的第一表格的第一表头数据存储至本地存储，之后在本地存储中进行操作，调整列顺序或隐去不需显示的列，生成第二表头数据，之后在本地存储中将第一表头数据替换为第二表头数据，在本地浏览器上显示第二表格，该第二表格的表头数据为该第二表头数据，从而该第二表格中的列顺序和所显示的列是经用户个性化定制的，由于该设置在本地存储中进行，下次用户打开浏览器查看同一表格时，上述个性化定制会被保存，还能够查看到。

上述实施例对基于本地存储修改前端表格列数据的方法做了说明，在实际工作中，用户只需做一次列数据的修改，就能将修改结果保存在本地存储中，供之后每次打开相同表格时调用；因此每次打开浏览器表格时，需要先判断，对于服务器端的表格，用户是否已经在本地存储中保存过定制化的表头数据，下面进行详细说明。

本实施例提供了一种开启浏览器后，首先读取本地存储中是否有表头数据的实施方式，如图3所示，本实施例包括以下步骤：

301、获取本地存储中的表头数据。

本实施例中，在通过浏览器打开服务器端的表格后，首先对本地存储中的表头数据进行获取，根据获取结果的不同，执行以下三种不同的情况。

302、若本地存储中不存在第一表头数据和第二表头数据，则返回执行步骤201至203。

本实施例中，若用户打开浏览器时不能获取到本地存储中的表头数据，说明用户事先没有对表格列数据进行修改，此时若需要执行列数据的修改，则返回步骤201重头开始对表头数据进行设置，对于步骤201至203的具体执行方式，此处不再赘述。

303、若获取到本地存储中存储有第一表头数据，且未存储有第二表头数据，则触发执行步骤202至203。

本实施例中，若仅仅在本地存储中获取第一表头数据，说明表头数据已经被存储到本地，但用户还未进行编辑操作，此时执行步骤202至203，让用户编辑表格的列顺序或需要显示的列之后在表格中进行显示，对于步骤202至203的具体执行方式，此处不再赘述。

304、若获取到所述本地存储中存储有所述第二表头数据，则触发执行步骤203。

本实施例中，若能够在本地存储中获取到第二表头数据，说明用户事先已经对表格的列数据进行编辑，此时，直接执行步骤203，将获取到的该第二表头数据替换第一表头数据，在浏览器上显示第二表格即可。

本实施例中，通过在操作的一开始加入获取本地存储中的表头数据的步骤，对本地存储中的表头数据存储情况进行判断，对于之前已经执行过的操作步骤，直接获取本地存储中保存的结果，不再重复操作，节省资源，避免用户重复操作，提升用户体验。

需要说明的是，上述第一表头数据与该第二表头数据不相同，可以是列顺序不同，也可以是列数量不同，也可以是列顺序与列数量均不相同；具体在本地存储中的操作而言，操作的区别在于：仅对列顺序进行调整、仅对显示列进行勾选或者既对列顺序进行调整又对显示列进行勾选，下面就这三种情况分别进行说明。

一、仅对列顺序进行调整。

本实施例对基于本地存储修改前端表格列顺序的方法做介绍，请参阅图4。

如图4所示，包括以下步骤。

401、通过本地存储获取服务器端的第一表格的第一表头数据。

本实施例中，首先将服务器端的第一表格的第一表头数据保存在本地存储中，便于下一步在本地存储中进行处理操作。

402、根据第一表头数据获取到第一表头数据的字符串。

本实施例中，该获取步骤可以是将该第一表头数据解析为该字符串。

403、将字符串存储至本地存储。

本实施例中，该第一表头数据以字符串的形式存储在本地存储中。

404、获取本地存储中存储的字符串。

本实施例中，在本地存储中编辑字符串之前，首先需要将字符串提取出来，因此先进行获取操作。

405、根据字符串获取第一本地数据。

本实施例中，该获取的步骤可以是转化步骤：将字符串转化成能够在本地处理的第一本地数据，以便后续在本地存储中进行编辑。

406、根据第一本地数据获取名称前面加输入框的页面配置项。

本实施例中，该输入框用于供用户输入列的序号，使得用户可以通过页面配置项数据列的序号，对列顺序进行重新排列。

407、在页面配置项中配置列的序号，根据序号获取第二本地数据。

本实施例中，根据用户在页面配置项中配置的列的序号，转化为能够在本地存储中存储的第二本地数据。

408、将第二本地数据在本地存储中存储为第二表头数据。

本实施例中，将第二本地数据在本地存储中转化为第二表头数据，使得原本只能在本地存储中存储的数据格式，变为与服务器端表头数据相同的格式。

409、在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格。

本实施例中，该第二表格所具有的表头数据为该第二表头数据，其中，该第二表头数据的列顺序与该第一表头数据不同，从而实现了用户对列顺序的自定义修改。

二、仅对显示列进行勾选。

本实施例对基于本地存储勾选前端表格需要显示列的方法做介绍，请参阅图5。

如图5所示，包括以下步骤。

501、通过本地存储获取服务器端的第一表格的第一表头数据。

本实施例中，本步骤与上述步骤401相同，故不再赘述。

502、根据第一表头数据获取到第一表头数据的字符串。

本实施例中，本步骤与上述步骤402相同，不再赘述。

503、将字符串存储至本地存储。

本实施例中，本步骤与上述步骤403相同，不再赘述。

504、获取本地存储中存储的字符串。

本实施例中，本步骤与上述步骤404相同，不再赘述。

505、根据字符串获取第一本地数据。

本实施例中，本步骤与上述步骤405相同，不再赘述。

506、根据第一本地数据获取名称前面加复选框的子页面配置项。

本实施例中，不对页面配置项进行修改，仅对子页面配置项进行修改，其中，该复选框用于勾选是否显示目标列，该目标列为第一表格中的一列，勾选的操作方式有两种：一种是若勾选则显示该目标列，若不勾选则不显示该目标列；另一种是若勾选则不显示该目标列，若不勾选则显示该目标列。

507、在子页面配置项中配置勾选项，勾选项用于在复选框中勾选第一表格中需要显示的列，按勾选项将数据生成到第二本地数据中。

本实施例中，本地存储对用户通过复选框勾选出需要显示的列进行记录。

508、将第二本地数据在本地存储中存储为第二表头数据。

本实施例中，本步骤与步骤408相同，此处不再赘述。

509、在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格。

本实施例中，本步骤与步骤409相同，此处不再赘述。

本实施例中，通过在页面配置项的子页面配置项中引入复选框，供用户勾选哪些列需要显示，哪些列需要隐藏，从而使得用户在浏览器中浏览表格时，能够对列的显示进行设置。

三、既对列顺序进行调整又对显示列进行勾选。

本实施例对基于本地存储，既修改前端表格列顺序，又勾选前端表格需要显示的列的方法做介绍，请参阅图6。

如图6所示，包括以下步骤。

601、通过本地存储获取服务器端的第一表格的第一表头数据。

602、根据第一表头数据获取到第一表头数据的字符串。

603、将字符串存储至本地存储。

604、获取本地存储中存储的字符串。

605、根据字符串获取第一本地数据。

上述步骤601至605与步骤401至405相同，此处不再赘述。

606、根据第一本地数据获取名称前面加输入框的页面配置项。

本实施例中，该输入框用于供用户输入列的序号，使得用户可以通过页面配置项数据列的序号，对列顺序进行重新排列。

607、根据第一本地数据获取名称前面加复选框的子页面配置项。

本实施例中，不对页面配置项进行修改，仅对子页面配置项进行修改，其中，该复选框用于勾选是否显示目标列，该目标列为第一表格中的一列，勾选的操作方式有两种：一种是若勾选则显示该目标列，若不勾选则不显示该目标列；另一种是若勾选则不显示该目标列，若不勾选则显示该目标列。

608、在页面配置项中配置列的序号，在子页面配置项中配置勾选项，根据该序号与该勾选项生成第二本地数据。

本实施例中，该序号用于记录用户自定义的列顺序，该勾选项用于记录用户自定义需要显示的列，将该两项数据，通过第二本地数据的形式存储在本地存储中。

609、将第二本地数据在本地存储中存储为第二表头数据。

本实施例中，本步骤与步骤408相同，此处不再赘述。

610、在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格。

本实施例中，本步骤与步骤409相同，此处不再赘述。

本实施例中，将服务器端的第一表头数据存储在本地存储中，经过格式转化后，用户对表格的列数据进行编辑，既调整了列的顺序，又选择了需要显示的部分列，得到第二表头数据，最后用第二表头数据替换第一表头数据，在浏览器的表格中进行显示，从而获得了用户个性化定制的表格。

上述实施例介绍了通过本地存储修改前端表格列数据的方法，在上述方法中，本地存储可以是localstorage，也可以是cookie，均能够实现基于本地存储修改前段表格列数据的方法，下面就次两种不同本地存储类型的具体操作方式做详细说明。

1、本地存储为localstorage。

当本地存储为localstorage时，可以使用JS语言对localstorage进行操作，如图7所示，本实施例包括以下步骤：

701、通过本地存储获取bootstrap table显示表格的表头内容。

本实施例中，该步骤与步骤401相同，此处不再赘述。

702、根据bootstrap table显示表格的表头内容复制数据为字符串。

本实施例中，将表头内容的数据复制出来，形成字符串，方便后续操作，例如，表头内容为“名称”、“数量”、“价格”，则提取表头内容生成字符串：(名称，数量，价格)。

703、将字符串使用localstorage.setItem()方法存储至本地存储。

本实施例中，该localstorage.setItem()为JS语言中对localstorage进行编辑的一种方法，例如localstorage.setItem(key,value)的操作为：将value存储到key字段，在本实施例中，通过localstorage.setItem()方法将字符串存储到本地存储。

704、使用localstorage.getItem()方法获取存入本地存储中的字符串。

本实施例中，该localstorage.getItem()为JS语言中对localstorage进行编辑的一种方法，例如localstorage.getItem(key)的操作为:获取指定key本地存储的值，在本实施例中，通过localstorage.getItem()方法获取已存入本地存储中的字符串。

705、将获取到的字符串利用JSON.parse()方法转化为对象类型数据headData。

本实施例中，该JSON.parse()方法为JS语言中对localstorage进行编辑的一种方法，JSON.parse()用于从从一个字符串中解析出json对象(即JS语言可编辑的对象)，由于本实施例中使用JS语言对本地存储进行编辑，JS语言所在的Java系统为双类型系统，包括基本类型数据和对象类型数据；此处利用JSON.parse()方法将字符串转化为对象类型数据headData(即前面实施例所述的第一本地数据)，方便后续编辑操作。

706、将headData解析为在名称前加输入框可输入序号的页面配置项，以及名称前加复选框可勾选的子页面配置项。

在本实施例中，将对象类型数据headData解析为页面配置项，从而用户可以通过在页面配置项前的输入框中输入序号，以对列顺序进行排序；将对象类型数据headData解析为子页面配置项，从而用户可以在复选框中勾选需要显示的列。

707、根据页面配置项中配置的列的序号，以及子页面配置项中配置的勾选项，生成新的对象类型数据newHeadData(即前面实施例所述的第二本地数据)。

本实施例中，将用户自定义好的列顺序和需要显示的列信息，转化为对象类型数据，以便后续操作。

708、将newHeadData使用localstorage.setItem()方法存储至本地存储，得到新表头内容。

本实施例中，将用户自定义编辑好的列数据存储在本地存储中，

localstorage.setItem()方法为JS语言中对localstorage进行操作的方法，具体如步骤703所述，此处不再赘述。

709，使用本地存储中的新表头内容替换服务器端表格的表头内容，生成本地存储中的列数据表格。

需要说明的是，上述列数据的修改包括列顺序的修改和需要显示哪些列的修改，两种修改可以只修改其中一种，也可以同时修改两种，本实施例并不进行限定。

本实施例中，提供了目前主流客户端编程语言：JS语言对本地存储localstorage进行操作，以编辑前端表格列数据的方法，localstorage具有更大的内存容量以及永久的生命周期，每个用户浏览器中的表格呈现的个性化显示除用户主动操作以外不会被删去，具有较好的用户体验。

2、本地存储为cookie。

本实施例提供一种基于cookie修改前端表格列数据的方法，其步骤与上述步骤701至709相同，此处不再赘述，cookie具有兼容性较好的特点，使用上述方法，能够在所有浏览器上实现修改前端表格列数据的方法。

上述主要从本地存储与前端表格插件之间交互的角度对本申请实施例提供的方案进行了介绍。可以理解的是，上述本地存储为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的模块及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

从硬件结构上来描述，上述控制多进程访问磁盘文件的方法可以由一个实体设备实现，也可以由多个实体设备共同实现，还可以是一个实体设备内的一个逻辑功能模块，本申请实施例对此不作具体限定。

例如，上述基于本地存储修改前端表格列数据的方法可以通过图8中的通信设备来实现。图8为本申请实施例提供的通信设备的硬件结构示意图。该通信设备包括至少一个处理器801，通信线路802，存储器803以及至少一个通信接口804。

处理器801可以是一个通用中央处理器(central processing unit，CPU)，微处理器，特定应用集成电路(application-specific integrated circuit，服务器IC)，或一个或多个用于控制本申请方案程序执行的集成电路。

通信线路802可包括一通路，在上述组件之间传送信息。

通信接口804，使用任何收发器一类的装置，用于与其他设备或通信网络通信，如以太网，无线接入网(radio access network，RAN)，无线局域网(wireless local areanetworks，WLAN)等。

存储器803可以是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其他类型的静态存储设备，随机存取存储器(random access memory，RAM)或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器(electricallyer服务器able programmable read-only memory，EEPROM)、只读光盘(compact discread-only memory，CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器可以是独立存在，通过通信线路802与处理器相连接。存储器也可以和处理器集成在一起。

其中，存储器803用于存储执行本申请方案的计算机执行指令，并由处理器801来控制执行。处理器801用于执行存储器803中存储的计算机执行指令，从而实现本申请下述实施例提供的计费管理的方法。

可选的，本申请实施例中的计算机执行指令也可以称之为应用程序代码，本申请实施例对此不作具体限定。

在具体实现中，作为一种实施例，处理器801可以包括一个或多个CPU，例如图8中的CPU0和CPU1。

在具体实现中，作为一种实施例，通信设备可以包括多个处理器，例如图8中的处理器801和处理器807。这些处理器中的每一个可以是一个单核(single-CPU)处理器，也可以是一个多核(multi-CPU)处理器。这里的处理器可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。

在具体实现中，作为一种实施例，通信设备还可以包括输出设备805和输入设备806。输出设备805和处理器801通信，可以以多种方式来显示信息。例如，输出设备805可以是液晶显示器(liquid crystal display，LCD)，发光二级管(light emitting diode，LED)显示设备，阴极射线管(cathode ray tube，CRT)显示设备，或投影仪(projector)等。输入设备806和处理器801通信，可以以多种方式接收用户的输入。例如，输入设备806可以是鼠标、键盘、触摸屏设备或传感设备等。

上述的通信设备可以是一个通用设备或者是一个专用设备。在具体实现中，通信设备可以是台式机、便携式电脑、网络服务器、掌上电脑(personal digital assistant，PDA)、移动手机、平板电脑、无线终端设备、嵌入式设备或有图8中类似结构的设备。本申请实施例不限定通信设备的类型。

本申请实施例可以根据上述方法示例对用户面功能网元和用户面功能网元进行功能单元的划分，例如，可以对应各个功能划分各个功能单元，也可以将两个或两个以上的功能集成在一个处理单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。需要说明的是，本申请实施例中对单元的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

比如，以采用集成的方式划分各个功能单元的情况下，图9示出了一种基于本地存储修改前端表格列数据的装置的结构示意图。

如图9所示，本申请实施例提供的基于本地存储修改前端表格列数据的装置，包括：

存储单元901，用于将服务器端的第一表格的第一表头数据存储至本地存储；

获取单元902，用于根据存储单元901存储的的第一表头数据获取第二表头数据；

替换单元903，用于在本地存储中将存储单元901存储的第一表头数据替换为获取单元902获取到的第二表头数据，生成本地存储中的第二表格，第二表格所具有的表头数据为第二表头数据。

可选地，存储单元901，用于：

通过本地存储获取服务器端的第一表格的第一表头数据；

根据第一表头数据获取到第一表头数据的字符串；

将字符串存储至本地存储；

对应地，获取单元902，用于：

获取存储单元901存储的字符串；

根据字符串获取第一本地数据；

根据第一本地数据获取名称前面加输入框的页面配置项，输入框用于输入列的序号；

在页面配置项中配置列的序号，根据序号获取第二本地数据；

将第二本地数据在本地存储中存储为第二表头数据。

可选地，装置还包括判断单元904，用于：

获取本地存储中的表头数据；

若本地存储中不存在第一表头数据和第二表头数据，则返回存储单元901，执行将服务器端的第一表格的第一表头数据存储至本地存储的步骤；

若获取到本地存储中存储有第一表头数据，且未存储有第二表头数据，则触发获取单元902，执行根据本地存储中的第一表头数据获取第二表头数据的步骤；

若获取到本地存储中存储有第二表头数据，则触发替换单元903，执行在本地存储中将第一表头数据替换为第二表头数据，生成本地存储中的第二表格的步骤。

可选地，获取单元902，还用于：

根据第一本地数据获取名称前面加复选框的子页面配置项，复选框用于勾选是否显示目标列，目标列为第一表格中的一列，若勾选则显示目标列，反之则不显示目标列；

在子页面配置项中配置勾选项，勾选项用于在复选框中勾选第一表格中需要显示的列，按勾选项将数据生成到第二本地数据中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。

该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行该计算机程序指令时，全部或部分地产生按照本发明实施例该的流程或功能。该计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。该计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，该计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。该计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。该可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：ROM、RAM、磁盘或光盘等。

以上对本发明实施例所提供的基于本地存储修改前端表格列数据的方法、装置、终端设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (8)

1.一种基于本地存储修改前端表格列数据的方法，其特征在于，包括：

通过所述本地存储获取服务器端的第一表格的第一表头数据；

根据所述第一表头数据获取到所述第一表头数据的字符串；

将所述字符串存储至所述本地存储；

所述根据所述本地存储中的所述第一表头数据获取第二表头数据，包括：

获取所述本地存储中存储的所述字符串；

根据所述字符串获取第一本地数据；

根据所述第一本地数据获取名称前面加输入框的页面配置项，所述输入框用于输入列的序号；

在所述页面配置项中配置列的序号，根据所述序号获取第二本地数据；

将所述第二本地数据在所述本地存储中存储为第二表头数据；根据所述本地存储中的所述第一表头数据获取第二表头数据；

在所述本地存储中将所述第一表头数据替换为所述第二表头数据，生成所述本地存储中的第二表格，所述第二表格所具有的表头数据为所述第二表头数据。

2.根据权利要求1所述的方法，其特征在于，在本地存储中将所述第一表头数据替换为所述第二表头数据，生成本地存储中的第二表格之前，还包括：

获取所述本地存储中的表头数据；

若本地存储中不存在所述第一表头数据和所述第二表头数据，则返回执行将服务器端的第一表格的第一表头数据存储至本地存储的步骤；

若获取到所述本地存储中存储有所述第一表头数据，且未存储有所述第二表头数据，则触发执行根据所述本地存储中的所述第一表头数据获取第二表头数据的步骤；

若获取到所述本地存储中存储有所述第二表头数据，则触发执行所述在本地存储中将所述第一表头数据替换为所述第二表头数据，生成本地存储中的第二表格的步骤。

3.根据权利要求1所述的方法，其特征在于，

所述根据所述第一本地数据获取名称前面加输入框的页面配置项，还包括：

根据所述第一本地数据获取名称前面加复选框的子页面配置项，所述复选框用于勾选是否显示目标列，所述目标列为所述第一表格中的一列，若勾选则显示所述目标列，反之则不显示所述目标列；

所述在所述页面配置项中配置列的序号，根据所述序号获取第二本地数据，还包括：

在所述子页面配置项中配置勾选项，所述勾选项用于在所述复选框中勾选所述第一表格中需要显示的列，按所述勾选项将数据生成到所述第二本地数据中。

4.一种基于本地存储修改前端表格列数据的装置，其特征在于，包括：

存储单元，用于通过所述本地存储获取服务器端的第一表格的第一表头数据；

根据所述第一表头数据获取到所述第一表头数据的字符串；

将所述字符串存储至所述本地存储；

获取单元，用于：

获取所述存储单元存储的所述字符串；

根据所述字符串获取第一本地数据；

根据所述第一本地数据获取名称前面加输入框的页面配置项，所述输入框用于输入列的序号；

在所述页面配置项中配置列的序号，根据所述序号获取第二本地数据；

将所述第二本地数据在所述本地存储中存储为第二表头数据；

获取单元，用于根据所述存储单元存储的的所述第一表头数据获取第二表头数据；

替换单元，用于在所述本地存储中将所述存储单元存储的所述第一表头数据替换为所述获取单元获取到的第二表头数据，生成所述本地存储中的第二表格，所述第二表格所具有的表头数据为所述第二表头数据。

5.根据权利要求4所述的装置，其特征在于，所述装置还包括判断单元，用于：

获取所述本地存储中的表头数据；

若本地存储中不存在所述第一表头数据和所述第二表头数据，则返回所述存储单元，执行将服务器端的第一表格的第一表头数据存储至本地存储的步骤；

若获取到所述本地存储中存储有所述第一表头数据，且未存储有所述第二表头数据，则触发所述获取单元，执行根据所述本地存储中的所述第一表头数据获取第二表头数据的步骤；

若获取到所述本地存储中存储有所述第二表头数据，则触发所述替换单元，执行在本地存储中将所述第一表头数据替换为所述第二表头数据，生成本地存储中的第二表格的步骤。

6.根据权利要求4所述的装置，其特征在于，

所述获取单元，还用于：

根据所述第一本地数据获取名称前面加复选框的子页面配置项，所述复选框用于勾选是否显示目标列，所述目标列为所述第一表格中的一列，若勾选则显示所述目标列，反之则不显示所述目标列；

在所述子页面配置项中配置勾选项，所述勾选项用于在所述复选框中勾选所述第一表格中需要显示的列，按所述勾选项将数据生成到所述第二本地数据中。

7.一种网络设备，其特征在于，所述网络设备包括：交互装置、输入/输出（I/O）接口、处理器和存储器，所述存储器中存储有程序指令；

所述交互装置用于获取用户输入的操作指令；

所述处理器用于执行存储器中存储的程序指令，执行如权利要求1-3任一所述的方法。

8.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在计算机设备上运行时，使得所述计算机设备执行如权利要求1-3中任一项所述的方法。

Images