EasyUI 的 datagrid 批量数据插入、批量数据更新的性能问题解决方法

转载请保留本地址 https://blog.csdn.net/hwjmyz/article/details/80690612 ,谢谢。

在我们的LIMS系统开发中,发现对 datagrid 中批量插入500行以上数据,或者用 updateRow 进行批量的更新时,性能特别慢(500条需要10秒左右)。

用的版本是 EasyUI 1.5

首先百度了一圈,根据其上的信息,使用 autoRowHeight:false 、nowrap:true、fitColumns:false、每列设置宽度等方法,仍然解决不了问题。

经过js的分析,发现是其每次会调用 fixRowHeight 函数来使固定列、冻结列、正常列的高度一致,而对于我们所使用的场景来说,文本不折行,不存在高度的问题,正是由于这个,才导致了性能的问题。

由于项目很多页面都在使用 datagrid,有的页面是要有自动折行等特性的 ,我们不能采用侵入式方法来去修改easyUI本身的代码,因此采用定义扩展方法覆盖的方式,即在需要进行批量插入和更新的页面中,加入如下脚本:

        //覆盖掉datagrid的原fixRowHeight函数,以极大的提升批量数据插入、批量数据更新的性能(黄万景20180614)

        $.extend($.fn.datagrid.methods, {  
            fixRowHeight : function() {  
                return;   // 什么都不做,这样避免了性能问题,适用于文本不自动折行的grid
            }  

        });  

按如上方式处理后,500条记录的时间从原先的10秒变为了1秒。


另外,在数据量大的时候使用可编辑网格 edatagrid 时,每行进入编辑时也会比较慢,在 editor 中的 options 里增加 doSize:false 属性后可稍微快一点(快三分之一左右吧),例如:

<th data-options="field:'sampleNo', width:150, align:'center',editor:{type:'textbox' , options:{doSize:false}}">样品编号</th>

黄万景 2018年6月14日记录。


阅读更多
文章标签: EasyUI
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭