Angularjs之ui-grid的滚动Bug问题解决方法

呼延鸿畅

2023-12-01

首先，要吐槽一波。大家在使用UI-Grid的时候也体验到了它的强大之处，但是它也存在很多问题，就连官方API的网站也是一片乱码。

问题1：UI-Grid在使用滚动条的时候，也可以看到，他的样式是:scroll 的，它这样做也是为了固定表头，表格列能够对其，但是这样对于UI来说，怎一个丑字了的。
问题2：Grid表格在加载的时候，使用了resize自适应样式时，加载数据会出现一个250ms的延时，在数据量大或网络慢的情况下，会有一个过渡的表格，看起来就像是一串乱码，这个测试人员提出过这问题，但是暂时没有解决这问题。
问题3：UI-Grid在输入页码时，可以输入小数，好像也去查询了，然而数据范围也变成小数了，这个可以在js文件中直接更改对输入页码的监听 $scope.$watch 事件
```
'grid.options.paginationCurrentPage + grid.options.paginationPageSize'
```
可以在第一个if条件的后面添加一段代码：
```
options.paginationCurrentPage = Math.floor(options.paginationCurrentPage);
```
当然了，在参考了bootstrap-table和layui等其他的表格后，采用他们的思想，直接监听“点”，将“.”去掉，只保留整数。
问题4：就是UI-Grid的滚动问题了，在UI-Grid表格中使用滚轮进行上下滚动时，发现它是没有作用的，这个在网上找了很久没有答案，于是自己就一点慢慢的查找原因，在js的增加了一个return就可以使用了。在js中找到gridUtil.on.mousewheel这句代码，在里面直接return掉，不让它往下运行。这样你的滚动就能使用了。