本发明涉及数据处理，尤其涉及一种基于dom模拟实现table级联滚动的方法、装置及电子设备。
背景技术：
：：1、表格（table）的级联滚动通常依赖于javascript直接操作dom来实现，这种方法虽然在功能上能够满足需求，但存在一些主要缺陷：2、1.传统方法依赖于直接操作dom来实现滚动效果，每次滚动事件发生时，都会进行大量的dom查询和更新操作。这种操作非常消耗性能，因为浏览器需要频繁地进行布局计算和页面重绘。3、2.在没有应用虚拟滚动或虚拟dom技术的情况下，表格渲染必须处理和显示所有的数据行，而不是仅仅渲染用户可见的部分。这种全量渲染方式导致了不必要的性能负担，特别是在处理大量数据时。4、3.为了实现多个表格区域（如固定的表头、列）的同步滚动，需要复杂的事件监听和坐标计算。这不仅增加了实现的复杂性，也增加了运行时的计算负担。5、上述问题成为需要解决的技术问题。技术实现思路1、有鉴于此，本发明实施例提供一种基于dom模拟实现table级联滚动的方法、装置及电子设备，至少部分解决现有技术中存在的问题。2、第一方面，本发明实施例提供了一种基于dom模拟实现table级联滚动的方法，包括：3、设置数据结构来模拟表格的dom结构，所述数据结构包括行、列和单元格信息，以及行、列和单元格的位置、大小和样式属性，根据表格的数据源初始化虚拟dom，将数据映射到虚拟dom的结构中，为每一行、每一列和每个单元格创建虚拟节点；4、依据表格容器的尺寸和滚动位置，计算当前的可视区域，根据可视区域，从虚拟dom中选择相应的节点，只有当节点进入可视区域时，才将其渲染为实际的dom元素；5、在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点；6、使用差异化算法比较更新前后的虚拟dom，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的dom操作来更新用户界面。7、根据本公开实施例的一种具体实现方式，所述根据差异化比较结果，执行最小必要的dom操作来更新用户界面之后，所述方法还包括：8、使用节流和防抖技术来优化事件处理函数的执行；9、定期清理不再需要的虚拟dom节点和相关资源；10、实施性能监控，识别和解决渲染过程中的瓶颈，确保滚动操作的流畅性。11、根据本公开实施例的一种具体实现方式，所述设置数据结构来模拟表格的dom结构，包括：12、定义table表示整个表格的数据结构，包含行、列以及全局样式属性；13、定义row表示表格中的一行，包含单元格的列表以及该行的位置、大小和样式属性；14、定义column表示表格中的一列，包含该列的位置、大小和样式属性；15、定义cell表示一个单元格，包含单元格的内容、位置、大小和样式属性，单元格链接到行和列的数据结构，用于定位和样式计算。16、根据本公开实施例的一种具体实现方式，所述设置数据结构来模拟表格的dom结构，包括：17、根据数据源的大小和结构，创建一个虚拟的table节点，table节点包含全局样式属性；18、对于数据源中的每一行，创建一个虚拟的row节点，并设置其位置、大小和样式属性；19、对于row中的每一个数据项，创建一个虚拟的cell节点，cell节点包含单元格的内容、位置、大小和样式属性，当数据项是嵌套结构时，通过递归方式创建子cell节点；20、将创建的cell节点添加到对应的row节点中，并将row节点添加到table节点中。21、根据本公开实施例的一种具体实现方式，所述依据表格容器的尺寸和滚动位置，计算当前的可视区域，根据可视区域，从虚拟dom中选择相应的节点，包括：22、需要获取表格容器的尺寸，所述尺寸包括容器的宽度和高度，通过查询容器的滚动偏移量，确定容器的滚动位置，结合容器的尺寸和滚动位置，计算出当前的可视区域；23、遍历虚拟dom中的行或单元格节点，对于每个节点，根据其在虚拟dom中的位置信息，计算出其在容器中的实际位置，将节点的位置与可视区域进行比较，判断节点是否在当前的可视区域内；24、对于进入可视区域的节点，创建或更新对应的实际dom元素，将虚拟节点的样式和内容应用到实际的dom元素上，对于离开可视区域的节点，回收或隐藏其对应的实际dom元素。25、根据本公开实施例的一种具体实现方式，所述在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点，包括：26、要确定表格的父容器元素，所述父容器元素为滚动事件监听器要附加的对象，在父容器上添加一个滚动事件监听器，当父容器发生滚动时，监听器被触发；27、当滚动事件被触发时，监听器获取到当前的滚动偏移量，根据滚动偏移量，计算发生在垂直方向和水平方向的滚动量。28、根据本公开实施例的一种具体实现方式，所述在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点，包括：29、利用滚动偏移量和父容器的尺寸，重新计算当前的可视区域，可视区域是父容器内当前可见的部分；30、基于新的可视区域，更新虚拟dom中哪些节点应该被渲染为实际的dom元素；31、根据父容器的滚动偏移量，计算同步滚动部分的新位置，更新虚拟dom中对应同步滚动部分的节点，以反映虚拟dom中对应同步滚动部分的节点的新位置。32、根据本公开实施例的一种具体实现方式，所述使用差异化算法比较更新前后的虚拟dom，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的dom操作来更新用户界面，包括：33、将更新前的虚拟dom树与更新后的虚拟dom树进行结构上的比较，对于每一对比较的节点，检查它们的类型是否相同，如果节点类型不同，删除旧节点并添加新节点，如果节点类型相同，则比较节点的属性，检查哪些属性被添加、删除或修改；34、对于新树中存在但旧树中不存在的节点，将其添加到dom中，对于旧树中存在但新树中不存在的节点，将其从dom中删除，对于类型相同但属性或子节点有变化的节点，更新dom中的对应节点；35、根据新树和旧树的比较，生成一个差异化比较结果，该比较结果描述了需要进行的添加、删除、更新和移动操作，根据差异化比较结果，只修改真正需要改变的节点，而不重新渲染整个页面或容器。36、第二方面，本发明实施例提供了一种基于dom模拟实现table级联滚动的装置，包括：37、设置模块，设置数据结构来模拟表格的dom结构，所述数据结构包括行、列和单元格信息，以及行、列和单元格的位置、大小和样式属性，根据表格的数据源初始化虚拟dom，将数据映射到虚拟dom的结构中，为每一行、每一列和每个单元格创建虚拟节点；38、计算模块，依据表格容器的尺寸和滚动位置，计算当前的可视区域，根据可视区域，从虚拟dom中选择相应的节点，只有当节点进入可视区域时，才将其渲染为实际的dom元素；39、更新模块，在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点；40、执行模块，使用差异化算法比较更新前后的虚拟dom，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的dom操作来更新用户界面。41、第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：42、至少一个处理器；以及，43、与该至少一个处理器通信连接的存储器；其中，44、该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的基于dom模拟实现table级联滚动的方法。45、第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的基于dom模拟实现table级联滚动的方法。46、第五方面，本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的基于dom模拟实现table级联滚动的方法。47、本发明实施例中的基于dom模拟实现table级联滚动的方案，包括：设置数据结构来模拟表格的dom结构，所述数据结构包括行、列和单元格信息，以及行、列和单元格的位置、大小和样式属性，根据表格的数据源初始化虚拟dom，将数据映射到虚拟dom的结构中，为每一行、每一列和每个单元格创建虚拟节点；依据表格容器的尺寸和滚动位置，计算当前的可视区域，根据可视区域，从虚拟dom中选择相应的节点，只有当节点进入可视区域时，才将其渲染为实际的dom元素；在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点；使用差异化算法比较更新前后的虚拟dom，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的dom操作来更新用户界面。本方案能够显著提高大数据量表格的渲染和滚动性能，简化实现复杂度，同时保证跨浏览器的兼容性。当前第1页12当前第1页12
技术特征：1.一种基于dom模拟实现table级联滚动的方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述根据差异化比较结果，执行最小必要的dom操作来更新用户界面之后，所述方法还包括：
3.根据权利要求2所述的方法，其特征在于，所述设置数据结构来模拟表格的dom结构，包括：
4.根据权利要求3所述的方法，其特征在于，所述设置数据结构来模拟表格的dom结构，包括：
5.根据权利要求4所述的方法，其特征在于，所述依据表格容器的尺寸和滚动位置，计算当前的可视区域，根据可视区域，从虚拟dom中选择相应的节点，包括：
6.根据权利要求5所述的方法，其特征在于，所述在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点，包括：
7.根据权利要求6所述的方法，其特征在于，所述在表格的父容器上设置滚动事件的监听器，当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟dom的可视区域，对于需要同步滚动的表格部分，根据滚动偏移量计算它们的新位置，并更新相应的虚拟dom节点，包括：
8.根据权利要求7所述的方法，其特征在于，所述使用差异化算法比较更新前后的虚拟dom，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的dom操作来更新用户界面，包括：
9.一种基于dom模拟实现table级联滚动的装置，其特征在于，包括：
10.一种电子设备，其特征在于，所述电子设备包括：
技术总结本发明实施例中提供了一种基于dom模拟实现Table级联滚动的方法、装置及电子设备，属于数据处理技术领域，该方法包括：设置数据结构来模拟表格的DOM结构；依据表格容器的尺寸和滚动位置，计算当前的可视区域；当滚动事件触发时，计算滚动的偏移量，所述偏移量将用于更新虚拟DOM的可视区域；使用差异化算法比较更新前后的虚拟DOM，确定需要被添加、删除或更新的节点，进而生成差异化比较结果，根据差异化比较结果，执行最小必要的DOM操作来更新用户界面。本方案能够显著提高大数据量表格的渲染和滚动性能，简化实现复杂度，同时保证跨浏览器的兼容性。
技术研发人员：周少博,荆岩瑞,李蕾,苗宇
受保护的技术使用者：一网互通（北京）科技有限公司
技术研发日：技术公布日：2024/6/26
