![fe34f620b2f30332ef23cd22f382912e.png](https://i-blog.csdnimg.cn/blog_migrate/fc3595ff754e311e5ebc5cd404deb10e.jpeg)
先上最终效果图
![8fb941929ca72784250db09ba316644d.png](https://i-blog.csdnimg.cn/blog_migrate/772c956feba3a3fcfa9fd302a6e80b04.jpeg)
拖拽式表格是如何设计的?
我想大家可能对拖拽式表单,拖拽式图表有所了解过。
如这样:
![9187e7a401314af73f5949527af8ab30.png](https://i-blog.csdnimg.cn/blog_migrate/edce798bd818206b11adabd2ac90be89.jpeg)
或者是这样的
![16f5f1643b9f92dd712039188947f8f0.png](https://i-blog.csdnimg.cn/blog_migrate/7e202135cd44d3935d6b6a55a39addb5.jpeg)
那么拖拽式表格到底是什么样的呢,我们来看看设计页面!
![337ebcdfa18e623cbbf01bae5c744f71.png](https://i-blog.csdnimg.cn/blog_migrate/d87615364a9f592eeef0ad3ac640e936.jpeg)
实现一个拖拽式表格需要哪些功能?
其实不难看出,拖拽模式下的产物往往离不开以下几个功能:
- 拖拽(这里使用h5的drag)
- 组件(控件)的数据源
- 拖拽时的渲染方式
- 撤销与恢复(方便我们设计表格)
拖拽式表格的核心功能点如下:
- 组件分为统计字段与统计类型(核心在此)
- 支持合并列与合并行
- 支持合计
- 支持小计
总结就是对表格想怎么玩就怎么玩
如何制作拖拽式表格?
![79a6d87a65b439d7e65aee9fb8df5542.png](https://i-blog.csdnimg.cn/blog_migrate/04a8316a7d97f8f43f0e511e45cd884e.jpeg)
最开始的设计页
表格,不管它是拖拽式啥的,它最终展现形式也只是表格。既然是表格,那么肯定就有x轴与y轴的概念,这里x轴与y轴相对应的是水平轴与纵向轴。
什么是统计字段组件?我们把统计字段当作列头(x轴)与行头(y轴)来看,看图容易理解一些,如下:
![797dcb37125f3409e407ccd5c0cff4d2.png](https://i-blog.csdnimg.cn/blog_migrate/e14ea3653693d777ad553b393a1d5c42.jpeg)
拖拽时的页面效果
当我们拖拽民族把鼠标放到水平轴统计字段(x轴)时就渲染数据
![1bf29852df805dbcd2237f2af637ae75.png](https://i-blog.csdnimg.cn/blog_migrate/d2bd7a62e211f3c8a806ccc1fd59512f.jpeg)
x轴渲染后的效果
接着统计操作渲染纵向轴统计字段(y轴)
![cbb1fc3f87945adad82dc296ac21b4bd.png](https://i-blog.csdnimg.cn/blog_migrate/baf4b704ffcec2e17d44af09f63de761.jpeg)
拖拽时的页面效果
![0c844bf8d1ee86a18a4a07b9f39e1d86.png](https://i-blog.csdnimg.cn/blog_migrate/d3eff23fc961ddbfe280cfed1fbd134b.jpeg)
y轴渲染后的效果
什么是统计类型组件?接下来我们肯定要进行数据的展示了,这时候就用到了我们的统计类型组件(z轴可能不太准确)
![239450ad783f46db52aca30ce866154e.png](https://i-blog.csdnimg.cn/blog_migrate/1e7daaf85c36c0dab772d7a4b67194d2.jpeg)
拖拽时的页面效果
![a5f55dd0788e06540775d2ef5fe87be5.png](https://i-blog.csdnimg.cn/blog_migrate/84103fa303fb8354f23d9d747199301e.jpeg)
统计类型渲染后的效果
此时一张简单的表格已经通过我们拖拽的配置完成啦
![c16ce00870767d58d5ead1808de9134e.png](https://i-blog.csdnimg.cn/blog_migrate/bf9c7896370c75dfd64bb0425c55acfe.jpeg)
最终效果图
细心的同学会发现(性别)也被蓝框给圈住了,那是因为统计类型也可以直接作用与y轴,如下图:
![5aada6054a1af1650008a1149cc08904.png](https://i-blog.csdnimg.cn/blog_migrate/31f38ebbfa132bf472a3db85c918f9f3.jpeg)
统计类型作用于y轴
技术总结
- 拖拽时的遮盖层(蓝色框)是通过获取x或y轴的第一个元素和最后一个元素的位置得到的(一开始拖拽组件时通过闪烁td标签来定义范围,性能低)
- 实现撤销与恢复的算法(只是通过按键操作)
最后的最后,第一次写博客,希望自己能坚持下去吧!
我不去想是否能够成功
既然选择了远方
便只顾风雨