一种基于ui组件的表格动态设置列的方法及系统
技术领域：
：1.本发明涉及计算机
技术领域：
：，尤其涉及一种基于ui组件的表格动态设置列的方法及系统。
背景技术：
：：2.表格是网页展示数据的一种常见方式，前端基于vue和react框架的表格(table)组件也很多，通过发送请求从服务端获取数据，然后将数据赋值给组件，达到展示的效果。随着前端技术的发展，技术框架层出不穷。为了提高了开发效率，目前市面流行框架对表格的处理尚不能满足部分用户的需求。目前，如果一个表格里有很多列，用户将不能一目了然的抓取目标数据，从而降低了系统的可用性，因此，目前急需一种能够对表格的每一列进行动态配置的技术方案。3.本技术发明人在实现本技术实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：4.现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。技术实现要素：5.本技术实施例通过提供一种基于ui组件的表格动态设置列的方法及系统，解决了现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。达到了基于安装ui组件，实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。6.鉴于上述问题，本技术实施例提供一种基于ui组件的表格动态设置列的方法及系统。7.第一方面，本技术提供了一种基于ui组件的表格动态设置列的方法，其中，所述方法包括：获得第一发送指令；根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。8.另一方面，本技术还提供了一种基于ui组件的表格动态设置列的系统，其中，所述系统包括：第一获得单元，所述第一获得单元用于获得第一发送指令；第二获得单元，所述第二获得单元用于根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；第一执行单元，所述第一执行单元用于根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；第三获得单元，所述第三获得单元用于基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；第二执行单元，所述第二执行单元用于根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；第三执行单元，所述第三执行单元用于根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。9.另一方面，本技术实施例还提供了一种基于ui组件的表格动态设置列的方法及系统，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现上述第一方面所述方法的步骤。10.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：11.本技术实施例提供了一种基于ui组件的表格动态设置列的方法及系统，获得第一发送指令；根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。解决了现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。达到了基于安装ui组件，实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。12.上述说明是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。附图说明13.图1为本技术实施例一种基于ui组件的表格动态设置列的方法的流程示意图；14.图2为本技术实施例一种基于ui组件的表格动态设置列的方法中用户可对第一渲染表格列表进行自定义的列顺序调整的流程示意图；15.图3为本技术实施例一种基于ui组件的表格动态设置列的方法中用户可对第一渲染表格列表进行自定义的列展示调整的流程示意图；16.图4为本技术实施例一种基于ui组件的表格动态设置列的方法中对第一列设置信息进行存储和调用的流程示意图；17.图5为本技术实施例一种基于ui组件的表格动态设置列的方法中获得第一发送指令之前的流程示意图；18.图6为本技术实施例一种基于ui组件的表格动态设置列的方法中对所述历史列设置信息进行优先调取的流程示意图；19.图7为本技术实施例一种基于ui组件的表格动态设置列的系统的结构示意图；20.图8为本技术实施例示例性电子设备的结构示意图。21.附图标记说明：第一获得单元11，第二获得单元12，第一执行单元13，第三获得单元14，第二执行单元15，第三执行单元16，电子设备300，存储器301，处理器302，通信接口303，总线架构304。具体实施方式22.本技术实施例通过提供一种基于ui组件的表格动态设置列的方法及系统，解决了现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。达到了基于安装ui组件，实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。23.下面，将参考附图详细的描述本技术的示例实施例，显然，所描述的实施例仅是本技术的一部分实施例，而不是本技术的全部实施例，应理解，本技术不受这里描述的示例实施例的限制。24.申请概述25.表格是网页展示数据的一种常见方式，前端基于vue和react框架的表格(table)组件也很多，通过发送请求从服务端获取数据，然后将数据赋值给组件，达到展示的效果。随着前端技术的发展，技术框架层出不穷。为了提高了开发效率，目前市面流行框架对表格的处理尚不能满足部分用户的需求。目前，如果一个表格里有很多列，用户将不能一目了然的抓取目标数据，从而降低了系统的可用性，因此，目前急需一种能够对表格的每一列进行动态配置的技术方案。26.针对上述技术问题，本技术提供的技术方案总体思路如下：27.本技术提供了一种基于ui组件的表格动态设置列的方法，其中，所述方法包括：获得第一发送指令；根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。28.在介绍了本技术基本原理后，下面将结合说明书附图来具体介绍本技术的各种非限制性的实施方式。29.实施例一30.如图1所示，本技术实施例提供一种基于ui组件的表格动态设置列的方法，其中，所述方法包括：31.步骤s100：获得第一发送指令；32.进一步而言，如图5所示，本技术实施例步骤s100包括：33.步骤s110：判断所述服务后端是否存储有历史列设置信息；34.步骤s120：若所述服务后端存储有所述历史列设置信息，生成第一调取指令；35.步骤s130：根据所述第一调取指令，对所述历史列设置信息进行优先调取。36.具体而言，表格是网页展示数据的一种常见方式，前端基于vue和react框架的表格(table)组件也很多，通过发送请求从服务端获取数据，然后将数据赋值给组件，达到展示的效果。因此，对于表格列的动态设置，首先需要通过第一发送指令获取数据请求信息，以得到需要展示的数据。所述第一发送指令是用户从用户界面向服务后端发送的，主要用来调取服务后端的数据，而服务后端的数据分为两种：一种是被储存的历史列设置信息，另一种是后端原始数据。若所述服务后端存储有历史列设置信息，则当用户发送请求时，服务后端会优先对历史列设置信息进行调取；若所述服务后端没有存储历史列设置信息，则当用户发送请求时，服务后端会默认发送原始数据到前端，使用户可以根据需求筛选数据。37.步骤s200：根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；38.步骤s300：根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；39.具体而言，所述第一数据信息包括历史列设置数据和服务后端原始数据。服务后端收到用户前端的数据请求指令，会对用户前端进行反馈，将符合用户需求的列设置数据和服务后端原始数据发送到用户界面，从而使用组件进行展示，基于获得的数据信息，用户可以通过设置面板，根据自己的需求进行表格的定制：通过拖拽可以对列设置进行调整，改变其展示顺序；通过点击列信息前的按钮，控制该列显示或者隐藏，提升了用户体验感。40.步骤s400：基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；41.步骤s500：根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；42.具体而言，所述第一渲染表格列表就是将数据库中的数据通过渲染分类将用户需要的数据显示到页面上，渲染包含新增、修改、查询、删除的知识点，以便用户列出的数据更加清楚明了。所述第一自定义指令是可以根据用户需求对数据信息进行修改的指令，对其进行动态设置，比如通过拖拽可以对列设置进行调整，改变其展示顺序；通过点击列信息前的按钮，控制该列显示或者隐藏。根据自己的需求进行表格的定制，可以控制某些列是否需要展示，进而生成新的设置信息，提高了用户体验感。43.步骤s600：根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。44.进一步而言，如图4所示，本技术实施例步骤s600包括：45.步骤s610：根据所述第一列设置信息，生成第一存储指令；46.步骤s620：根据所述第一存储指令，对所述第一列设置信息进行存储，并上传至所述服务后端进行后台存储调用。47.具体而言，当用户根据自己的需求进行表格的定制，展示需要保留的列设置后，通过点击按钮发送请求，将设置完的数据发送到服务后端，以便下次登录无需重新设置，通过用户id从服务端直接获取列设置数据，保留上一次的列设置信息。对保存的页面表格重新按照当前的设置进行渲染。实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。48.进一步而言，如图2所示，本技术实施例步骤s700包括：49.步骤s710：获得所述用户的预设表格列顺序信息；50.步骤s720：根据所述预设表格列顺序信息，所述用户可对所述第一渲染表格列表进行自定义的列顺序调整。51.具体而言，所述用户的预设表格列顺序信息是指用户根据自己的需求进行表格的定制，通过设置面板进行拖拽调整，对列的顺序进行更改的信息。用户根据自己的需求对所述表格列顺序进行调整，进而生成新的设置信息，提高了用户体验感。52.进一步而言，如图3所示，本技术实施例步骤s800包括：53.步骤s810：获得所述用户的预设表格列展示信息；54.步骤s820：根据所述预设表格列展示信息，所述用户可对所述第一渲染表格列表进行自定义的列展示调整。55.具体而言，所述用户的预设表格列展示信息是指用户根据自己的需要的信息进行表格的修改，通过设置面板的设置按钮，对列的展示信息进行更改。用户根据自己的需求对所述表格列展示信息进行调整，进而生成新的设置信息，从而提高了用户体验感。56.进一步而言，如图6所示，其中，所述对所述历史列设置信息进行优先调取，本技术实施例步骤s130包括：57.步骤s131：判断所述历史列设置信息是否满足所述用户的预设表格列设置信息；58.步骤s132：若所述历史列设置信息不满足所述用户的预设表格列设置信息，生成第二自定义指令；59.步骤s133：根据所述第二自定义指令和所述预设表格列设置信息，所述用户可进行列的动态设置。60.具体而言，若所述服务后端存储有历史列设置信息，则当用户发送请求时，服务后端会优先对历史列设置信息进行调取，发送给用户前端，使用户可以根据需求筛选数据。所述用户的预设表格列设置信息是用户需要的列信息，满足用户需求的。若所述历史列设置信息满足所述用户的预设表格列设置信息，则表明历史列设置信息是用户的目标信息，对这类信息进行展示保留；若所述历史列设置信息不满足所述用户的预设表格列设置信息，则表明用户不需要这些历史列设置信息，可以打开列设置按钮对其进行隐藏设置，满足了用户需求，提升了用户体验感。61.综上所述，本技术实施例所提供的一种基于ui组件的表格动态设置列的方法，具有如下技术效果：62.本技术提供了一种基于ui组件的表格动态设置列的方法，其中，所述方法包括：获得第一发送指令；根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。解决了现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。达到了基于安装ui组件，实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。63.实施例二64.基于与前述实施例中一种基于ui组件的表格动态设置列的方法，同样发明构思，本发明还提供了一种基于ui组件的表格动态设置列的系统，如图7所示，所述系统包括：65.第一获得单元11，所述第一获得单元11用于获得第一发送指令；66.第二获得单元12，所述第二获得单元12用于根据所述第一发送指令，界面前端向服务后端发送第一数据获取请求；67.第一执行单元13，所述第一执行单元13用于根据所述第一数据获取请求，所述服务后端向所述界面前端反馈第一数据信息，其中，所述第一数据信息包括列设置数据；68.第三获得单元14，所述第三获得单元14用于基于表格组件，对所述第一数据信息进行展示渲染，获得第一渲染表格列表，且生成第一自定义指令；69.第二执行单元15，所述第二执行单元15用于根据所述第一自定义指令，用户可对所述第一渲染表格列表进行列的动态设置，生成第一列设置信息；70.第三执行单元16，所述第三执行单元16用于根据所述第一列设置信息，对所述第一渲染表格列表进行重新渲染。71.进一步的，所述系统还包括：72.第四获得单元，所述第四获得单元用于获得所述用户的预设表格列顺序信息；73.第四执行单元，所述第四执行单元用于根据所述预设表格列顺序信息，所述用户可对所述第一渲染表格列表进行自定义的列顺序调整。74.进一步的，所述系统还包括：75.第五获得单元，所述第五获得单元用于获得所述用户的预设表格列展示信息；76.第五执行单元，所述第五执行单元用于根据所述预设表格列展示信息，所述用户可对所述第一渲染表格列表进行自定义的列展示调整。77.进一步的，所述系统还包括：78.第六执行单元，所述第六执行单元用于根据所述第一列设置信息，生成第一存储指令；79.第七执行单元，所述第七执行单元用于根据所述第一存储指令，对所述第一列设置信息进行存储，并上传至所述服务后端进行后台存储调用。80.进一步的，所述系统还包括：81.第一判断单元，所述第一判断单元用于判断所述服务后端是否存储有历史列设置信息；82.第八执行单元，所述第八执行单元用于若所述服务后端存储有所述历史列设置信息，生成第一调取指令；83.第九执行单元，所述第九执行单元用于根据所述第一调取指令，对所述历史列设置信息进行优先调取。84.进一步的，所述系统还包括：85.第二判断单元，所述第二判断单元用于判断所述历史列设置信息是否满足所述用户的预设表格列设置信息；86.第十执行单元，所述第十执行单元用于若所述历史列设置信息不满足所述用户的预设表格列设置信息，生成第二自定义指令；87.第十一执行单元，所述第十一执行单元用于根据所述第二自定义指令和所述预设表格列设置信息，所述用户可进行列的动态设置。88.示例性电子设备89.下面参考图8来描述本技术实施例的电子设备。90.基于与前述实施例中一种基于ui组件的表格动态设置列的方法相同的发明构思，本技术实施例还提供了一种基于ui组件的表格动态设置列的系统，包括：处理器，所述处理器与存储器耦合，所述存储器用于存储程序，当所述程序被所述处理器执行时，使得系统以执行第一方面任一项所述的方法。91.该电子设备300包括：处理器302、通信接口303、存储器301。可选的，电子设备300还可以包括总线架构304。其中，通信接口303、处理器302以及存储器301可以通过总线架构304相互连接；总线架构304可以是外设部件互连标总线或扩展工业标准结构总线等。所述总线架构304可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。92.处理器302可以是一个cpu，微处理器，asic，或一个或多个用于控制本技术方案程序执行的集成电路。通信接口303，使用任何收发器一类的装置，用于与其他设备或通信网络通信，如以太网，无线接入网，无线局域网，有线接入网等。存储器301可以是rom或可存储静态信息和指令的其他类型的静态存储设备，ram或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器、只读光盘或其他光盘存储、光碟存储、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器可以是独立存在，通过总线架构304与处理器相连接。存储器也可以和处理器集成在一起。93.其中，存储器301用于存储执行本技术方案的计算机执行指令，并由处理器302来控制执行。处理器302用于执行存储器301中存储的计算机执行指令，从而实现本技术上述实施例提供的一种基于ui组件的表格动态设置列的方法。94.可选的，本技术实施例中的计算机执行指令也可以称之为应用程序代码，本技术实施例对此不作具体限定。95.本技术实施例解决了现有技术中表格列数据固定，无法进行调整，不能满足用户需求的技术问题。达到了基于安装ui组件，实现了表格列的动态配置并进行保存，用户可以根据自己的需求进行表格的定制，可以控制某些列是否需要展示，并将自己的配置信息存储至服务器，便于下次登录直接获取配置信息的技术效果。96.本领域普通技术人员可以理解：本技术中涉及的第一、第二等各种数字编号仅为描述方便进行的区分，并不用来限制本技术实施例的范围，也不表示先后顺序。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。“至少一个”是指一个或者多个。至少两个是指两个或者多个。“至少一个”、“任意一个”或其类似表达，是指的这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a,b,或c中的至少一项(个、种)，可以表示：a,b,c,a-b,a-c,b-c,或a-b-c，其中a,b,c可以是单个，也可以是多个。97.在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本技术实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线或无线方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包括一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质、光介质、或者半导体介质等。98.本技术实施例中所描述的各种说明性的逻辑单元和电路可以通过通用处理器，数字信号处理器，专用集成电路(asic)，现场可编程门阵列(fpga)或其它可编程逻辑装置，离散门或晶体管逻辑，离散硬件部件，或上述任何组合的设计来实现或操作所描述的功能。通用处理器可以为微处理器，可选地，该通用处理器也可以为任何传统的处理器、控制器、微控制器或状态机。处理器也可以通过计算装置的组合来实现，例如数字信号处理器和微处理器，多个微处理器，一个或多个微处理器联合一个数字信号处理器核，或任何其它类似的配置来实现。99.本技术实施例中所描述的方法或算法的步骤可以直接嵌入硬件、处理器执行的软件单元、或者这两者的结合。软件单元可以存储于ram存储器、闪存、rom存储器、eprom存储器、eeprom存储器、寄存器、硬盘、可移动磁盘、cd-rom或本领域中其它任意形式的存储媒介中。示例性地，存储媒介可以与处理器连接，以使得处理器可以从存储媒介中读取信息，并可以向存储媒介存写信息。可选地，存储媒介还可以集成到处理器中。处理器和存储媒介可以设置于asic中，asic可以设置于终端中。可选地，处理器和存储媒介也可以设置于终端中的不同的部件中。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。100.尽管结合具体特征及其实施例对本技术进行了描述，显而易见的，在不脱离本技术的精神和范围的情况下，可对其进行各种修改和组合。101.相应地，本说明书和附图仅仅是所附权利要求所界定的本技术的示例性说明，且视为已覆盖本技术范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术意图包括这些改动和变型在内。当前第1页12当前第1页12