本发明涉及web前端设计的
技术领域：
：，尤其涉及一种基于web前端的表格处理系统及方法。
背景技术：
：：web客户端用于展示更多信息可以帮助企业更快速准确的查找到目标信息，更加灵活的数据展示模型更有利于对有效信息的搜索，加快获取的速度，从而提高工作效率。特别的，tob行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，对表格的展示方式也变得多样，表格的列单元格展示的内容除了传统的文本外，还需要展示图片、超链接、表单控件等，展现方式上还有动态行高、合并表头、固定表头、固定列、虚拟滚动等，然而现有技术中的web技术依赖于浏览器渲染的性能，表格在实现一些特殊功能时，会出现如下问题：1、现有的表格实现动态行高和左右固定列的渲染方法是让相同的表格渲染三次，才能解决动态行高固定列与原表格的对齐问题，时间复杂度和空间复杂度为o(3n*m)(n代表表格行数，m代表表格的列数)，导致表格渲染成本很高。2、使用现有表格在行数据基数大时，浏览器持续占用大量内存，导致渲染性能下降，页面卡顿，在性能较差的设备中还会引发web页面崩溃的问题。技术实现要素：本发明目的在于，提供一种基于web前端的表格处理系统及方法，通过结合html技术和css技术，设计一种可以控制固定列的行高的table模型，并增加收集及监听行高变化的监听器，处理表格行列的行对齐问题，降低了渲染节点的时间复杂度和空间复杂度。为实现上述目的，本发明实施例提供一种基于web前端的表格处理系统，其特征在于，包括：html表格模块；所述html表格模块包括左侧固定列表格模块、右侧固定列表格模块和主表格模块，所述html表格模块还包括table元素、tr元素和td元素；其中，所述tr元素用于定义表格的行，所述td元素用于定义表格的单元格，若所述tr元素不设置固定的行高度，所述tr元素的高度由所述td元素决定；所述html表格模块还包括更新模块，所述更新模块包括表格控制器类tablectrl和观察者类rowobserver；所述左侧固定列表格模块、所述右侧固定列表格模块和所述主表格模块分别用于插入两列代理列模块；若检测到所述tr元素高度发生变化，获取对应的高度变化值，并将所述高度变化值赋值给所述代理列模块中的所述td元素，所述表格控制器类tablectrl用于查找所述高度变化值，所述观察者类rowobserver用于更新当前所在行的所述代理列模块的高度，完成动态行高和固定列同步更新。优选地，所述代理列模块中的所述单元格的td元素包括.proxy子元素，所述.proxy子元素用于同步非自身代理列模块的相同行的高度属性，完成动态行高与固定列并存的表格。优选地，所述观察者类rowobserver包括trigger()函数接口，所述trigger()函数接口用于更新当前行代理列单元格的高度，完成所述左侧固定列表格模块、所述右侧固定列表格模块和所述主表格模块的行高度同步更新。优选地，所述表格控制器类tablectrl包括函数参数rowindex，用于查找所述高度变化值。优选地，所述html表格模块还包括div元素，所述div元素用于计算所述html表格模块的目标区域。本发明实施例还提供一种基于web前端的表格处理方法，其特征在于，应用于上一实施例中任一项所述的基于web前端的表格处理系统，所述方法包括：根据所述html表格模块的第n行所添加新的内容，检测到所述tr元素高度发生变化，获得对应的高度变化值；根据所述表格控制器类tablectrl查找所述高度变化值；根据所述观察者类rowobserver更新当前所在行的所述代理列模块的高度，完成动态行高和固定列同步更新。优选地，所述根据所述表格控制器类tablectrl查找所述高度变化值，包括：调用所述表格控制器类tablectrl；其中，所述表格控制器类tablectrl包括函数参数rowindex，用于查找所述高度变化值。优选地，所述根据所述观察者类rowobserver更新当前所在行的所述代理列模块的高度，完成动态行高和固定列同步更新，包括：调用所述观察者类rowobserver的trigger()函数接口，所述trigger()函数接口用于更新当前行代理列单元格的高度，完成所述左侧固定列表格模块、所述右侧固定列表格模块和所述主表格模块的行高度同步更新。优选地，所述根据所述观察者类rowobserver更新当前所在行的所述代理列模块的高度，完成动态行高和固定列同步更新，还包括：采用所述代理列模块中的所述单元格的td元素包括.proxy子元素，所述.proxy子元素用于同步非自身代理列模块的相同行的高度属性，完成动态行高与固定列并存的表格。优选地，所述同步非自身代理列模块的相同行的高度属性，包括：获取所述html表格模块第n行的行高，把所述html表格模块第n行的行高赋值给所述.proxy子元素，修改所述.proxy子元素，使其撑开行高，完成动态行高和固定列同步更新。本发明实施例的有点在于，通过结合html技术和css技术，设计一种可以控制固定列的行高的table模型，并增加收集及监听行高变化的监听器，处理表格行列的行对齐问题，降低了渲染节点的时间复杂度和空间复杂度。附图说明为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本发明某一实施例提供的一种基于web前端的表格处理系统的结构图；图2是本发明另一实施例提供的一种基于web前端的表格处理系统的结构图；图3是本发明又一实施例提供的一种基于web前端的表格处理方法的流程示意图。具体实施方式下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。请参阅图1，本发明实施例提供一种基于web前端的表格处理系统，包括：html表格模块1，html表格模块1包括左侧固定列表格模块11、右侧固定列表格模块13和主表格模块12，html表格模块1还包括table元素、tr元素和td元素；其中，tr元素用于定义表格的行，td元素用于定义表格的单元格，若tr元素不设置固定的行高度，tr元素的高度由td元素决定，html表格模块1还包括更新模块，更新模块包括表格控制器类tablectrl和观察者类rowobserver，左侧固定列表格模块11、右侧固定列表格模块13和主表格模块12分别用于插入两列代理列模块110，若检测到tr元素高度发生变化，获取对应的高度变化值，并将高度变化值赋值给所述代理列模块110中的所述td元素，表格控制器类tablectrl用于查找所述高度变化值，观察者类rowobserver用于更新当前所在行的代理列模块110的高度，完成动态行高和固定列同步更新。请参照图1和图2，在具体的实施例中，通过结合html技术和css技术，css技术是一种用来表现html或xml等文件式样的计算机语言。本发明使用html基于table元素、tr元素、td元素实现表格的结构和样式。左侧固定列表格模块11首行代理主表格模块列td元素.proxy子元素(即元素路径:.table-absolute-left.row-1.proxy-main.proxy)用于同步主表格模块12的高度，主表格模块12首行代理左侧固定列表格模块11td元素.proxy子元素(即元素路径:.table-main.row-1.proxy-left.proxy)用于同步左侧固定列表格模块11。基于这种代理同步的结构机制，剩下只需要去实现当tr元素高度变化时，把自身的高度赋值给代理td元素，当主表格模块12单元的内容高度增加时，固定列表格对应的代理行高元素需要响应式高度也会增加，最终实现高性能动态行高与固定列并存的表格。使用javascript技术，设计一个更新整个表格格行行高的管理器，处理表格行与固定列的行对齐问题，具体的，使用javascript技术实现一个表格控制器类tablectrl和一个观察者类rowobserver，用于实现在处理当tr元素高度变化时，把自身的高度赋值给代理td元素，既可以实现动态行高与固定列并存的问题。rowobserver对外暴露一个trigger()函数接口，该接口的功能是更新当前行代理列模块110单元格的高度，用在外部行为对表格改行单元内容进行更新操作调用该接口方法，更新代理列模块110单元格的高度，从而让左侧固定列表格模块11和右侧固定列表格模块13的行与主表格模块12的行高度同步更新，实现动态行高。tablectrl负责创建管理及销毁表格每一个行的rowobserver，维护整个表格的生命周期同时可以代理每一个rowobserver的trigger()对象，暴露一个trigger(rowindex)方法这样外部接口方法更新表格行高时只需要取得tablectrl的实例对象即可更新表格任意行的行高。在另一实施例中，代理列模块110中的单元格的td元素包括.proxy子元素，所述.proxy子元素用于同步非自身代理列模块110的相同行的高度属性，完成动态行高与固定列并存的表格。在具体的实施例中，利用td元素与tr元素的特性同步主表格模块12的行高与左侧固定列表格模块11、右侧固定列表格模块13的行高，在tr元素不设置固定的高度的情况下，tr元素的高度由自己在子元素td元素决定高度，本发明给左侧固定列表格模块11、右侧固定列表格模块13与主表格模块12插入两列代理列模块110，每个代理列模块110的单元格td元素内加入一个.proxy子元素去代理除自己以外另外两个表格模块相同行的高度属性。在又一实施例中，观察者类rowobserver包括trigger()函数接口，trigger()函数接口用于更新当前行代理列单元格的高度，完成左侧固定列表格模块11、右侧固定列表格模块13和主表格模块12的行高度同步更新。在具体的实施例中，rowobserver对外暴露一个trigger()函数接口，该接口的功能是更新当前行代理列模块110单元格的高度，用在外部行为对表格改行单元内容进行更新操作调用该接口方法，更新代理列模块110单元格的高度，从而让左侧固定列表格模块11和右侧固定列表格模块13的行与主表格模块12的行高度同步更新，实现动态行高。在另一实施例中，表格控制器类tablectrl用于查找所述高度变化值，具体通过：调用表格控制器类tablectrl。其中，表格控制器类tablectrl包括函数参数rowindex，用于查找高度变化值。而观察者类rowobserver用于更新当前所在行的代理列模块的高度，具体通过：采用代理列模块110中的单元格的td元素包括.proxy子元素，同步非自身代理列模块110的相同行的高度属性，完成动态行高与固定列并存的表格。在具体的实施例中，rowobserver负责管理指定表格行的高度，其构造函数参数rowindex由tablectrl提供，从而查找左侧固定列表格模块11、右侧固定列表格模块13和主表格模块12第n行的代理td元素的元素对象作为该类的成员变量值。tablectrl负责创建管理及销毁表格每一个行的rowobserver，维护整个表格的生命周期同时可以代理每一个rowobserver的trigger()对象，暴露一个trigger(rowindex)方法这样外部接口方法更新表格行高时只需要取得tablectrl的实例对象即可更新表格任意行的行高。在另一实施例中，html表格模块1还包括div元素，div元素用于计算html表格模块1的目标区域。在具体的实施例中，目标区域为div定义文档中的分区或节，还可以用作严格的组织工具，并且不使用任何格式与其关联，具体的，通过div元素实现表格能避免table元素在浏览器引擎上的默认约束，更灵活自由的实现用户需要的展示效果，div元素更容易计算出可见区域，目标区域的边界值，结合不同盒子模型特性能高效实现复杂表格的dom节点的渲染能力，性能和效率更高。div元素能避免table元素模拟的固定列功能在行列宽高计算的工作量，通过有效的算法仅仅控制列宽计算就完成展示一致，性能更高的表格固定列效果。本发明实施例提供一种基于web前端的表格处理系统，优点在于，通过结合html技术和css技术，设计一种可以控制固定列的行高的table模型，并增加收集及监听行高变化的监听器，处理表格行列的行对齐问题，降低了渲染节点的时间复杂度和空间复杂度。请参照图3，本发明实施例提供一种基于web前端的表格处理方法，应用于上述任一实施例中的基于web前端的表格处理系统，所述方法包括：s101、根据html表格模块的第n行所添加新的内容，检测到所述tr元素高度发生变化，获得对应的高度变化值。s102、根据表格控制器类tablectrl查找所述高度变化值。在具体的实施例中，rowobserver负责管理指定表格行的高度，其构造函数参数rowindex由tablectrl提供，调用表格控制器类tablectrl；其中，表格控制器类tablectrl包括函数参数rowindex，从而查找左侧固定列表格模块、右侧固定列表格模块和主表格模块第n行的代理td元素的元素对象作为该类的成员变量值。调用表格控制器类tablectrl；其中，表格控制器类tablectrl包括函数参数rowindex，用于查找高度变化值。tablectrl负责创建管理及销毁表格每一个行的rowobserver，维护整个表格的生命周期同时可以代理每一个rowobserver的trigger()对象，调用观察者类rowobserver的trigger()函数接口，trigger()函数接口用于更新当前行代理列单元格的高度，完成所述左侧固定列表格模块11、右侧固定列表格模块13和主表格模块12的行高度同步更新。trigger(rowindex)外部接口方法更新表格行高时只需要取得tablectrl的实例对象即可更新表格任意行的行高。s103、根据观察者类rowobserver更新当前所在行的代理列模块的高度，完成动态行高和固定列同步更新。在具体的实施例中，代理列模块中的单元格的td元素包括.proxy子元素，同步非自身代理列模块的相同行的高度属性，完成动态行高与固定列并存的表格。获取html表格模块第n行的行高，把html表格模块第n行的行高赋值给.proxy子元素，修改.proxy子元素，使其撑开行高，完成动态行高和固定列同步更新。本发明优点在于，通过结合html技术和css技术，设计一种可以控制固定列的行高的table模型，并增加收集及监听行高变化的监听器，处理表格行列的行对齐问题，降低了渲染节点的时间复杂度和空间复杂度。以上所述是本发明的优选实施方式，应当指出，对于本
技术领域：
：的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。当前第1页12当前第1页12