[编程笔记] EasyUI datagrid scrollTo 定位不准问题
公司产品用的前端框架是EasyUI,某个单据列表使用的虚拟分页,通过datagrid-scrollview.js来实现的,效果如图:
很简单的一个功能,现在有一个需求,点击其中某一行进入明细页后,再返回到这个列表页时,要求停留在之前点击的这行,并选中。
很快我就想到一个方法,点击明细行时,记录点击的行号,存到sessionStorage,返回时,在页面加载完数据后,读取行号,然后通过scrollTo滑动到这行。
功能实现了,但是有个问题,一页60条,如果点击的是47条,这个滑动会多滑一点,导致47行显示不出来。
这个bug跟datagrid-scrollview.js的分页机制有关,滑到47行时,已经满足处触发第2页的条件了,datagrid-scrollview.js加载了第二页的数据,这个滑动渲染是有点bug的。
怎么解决呢?
方法1没用,滑动滑多了,选中行也看不到;方法2,项目里用的虚拟分页,滑动的时候本身就会翻页;方法3自己算,是有点麻烦的。
我的方法是:分多段滑动,先滑动一段,再滑动一段。
尝试了一下后,果然解决了问题,之所以想到多段滑动,原因是这个bug仅存在靠近偶数页,即要分页的地方,datagrid-scrollview.js并不能很好的处理靠近分页的滑动,总是差那么一点,既然差那么一点,那我就补那么一点,我第一段滑一下,后续再滑到定位的行,如果我第一段滑少或者滑多都不要紧,下一段会滑到最终的行,无非就是第二段往上滑或者往下滑。
这里我用的是分2段,落地到项目后,如果仍有bug,可以划分为更多段,原理就是每次我滑动一点点,一点点,越来越靠近目标行,基本不会有问题,如果仍有类似临界点这种bug,可以计算一下,避免出现这种情况。
以上。