[发明专利]一种实现bookstraptable表格列拖拽的方法

说明书

技术领域

本发明涉及java web技术领域，尤其是一种实现bookstrap table表格列拖拽的方法。

背景技术

现在开发页面的框架中，bootstrap框架已经很受前端开发者的喜爱，而bootstrap table是基于bootstrap的jquery表格插件，为我们前端使用表格展示数据以及查询、排序、分页、列选择等等提供了很大的便利。但是,列的大小一般都是初始化表格时已百分比形式或者固定大小形式写好的，生成表格后，并不能随意的拖拽表格列的宽度。

发明内容

本发明的目的是提供一种实现bookstrap table表格列拖拽的方法，实现了bootstrap table表格列的拖拽，使得用户在使用bootstrap table的过程中，可以随意的拖拽表格列的大小，优化用户的使用体验。。

为实现上述目的，本发明采用下述技术方案：

一种实现bookstrap table表格列拖拽的方法，包括以下步骤：S1、判断鼠标位置是否处于列表内部且距离列表边界距离小于设定值，是，改变鼠标状态为可拖拽状态，转到步骤S2；否，不做处理；

S2、判断鼠标是否按下，是，计算鼠标拖拽距离，转入步骤S3；否，不作处理；

S3、重构列宽度，根据计算的列的宽度，重新给当前拖拽的和相邻的列赋值列宽。

进一步地，所述判断鼠标位置是否处于列表内部且距离列表边界距离小于设定值，包括：获取鼠标拖拽移动的直线距离和当前列表对象宽度，判断当前列表对象宽度减去鼠标拖拽的直线距离之差是否小于设定值。

进一步地，所述改变鼠标状态为可拖拽状态，包括：

S11、判断鼠标当前所在位置列表是否还存在下一个列表对象，如果不存在，不做处理，如果存在，转到步骤S12；

S12、改变鼠标的光标样式。

进一步地，所述判断鼠标是否按下，包括：在每一列中添加鼠标点击和取消点击的监听事件。

进一步地，所述重构列宽度，根据计算的列的宽度，重新给当前拖拽的和相邻的列赋值列宽，包括：

S31、获取当前列表对象宽度数值、相邻下一列表对象宽度数值和拖拽鼠标移动的直线距离；

S32、将当前列表对象宽度数值与拖拽鼠标移动的直线距离之和作为当前列表对象宽度数值最新赋值；

S33、将下一列表对象宽度数值与拖拽鼠标移动的直线距离之差作为下一列表对象宽度数值的最新赋值。

发明内容中提供的效果仅仅是实施例的效果，而不是发明所有的全部效果，上述技术方案中的一个技术方案具有如下优点或有益效果：

本发明修改bootstrap table的源码文件bootstrap table.js，并且考虑浏览器的兼容性问题，基本支持所有的浏览器，实现了bootstrap table表格列的拖拽，使得用户可以自己拖拽table列的列宽，自己定义列的布局和显示，优化用户的页面体验。

附图说明

图1是本发明方法流程示意图。

具体实施方式

为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。

如图1所示，一种实现bookstrap table表格列拖拽的方法，包括以下步骤：

S1、在table列中移动鼠标；

S2、判断鼠标位置是否处于列表内部且距离列表边界距离小于设定值，是，改变鼠标状态为可拖拽状态，转到步骤S3；否，不做处理；

S3、判断鼠标是否按下，是，计算鼠标拖拽距离，转入步骤S4；否，不作处理；

S4、重构列宽度，根据计算的列的宽度，重新给当前拖拽的和相邻的列赋值列宽。

步骤S2中的判断鼠标位置是否处于列表内部且距离列表边界距离小于设定值，包括：获取鼠标拖拽移动的直线距离和当前列表对象宽度，判断当前列表对象宽度减去鼠标拖拽的直线距离之差是否小于设定值，例如4个像素值。

步骤S2中的改变鼠标状态为可拖拽状态，包括：