[发明专利]在不同尺寸屏幕下页面表格操作列吸顶的方法

说明书

本发明涉及计算机表格显示技术领域，特别涉及在不同尺寸屏幕下页面表格操作列吸顶的方法，准备好两个表格标签，表格A和表格B，表格A按正常的表格数据渲染出来，包括操作列渲染，给表格A的父级元素添加CSS属性，表格B只渲染表格A中的操作列数据，并添加CSS属性，表格B与表格A作为兄弟元素。与现有技术相比，本发明的在不同尺寸屏幕下页面表格操作列吸顶的方法减少了用户的拖动横向滚动条操作，在不同尺寸的屏幕也可以轻松的操作列表数据，提高了用户体验，添加的CSS类名比较简单易维护，减少了开发成本，兼容项目的表格UI风格，提高了页面美观性和统一性，减小项目的大小，做到小巧精致。

【技术领域】

本发明涉及计算机表格显示技术领域，特别涉及在不同尺寸屏幕下页面表格操作列吸顶的方法。

【背景技术】

计算机显示表格时，有些页面的表格最右边会有用来执行删除、修改记录等操作的操作列，如果表格宽度过长，即一整个屏幕看不完一条记录的话，显示底部会出现横向滚动条，此时操作列会被隐藏掉，每次想要操作的话需要拖动横向滚动条到最右边才能找到操作列进行操作，可想而知这样的用户体验很不好，用户操作起来很不方便。

现有技术中的Element-ui的UI框架中Table组件可以支持表格的操作列悬浮，但是这样的话项目需要额外引入Element-ui框架，这样做的话不仅增加项目的大小使得项目臃肿，而且Element-ui的UI风格往往还会跟本项目UI风格不兼容，需要重新修改Element-ui本身的风格，这样就增加了开发成本。

【发明内容】

为了克服上述问题，本发明提出一种可有效解决上述问题的在不同尺寸屏幕下页面表格操作列吸顶的方法。

本发明解决上述技术问题提供的一种技术方案是：提供一种在不同尺寸屏幕下页面表格操作列吸顶的方法，包括如下步骤：

步骤S1，准备好两个表格标签，表格A和表格B；

步骤S2，表格A按正常的表格数据渲染出来，包括操作列渲染；

步骤S3，给表格A的父级元素添加CSS属性：position:relative；

步骤S4，表格B只渲染表格A中的操作列数据，并添加CSS属性：position:absolute；right:0px；top:0px；

步骤S5，表格B与表格A作为兄弟元素。

优选地，所述步骤S2中，浏览器渲染表格A数据的过程，包括如下步骤：

步骤S21，采用HTML和JavaScript语言对文档对象模型进行编程，文档对象模型(Document Object Model)，当网页被加载时，浏览器会创建页面的文档对象模型；

步骤S22，采用CSS和JavaScript语言对CSS对象模型进行编程，CSS对象模型(CSSObject Model)，是对CSS样式表的对象化表示；

步骤S23，文档对象模型和CSS对象模型进入渲染树进行数据渲染；

步骤S24，进入页面元素外层进行绘画。

优选地，所述步骤S4中，表格B只渲染表格A中的操作列，使得实际上表格B数据是表格A的数据中的操作列数据。

优选地，所述步骤S5中，将表格B与表格A放入同一个父级元素标签内，使表格B与表格A成为兄弟元素。

与现有技术相比，本发明的在不同尺寸屏幕下页面表格操作列吸顶的方法减少了用户的拖动横向滚动条操作，在不同尺寸的屏幕也可以轻松的操作列表数据，提高了用户体验；添加的CSS类名比较简单易维护，减少了开发成本；兼容项目的表格UI风格，提高了页面美观性和统一性；减小项目的大小，做到小巧精致。

【附图说明】