CN108804483B - 单元格页面的渲染方法、服务器和计算机可读存储介质 - Google Patents

单元格页面的渲染方法、服务器和计算机可读存储介质 Download PDF

Info

Publication number
CN108804483B
CN108804483B CN201710315372.7A CN201710315372A CN108804483B CN 108804483 B CN108804483 B CN 108804483B CN 201710315372 A CN201710315372 A CN 201710315372A CN 108804483 B CN108804483 B CN 108804483B
Authority
CN
China
Prior art keywords
cell
editor
rendering
page
server
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710315372.7A
Other languages
English (en)
Other versions
CN108804483A (zh
Inventor
吴清林
刘金萍
黄建虎
王超
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Priority to CN201710315372.7A priority Critical patent/CN108804483B/zh
Priority to US16/317,030 priority patent/US20190228062A1/en
Priority to PCT/CN2018/076155 priority patent/WO2018201773A1/zh
Priority to SG11201903206PA priority patent/SG11201903206PA/en
Publication of CN108804483A publication Critical patent/CN108804483A/zh
Application granted granted Critical
Publication of CN108804483B publication Critical patent/CN108804483B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/174—Form filling; Merging
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明公开了一种单元格页面的渲染方法，所述方法包括：服务器获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。本发明还公开了一种服务器和计算机可读存储介质。本发明提高了页面的加载速度，并提高了页面渲染的效率。

Description

单元格页面的渲染方法、服务器和计算机可读存储介质
技术领域
本发明涉及数据表处理技术领域，尤其涉及一种单元格页面的渲染方法、服务器和计算机可读存储介质。
背景技术
传统的数据录入，是由浏览器在前端界面中渲染表单页面，即在前端页面中渲染各个单元格的表单元素，由于浏览器渲染单元格的表单元素，需要将每个单元格绑定表单组件，这种情况下，需要对每个单元格进行事件的注册，由于注册的事件较多会占用浏览器的大量内存，会导致页面的加载速度较慢，此外，浏览器每次在表单中录入数据时，需要对每个单元格都进行页面渲染，花费的时间较长，导致效率较低。
发明内容
本发明的主要目的在于提供一种单元格页面的渲染方法、服务器和计算机可读存储介质，旨在解决现有的单元格页面的渲染方式，内存占用大导致页面加载速度慢，以及数据的录入效率较低的技术问题。
为实现上述目的，本发明提供一种单元格页面的渲染方法，应用于服务器中，所述单元格页面的渲染方法包括：
服务器获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；
在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；
基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。
可选地，所述服务器获取预设的编辑器的步骤包括：
所述服务器在编辑器的初始化入口添加编辑器表单面板；
调用事件代理处理所述编辑器表单面板，以初始化编辑器，并获取所述编辑器。
可选地，所述服务器获取待处理的表单的步骤包括：
所述服务器获取空表格，并获取待添加至所述空表格中的行列标识；
基于预存的业务数据表，确定行列标识在空表格中的放置位置；
按照确定的放置位置将所述行列标识添加到所述空表格中，以得到表单。
可选地，所述在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤包括：
在任一单元格所在位置检测到点击事件时，确定所述单元格是否被激活；
若所述单元格未被激活，则执行基于所述编辑器获取所述单元格的表格属性的步骤，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
可选地，所述执行在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤的同时，执行以下步骤：
确定所述单元格的位置以及宽高；
基于确定的位置和宽高，调整所述编辑器的位置及宽高，以将调整后的编辑器悬浮在所述单元格上方。
可选地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述方法还包括：
在所述表格属性为预设类型的表格属性时，基于所述单元格的表格属性获取所述单元格对应的数据模型；
基于所述数据模型以及所述表格属性获取预设的默认值；
根据获取的所述默认值作为所述单元格的默认值。
可选地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述方法还包括：
在检测到鼠标离开所述单元格时，将所述单元格设置为焦点失效；
对通过所述编辑器在所述单元格输入的数据进行回填，并更新所述单元格的视图。
可选地，在表单中未接收到点击事件时，隐藏所述编辑器。
此外，为实现上述目的，本发明还提供一种服务器，所述服务器包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的单元格页面的渲染程序，所述单元格页面的渲染程序被所述处理器执行时实现如上文所述的单元格页面的渲染方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有单元格页面的渲染程序，所述单元格页面的渲染程序被处理器执行时实现如上文所述的单元格页面的渲染方法的步骤。
本发明提出的技术方案，服务器先获取预设的编辑器以及待处理的表单，然后在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性，再基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，后续即可在所述单元格中输入数据。本发明在服务器中实现单元格的页面渲染，并且是采用编辑器进行页面渲染，由于无须将各个单元格都绑定表单组件，避免了多个注册事件的并行发生，提高了页面的加载速度，此外，在检测到点击事件时，才采用编辑器对点击的单元格进行页面的渲染，无须每次都加载所有单元格，提高了页面渲染的效率。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的服务器结构示意图；
图2为本发明单元格页面的渲染方法第一实施例的流程示意图；
图3为本发明单元格页面的渲染方法第二实施例的流程示意图；
图4为本发明单元格页面的渲染方法第三实施例的流程示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明实施例的解决方案主要是：服务器先获取预设的编辑器以及待处理的表单，然后在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性，再基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，后续即可在所述单元格中输入数据。以解决现有的单元格页面的渲染方式，页面的加载速度慢，页面渲染效率低的问题。
应当理解的是，现有的理赔损失明细页面中，存在大批量数据编辑，若是采用传统的页面渲染方式，会导致效率减低，并且增大的内存耗能。
因此，为了提高页面的加载速度、减小浏览器的内存消耗，并提高页面的渲染效率。本发明提出一种单元格页面的渲染方式，本发明实施例中，在明细的表单中取消原生表单组件，通过编辑器代理数据来输入，由于通过编辑器来进行单元格的表单元素渲染，无须对各个单元格绑定原生表单组件，只要在单元格中输入数据时，通过编辑器对各个单元格进行渲染，即，由编辑器根据单元格的表格属性，在该单元格中显示相应类型的界面框，如文本输入框、下拉框，选择框或日期选择框等，即可实现数据的输入，避免了浏览器内存消耗的情况，提升了页面的加载速度，从而提高了性能。此外，每次在渲染页面时，只要渲染编辑器当前所在位置的单元格即可，提高了页面渲染的效率。
如图1所示，图1是本发明实施例方案涉及的硬件运行环境的服务器的结构示意图。
本发明实施例服务器包括但不限于单路服务器、多路服务器和分布式服务器。
如图1所示，该服务器可以包括：处理器1001，例如CPU，通信总线1002、网络接口1003，存储器1004。其中，通信总线1002用于实现这些组件之间的连接通信。网络接口1003可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1004可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1004可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的服务器结构并不构成对服务器的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机可读存储介质的存储器1004中可以包括操作系统、网络通信模块、单元格页面的渲染程序。其中，操作系统是管理和控制服务器与软件资源的程序，支持网络通信模块、单元格页面的渲染程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1003。
在图1所示的服务器中，网络接口1003主要用于连接前端页面，与前端页面进行数据通信；所述服务器通过处理器1001调用存储器1004中存储的单元格页面的渲染程序，以执行以下步骤：
获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；
在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；
基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。
本实施例提出的技术方案，服务器先获取预设的编辑器以及待处理的表单，然后在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性，再基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，后续即可在所述单元格中输入数据。本发明在服务器中实现单元格的页面渲染，并且是采用编辑器进行页面渲染，由于无须将各个单元格都绑定表单组件，避免了多个注册事件的并行发生，提高了页面的加载速度，此外，在检测到点击事件时，才采用编辑器对点击的单元格进行页面的渲染，无须每次都加载所有单元格，提高了页面渲染的效率。
进一步地，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行获取预设的编辑器的步骤：
在编辑器的初始化入口添加编辑器表单面板；
调用事件代理处理所述编辑器表单面板，以初始化编辑器，并获取所述编辑器。
进一步地，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行获取待处理的表单的步骤：
获取空表格，并获取待添加至所述空表格中的行列标识；
基于预存的业务数据表，确定行列标识在空表格中的放置位置；
按照确定的放置位置将所述行列标识添加到所述空表格中，以得到表单。
进一步地，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤：
在任一单元格所在位置检测到点击事件时，确定所述单元格是否被激活；
若所述单元格未被激活，则执行基于所述编辑器获取所述单元格的表格属性的步骤，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
进一步地，所述执行在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤的同时，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行以下步骤：
确定所述单元格的位置以及宽高；
基于确定的位置和宽高，调整所述编辑器的位置及宽高，以将调整后的编辑器悬浮在所述单元格上方。
进一步地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行以下步骤：
在所述表格属性为预设类型的表格属性时，基于所述单元格的表格属性获取所述单元格对应的数据模型；
基于所述数据模型以及所述表格属性获取预设的默认值；
根据获取的所述默认值作为所述单元格的默认值。
进一步地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述服务器通过处理器1001调用存储器1004中存储的数据审批程序，以执行以下步骤：
在检测到鼠标离开所述单元格时，将所述单元格设置为焦点失效；
对通过所述编辑器在所述单元格输入的数据进行回填，并更新所述单元格的视图。
基于上述服务器的硬件结构，提出本发明单元格页面的渲染方法的各个实施例。
参照图2，图2为本发明单元格页面的渲染方法第一实施例的流程示意图。
在本实施例中，所述单元格页面的渲染方法应用于服务器中，所述方法包括：
服务器获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。
本实施例中，单元格页面的渲染方法应用于服务器中，该服务器如图1所述的服务器。所述编辑器用于对表单中的各个单元格进行页面的渲染，该编辑器的具体表现形式不做限定，可以是以矩形或其它图形显示在单元格上。其中，所述表单指包括有行列标识的表格，如表1所示：
姓名 编号 性别 年龄
表1
其中，姓名、编号、性别和年龄表示所述表单的行列标识，从表1可看出，该表单包括的标识是列标识，当然，也可根据实际需要获取包含行标识的表单，此处不再赘述。表单中的单元格即表1所示的各个空格。
以下是本实施例中实现单元格页面的渲染的具体步骤：
步骤S10，服务器获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格。
在本实施例中，服务器可事先启动单线程，以通过启动的单线程依次获取编辑器以及待处理的表单，编辑器以及表单的获取顺序不做限定，可以是先获取编辑器再获取表单，也可以先获取表单再获取编辑器。
进一步地，为了提高单元格页面的渲染效率，该服务器还可以事先启动双线程，以通过两个线程同时获取编辑器和表单，本发明实施例，可优选采用双线程的方式获取编辑器和表单。
在本实施例中，所述服务器获取预设的编辑器的步骤包括：
步骤a、所述服务器在编辑器的初始化入口添加编辑器表单面板；
步骤b、调用事件代理处理所述编辑器表单面板，以初始化编辑器，并获取所述编辑器。
即，服务器先在编辑器的初始化入口添加编辑器表单面板，在编辑器表单面板添加成功后，调用事件代理，以处理该编辑器表单面板，实现编辑器的初始化过程，得到编辑器，在得到编辑器之后，获取该编辑器。
需要说明的是，该编辑器的初始化过程可以由服务器事先执行，并存储在相应的存储空间中，后续再从该存储空间中获取；当然，也可以在需要该编辑器时，才进行编辑器的初始化，并在初始化完成后，获取该编辑器。
在本实施例中，所述服务器获取待处理的表单的步骤包括：
步骤c、所述服务器获取空表格，并获取待添加至所述空表格中的行列标识；
步骤d、基于预存的业务数据表，确定行列标识在空表格中的放置位置；
步骤e、按照确定的放置位置将所述行列标识添加到所述空表格中，以得到表单。
即，服务器先获取空表格，其中，该空表格可以是服务器事先存储在数据库中的表格，也可以是服务器当前建立的表格。服务器获取到空表格之后，再从数据库获取待添加至所述空表格中的行列标识，此处所述的行列标识即上述表1举例的名称、编号、姓名和年龄等列标识。在获取到单元格的行列标识，再提取预存的业务数据表，通过查表的方式确定行列标识在空表格中的放置位置，在确定放置位置之后，即可按照确定的放置位置将所述行列标识添加至所述空表格中，以得到表单。
为更好理解本实施例，举例如下：
服务器一开始获取空表格，该空表格为：
若此时从数据库中获取的行列标识包括姓名、编号、性别、年龄等，且查询业务数据表之后，检测到各个行列标识在空表格中的放置位置都是第一行、并且按照从前到后的顺序排在各列中，那么，通过上述处理方式，即可得到表单：
姓名 编号 性别 年龄
通过上述的处理过程，即可获取到编辑器以及待处理的表单。
步骤S20，在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性。
在获取到编辑器以及表单之后，若在表单的任一单元格所在位置检测到点击事件，即可基于该编辑器获取所述单元格的表格属性。该点击事件可以是用户基于鼠标输入的点击事件，也可以是基于手指触摸操作输入的点击事件。
具体地，所述步骤S20包括：
步骤f，在任一单元格所在位置检测到点击事件时，确定所述单元格是否被激活；
步骤g，若所述单元格未被激活，则执行基于所述编辑器获取所述单元格的表格属性的步骤，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
即本实施例中，所述服务器在任一单元格所在位置检测到点击事件时，先确定该单元格是否被激活，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
也就是说，本次在单元格中检测到点击事件，先确定该单元格是否是第一次被点击，若该单元格是第一次被点击，说明该单元格还没被编辑器初始化，也就是该单元格还未被激活，此时，基于该编辑器获取该单元格的表格属性。若当前该单元格已经被激活，可以说明该单元格之前就被点击过了，编辑器已经对该单元格进行过页面渲染，此时，就不再执行获取所述单元格的表格属性的操作，此时可直接在该单元格的编辑器中输入数据。
本实施例例中，单元格的表格属性是指该单元格所在行或者所在列的属性信息，单元格的表格属性是根据单元格所在行的行标识或所在列的列标识确定的，例如，表单如上文的表1，且点击事件对应的单元格位于名称这一列，说明该单元格对应的列标识就是名称，那么该单元格的表格属性即名称。
进一步地，所述执行步骤S20同时，执行以下步骤：
确定所述单元格的位置以及宽高；
基于确定的位置和宽高，调整所述编辑器的位置及宽高，以将调整后的编辑器悬浮在所述单元格上方。
即，所述服务器在根据编辑器获取单元格的表格属性之后，会确定该单元格的位置以及宽高，然后根据该单元格的位置以及宽高，调整该编辑器的位置以及宽高，使得调整后的编辑器位于该单元格的上方，并且与该单元格的大小一致，后续将调整后的编辑器悬浮在该单元格上方，以便在该编辑器中输入数据。
步骤S30，基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。
在本实施例中，在获取到表格属性之后，通过预设的表格属性与表单元素的映射关系，可确定该单元格对应的表单元素。
其中，表格属性与表单元素的映射关系是事先存储的，本实施例中，映射关系不限于1对1或1对多，即同一个表格属性，可以对应一个或多个表单元素，例如，在表格属性为年龄时，该表格属性对应的表单元素可以是文本输入框、下拉框中的其中一种，当然，还可以是上述的两种。
当表格属性与表单元素的映射关系为1对多时，对各个表单元素设置优先级，后续按照优先级的顺序在单元格中显示相应的表单元素，例如，单元格的表单元素包括文本输入框、下拉框，两个表单元素的优先级依次是下拉框、文本输入框，那么，后续在单元格优先显示的表单元素就为下拉框。后续在单元格中使用时，可通过双击点击操作，以切换单元格显示的表单元素，例如双击之后在单元格中显示文本输入框。
在确定单元格对应的表单元素之后，所述服务器对所述单元格进行初始化，以使所述单元格显示所述表单元素，以实现所述单元格页面的渲染。
本实施例提出的技术方案，服务器先获取预设的编辑器以及待处理的表单，然后在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性，再基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，后续即可在所述单元格中输入数据。本发明在服务器中实现单元格的页面渲染，并且是采用编辑器进行页面渲染，由于无须将各个单元格都绑定表单组件，避免了多个注册事件的并行发生，提高了页面的加载速度，此外，在检测到点击事件时，才采用编辑器对点击的单元格进行页面的渲染，无须每次都加载所有单元格，提高了页面渲染的效率。
进一步地，基于第一实施例提出本发明单元格页面的渲染方法的第二实施例。
单元格页面的渲染方法的第二实施例与单元格页面的渲染方法的第一实施例的区别在于，参照图3，所述步骤S30之后，所述方法还包括：
步骤S40，在所述表格属性为预设类型的表格属性时，基于所述单元格的表格属性获取所述单元格对应的数据模型；
步骤S50，基于所述数据模型以及所述表格属性获取预设的默认值；
步骤S60，根据获取的所述默认值作为所述单元格的默认值。
在本实施例中，在对单元格进行页面的渲染之后，确定各个单元格的表格属性，本实施例中，所述预设类型的表格属性包括：性别、年龄和编号对应的表格属性。在表格属性为性别、年龄和编号时，基于所述单元格的表格属性获取所述单元格对应的数据模型，所述数据模型包括文字、数字等等，在获取到单元格对应的数据模型之后，基于数据模型以及所述表格属性获取预设的默认值。
例如，表格属性为性别，则所述表格属性对应的默认值为“男”和“女”，那么根据该默认值“男”和“女”初始化所述单元格的默认值，以使该单元格具有该默认值“男”和“女”。表格属性为年龄，则所述表格属性对应的默认值可设置为1-100，那么根据该默认值1-100初始化所述单元格的默认值，以使该单元格具有1-100的值。
对单元格设置默认值之后，可在编辑器中输入相应的数据，以实现单元格的数据录入。
在本实施中，对单元格进行渲染之后，在单元格中初始化默认值，以便后续进行数据的录入时，从默认值中进行选择，提高数据录入的便捷性。
进一步地，基于第二实施例提出本发明单元格页面的渲染方法的第三实施例。
单元格页面的渲染方法的第三实施例与单元格页面的渲染方法的第二实施例的区别在于，参照图4，所述步骤S60之后，所述方法还包括：
步骤S70，在检测到鼠标离开所述单元格时，将所述单元格设置为焦点失效；
步骤S80，对通过所述编辑器在所述单元格输入的数据进行回填，并更新所述单元格的视图。
在本实施例中，在检测鼠标离开该单元格时，相当于当前鼠标没有点击该单元格，那么将所述单元格设置为焦点失效，然后对通过所述编辑器在所述单元格输入的数据进行回填，也就是说，将输入的数据进行生效，以使输入的数据保存到该单元格中。
此外，在数据回填之后，所述服务器更新所述单元格的视图，即将原先显示有编辑器的单元格进行视图更新，以使该单元格中的视图只有单元格以及输入的数据，不再显示编辑器。
在本实施例中，在检测到鼠标离开所述单元格时，对单元格中的数据进行回填，并更新该单元格的视图，实现了表格的页面刷新，无须关心表单元素，只要更新视图层即可，提高了页面的渲染速度。
进一步地，基于第一至第三实施例提出本发明单元格页面的渲染方法的第四实施例。
单元格页面的渲染方法第四实施例与单元格页面的渲染方法第一至第三实施例的区别在于，在表单中未接收到点击事件时，隐藏所述编辑器。
即本发明实施例中，表单中的编辑器只有在单元格所在位置接收到点击事件时，才会显示，若没有在单元格中接收到点击事件，则该编辑器会隐藏，不影响表单中的数据查看，使得页面的渲染方式更加灵活和智能。
此外，所述单元格页面的渲染方法还包括：
声明所述编辑器的初始化方法，以在所述编辑器中增加新的功能。
具体地：在编辑器的初始化入口添加编辑器表单面板之后，在所述表单面板中添加新的功能，然后调用事件代理处理该编辑器表单面板，以初始化该编辑器。
即本发明实施例中，该编辑器的功能可以根据实际需要进行添加，以使编辑器的功能更加丰富。
此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有单元格页面的渲染程序，所述单元格页面的渲染程序被处理器执行时实现如下操作：
获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；
在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；
基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框。
本实施例提出的技术方案，服务器先获取预设的编辑器以及待处理的表单，然后在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性，再基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，后续即可在所述单元格中输入数据。本发明在服务器中实现单元格的页面渲染，并且是采用编辑器进行页面渲染，由于无须将各个单元格都绑定表单组件，避免了多个注册事件的并行发生，提高了页面的加载速度，此外，在检测到点击事件时，才采用编辑器对点击的单元格进行页面的渲染，无须每次都加载所有单元格，提高了页面渲染的效率。
进一步地，所述单元格页面的渲染程序被处理器执行时，还实现获取预设的编辑器的操作：
在编辑器的初始化入口添加编辑器表单面板；
调用事件代理处理所述编辑器表单面板，以初始化编辑器，并获取所述编辑器。
进一步地，所述单元格页面的渲染程序被处理器执行时，还实现获取待处理的表单的操作：
获取空表格，并获取待添加至所述空表格中的行列标识；
基于预存的业务数据表，确定行列标识在空表格中的放置位置；
按照确定的放置位置将所述行列标识添加到所述空表格中，以得到表单。
进一步地，所述单元格页面的渲染程序被处理器执行时，还实现在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的操作：
在任一单元格所在位置检测到点击事件时，确定所述单元格是否被激活；
若所述单元格未被激活，则执行基于所述编辑器获取所述单元格的表格属性的操作，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
进一步地，所述执行在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤的同时，所述单元格页面的渲染程序被处理器执行时，还实现如下操作：
确定所述单元格的位置以及宽高；
基于确定的位置和宽高，调整所述编辑器的位置及宽高，以将调整后的编辑器悬浮在所述单元格上方。
进一步地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述单元格页面的渲染程序被处理器执行时，还实现如下操作：
在所述表格属性为预设类型的表格属性时，基于所述单元格的表格属性获取所述单元格对应的数据模型；
基于所述数据模型以及所述表格属性获取预设的默认值；
根据获取的所述默认值作为所述单元格的默认值。
进一步地，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述单元格页面的渲染程序被处理器执行时，还实现如下操作：
在检测到鼠标离开所述单元格时，将所述单元格设置为焦点失效；
对通过所述编辑器在所述单元格输入的数据进行回填，并更新所述单元格的视图。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (9)

1.一种单元格页面的渲染方法，其特征在于，应用于服务器中，所述单元格页面的渲染方法包括：
服务器获取预设的编辑器以及待处理的表单，其中，所述表单中包括多个单元格；
在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性；
基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染，其中，表单元素包括文本输入框，下拉框，选择框或日期选择框；
其中，所述服务器获取预设的编辑器的步骤包括：
所述服务器在编辑器的初始化入口添加编辑器表单面板；
调用事件代理处理所述编辑器表单面板，以初始化编辑器，并获取所述编辑器。
2.如权利要求1所述的单元格页面的渲染方法，其特征在于，所述服务器获取待处理的表单的步骤包括：
所述服务器获取空表格，并获取待添加至所述空表格中的行列标识；
基于预存的业务数据表，确定行列标识在空表格中的放置位置；
按照确定的放置位置将所述行列标识添加到所述空表格中，以得到表单。
3.如权利要求1所述的单元格页面的渲染方法，其特征在于，所述在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤包括：
在任一单元格所在位置检测到点击事件时，确定所述单元格是否被激活；
若所述单元格未被激活，则执行基于所述编辑器获取所述单元格的表格属性的步骤，其中，在所述单元格被初始化表单元素后，表示所述单元格被激活。
4.如权利要求1所述的单元格页面的渲染方法，其特征在于，所述执行在任一单元格所在位置检测到点击事件时，基于所述编辑器获取所述单元格的表格属性的步骤的同时，执行以下步骤：
确定所述单元格的位置以及宽高；
基于确定的位置和宽高，调整所述编辑器的位置及宽高，以将调整后的编辑器悬浮在所述单元格上方。
5.如权利要求1所述的单元格页面的渲染方法，其特征在于，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述方法还包括：
在所述表格属性为预设类型的表格属性时，基于所述单元格的表格属性获取所述单元格对应的数据模型；
基于所述数据模型以及所述表格属性获取预设的默认值；
根据获取的所述默认值作为所述单元格的默认值。
6.如权利要求1所述的单元格页面的渲染方法，其特征在于，所述基于获取的表格属性对所述单元格进行表单元素的初始化，以实现所述单元格页面的渲染的步骤之后，所述方法还包括：
在检测到鼠标离开所述单元格时，将所述单元格设置为焦点失效；
对通过所述编辑器在所述单元格输入的数据进行回填，并更新所述单元格的视图。
7.如权利要求1-6任一项所述的单元格页面的渲染方法，其特征在于，在表单中未接收到点击事件时，隐藏所述编辑器。
8.一种服务器，其特征在于，所述服务器包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的单元格页面的渲染程序，所述单元格页面的渲染程序被所述处理器执行时实现如权利要求1至7中任一项所述的单元格页面的渲染方法的步骤。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有单元格页面的渲染程序，所述单元格页面的渲染程序被处理器执行时实现如权利要求1至7中任一项所述的单元格页面的渲染方法的步骤。
CN201710315372.7A 2017-05-05 2017-05-05 单元格页面的渲染方法、服务器和计算机可读存储介质 Active CN108804483B (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN201710315372.7A CN108804483B (zh) 2017-05-05 2017-05-05 单元格页面的渲染方法、服务器和计算机可读存储介质
US16/317,030 US20190228062A1 (en) 2017-05-05 2018-02-10 Method, apparatus, and server for rendering a cell page, and readable storage medium
PCT/CN2018/076155 WO2018201773A1 (zh) 2017-05-05 2018-02-10 单元格页面的渲染方法、装置、服务器和可读存储介质
SG11201903206PA SG11201903206PA (en) 2017-05-05 2018-02-10 Method, apparatus, and server for rendering a cell page, and readable storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710315372.7A CN108804483B (zh) 2017-05-05 2017-05-05 单元格页面的渲染方法、服务器和计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN108804483A CN108804483A (zh) 2018-11-13
CN108804483B true CN108804483B (zh) 2020-01-07

Family

ID=64016451

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710315372.7A Active CN108804483B (zh) 2017-05-05 2017-05-05 单元格页面的渲染方法、服务器和计算机可读存储介质

Country Status (4)

Country Link
US (1) US20190228062A1 (zh)
CN (1) CN108804483B (zh)
SG (1) SG11201903206PA (zh)
WO (1) WO2018201773A1 (zh)

Families Citing this family (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107918915B (zh) * 2017-06-25 2022-02-08 平安科技（深圳）有限公司 核保信息处理的装置、方法及计算机可读存储介质
CN111444171B (zh) * 2018-12-28 2023-07-14 航天信息股份有限公司 增值税纳税申报表的生成方法、装置和存储介质
CN109815434A (zh) * 2019-01-18 2019-05-28 深圳壹账通智能科技有限公司 页面编辑方法、装置、设备及存储介质
CN109871500A (zh) * 2019-01-24 2019-06-11 平安科技（深圳）有限公司 页面加载方法、装置、计算机设备和存储介质
CN109857969A (zh) * 2019-01-25 2019-06-07 畅捷通信息技术股份有限公司 数据表格视图处理方法、系统及计算机可读存储介质
CN109871524B (zh) * 2019-02-21 2023-06-09 腾讯科技（深圳）有限公司 一种图表生成方法及装置
CN110765746B (zh) * 2019-10-15 2023-08-15 支付宝(杭州)信息技术有限公司 基于事件代理的表单自动生成方法和系统
CN111240793B (zh) * 2020-02-13 2024-01-09 抖音视界有限公司 cell预渲染的方法、装置、电子设备以及计算机可读介质
CN111476017B (zh) * 2020-06-04 2024-01-30 广东三维家信息科技有限公司 网页表格编辑方法、装置及电子设备
CN111813409A (zh) * 2020-07-02 2020-10-23 上海米哈游天命科技有限公司 一种交互界面的代码生成方法、装置、设备及存储介质
CN112257405A (zh) * 2020-10-22 2021-01-22 深圳前海微众银行股份有限公司 网页表格编辑方法、装置、设备与计算机可读存储介质
CN112099898B (zh) * 2020-11-06 2021-02-09 广州市玄武无线科技股份有限公司 一种基于Web前端的表格处理系统及方法
CN112861481B (zh) * 2021-01-29 2024-01-30 北京尚医智信健康管理有限公司 分页处理的方法、装置、电子设备及计算机可读存储介质
CN112800736B (zh) * 2021-02-04 2022-04-08 杉数科技(北京)有限公司 生成单元格编辑组件的方法、装置、介质及计算机设备
CN114169303A (zh) * 2021-12-14 2022-03-11 平安养老保险股份有限公司 基于vue.js的表格编辑方法、装置、设备及介质
CN114527969B (zh) * 2022-01-25 2023-08-18 孚瑞肯电气(深圳)有限公司 一种可以将列表单元格转换成下拉列表形式输入的方法
CN114741144B (zh) * 2022-03-18 2024-04-09 中银金融科技有限公司 一种web端复杂表格显示方法、装置及系统

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102841791A (zh) * 2012-07-12 2012-12-26 上海高洁信息科技股份有限公司 在线表单的生成方法及系统
CN105335485A (zh) * 2015-10-15 2016-02-17 桂林电子科技大学 一种网页加载方法及网页加载装置
CN105739962A (zh) * 2014-12-12 2016-07-06 金蝶软件（中国）有限公司 基于html的表格单元格编辑器控件扩展方法和系统

Family Cites Families (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7685515B2 (en) * 2003-04-04 2010-03-23 Netsuite, Inc. Facilitating data manipulation in a browser-based user interface of an enterprise business application
US7421649B1 (en) * 2003-04-28 2008-09-02 Adobe Systems Incorporated Enhanced visual table editing
US7934153B2 (en) * 2005-05-06 2011-04-26 Madcap Software, Inc. Visual document structure indicator system
US20070050697A1 (en) * 2005-08-23 2007-03-01 International Business Machines Corporation Integrated spreadsheet expanding table with collapsable columns
US8108763B2 (en) * 2007-01-19 2012-01-31 Constant Contact, Inc. Visual editor for electronic mail
US8938672B2 (en) * 2008-11-04 2015-01-20 International Business Machines Corporation Amending the display property of grid elements
US9600512B2 (en) * 2010-02-25 2017-03-21 Salesforce.Com, Inc. Systems and methods for implementing customized drop-down menus
US8566740B2 (en) * 2010-12-03 2013-10-22 Salesforce.Com, Inc. Interactive data forecasting features for a graphical user interface
CN103164401A (zh) * 2011-12-08 2013-06-19 航天信息软件技术有限公司 页面表格显示方法
US20130167072A1 (en) * 2011-12-22 2013-06-27 Sap Portals Israel Ltd. Smart and Flexible Layout Context Manager
US20150193492A1 (en) * 2012-11-08 2015-07-09 Google Inc. Editing sub-section of an electronic document via notification message
CN103853729B (zh) * 2012-11-29 2019-03-26 腾讯科技（深圳）有限公司 页面加载方法及其系统
US9558171B2 (en) * 2014-09-17 2017-01-31 Sap Se Formatting tables for display on computing devices of varying screen size
US10255263B2 (en) * 2015-05-18 2019-04-09 Workiva Inc. Data storage and retrieval system and method for storing cell coordinates in a computer memory
US10997364B2 (en) * 2015-11-02 2021-05-04 Microsoft Technology Licensing, Llc Operations on sound files associated with cells in spreadsheets
US10229103B2 (en) * 2016-08-25 2019-03-12 Oracle International Corporation Data grid components
US10896192B2 (en) * 2016-09-08 2021-01-19 Salesforce.Com, Inc. Allowing in-line edit to data table of linked data of a data store
US10216494B2 (en) * 2016-12-03 2019-02-26 Thomas STACHURA Spreadsheet-based software application development
US10540153B2 (en) * 2016-12-03 2020-01-21 Thomas STACHURA Spreadsheet-based software application development

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102841791A (zh) * 2012-07-12 2012-12-26 上海高洁信息科技股份有限公司 在线表单的生成方法及系统
CN105739962A (zh) * 2014-12-12 2016-07-06 金蝶软件（中国）有限公司 基于html的表格单元格编辑器控件扩展方法和系统
CN105335485A (zh) * 2015-10-15 2016-02-17 桂林电子科技大学 一种网页加载方法及网页加载装置

Also Published As

Publication number Publication date
WO2018201773A1 (zh) 2018-11-08
US20190228062A1 (en) 2019-07-25
SG11201903206PA (en) 2019-05-30
CN108804483A (zh) 2018-11-13

Similar Documents

Publication Publication Date Title
CN108804483B (zh) 单元格页面的渲染方法、服务器和计算机可读存储介质
CN106843904B (zh) 界面动态布局方法及其系统
CN106775836B (zh) 界面显示方法及界面显示装置
US20170161032A1 (en) Running applications using pre-generated components
CN111488149B (zh) 基于canvas元素的表格渲染方法、装置及计算机设备
CN102043618B (zh) 一种窗口对象显示样式的控制方法及装置
CN110020325B (zh) 页面加载方法、装置、设备及可读存储介质
CN113010252B (zh) 应用页面的展示方法、电子设备及存储介质
US20170235473A1 (en) Method and Apparatus for Loading Application Program View, and Electronic Terminal
WO2015184736A1 (zh) 一种触屏设备背景图变换的方法及终端
CN111068328A (zh) 游戏广告配置表格的生成方法、终端设备及介质
CN104820589A (zh) 一种动态适配网页的方法及其装置
US9619102B2 (en) Method and apparatus for presenting images, mobile terminal and computer storage medium
CN110705243A (zh) web页面表格设置方法、装置、设备及计算机存储介质
CN104021016A (zh) 加载浏览器插件图标的方法及浏览器
CN111737618A (zh) 用于Web端的矢量图显示方法、装置和计算机设备
CN112287257A (zh) 一种页面展示方法、装置、电子设备及存储介质
CN106951227B (zh) 一种更新导航栏的方法和装置
CN112148395A (zh) 页面显示方法、装置、设备及存储介质
CN104954568A (zh) 一种手机字体的动态控制系统及方法
WO2017067459A1 (zh) 一种桌面数据加载方法及装置
CN111639264A (zh) 数据搜索方法、装置、设备与计算机可读存储介质
CN110688037A (zh) 一种控件的显示方法、存储介质及移动终端
CN106375190B (zh) 一种即时通讯软件界面拆分与合并的显示方法及系统
CN109257643B (zh) 一种直播间展示方法、终端设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 1257312

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant