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

转载请保留本地址 EasyUI 的 datagrid 批量数据插入、批量数据更新的性能问题解决方法_hwjmyz的博客-CSDN博客_datagrip批量添加数据 ，谢谢。

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

用的版本是 EasyUI 1.5

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

经过js的分析，发现是其每次会调用 fixRowHeight 函数来使固定列、冻结列、正常列的高度一致，正是由于这个，才导致了性能的问题。而对于我们所使用的场景来说，文本不折行，不存在高度的问题，所以如果能不做这个高度的处理，既满足需要，又提升性能。

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

        //覆盖掉datagrid的原fixRowHeight函数，以极大的提升批量数据插入、批量数据更新的性能(hwj 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>

hwj 2018年6月14日记录。