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

本文探讨了UI-Grid在使用过程中遇到的四大问题,包括滚动条样式不佳、加载延迟、页码输入异常及滚动功能失效,并提出了针对性的改进措施。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,要吐槽一波。大家在使用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掉,不让它往下运行。这样你的滚动就能使用了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值