首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用ag网格在前端更快地加载4000条记录

如何使用ag网格在前端更快地加载4000条记录
EN

Stack Overflow用户
提问于 2017-10-17 09:24:38
回答 1查看 738关注 0票数 0

我使用ag网格行模型类型是企业(服务器端),因为如果我加载所有记录,api响应几乎需要2-3分钟,所以使用服务器端进行分页。

  1. 列标签分组ag网格没有提供任何后端示例来处理这个问题。
  2. 如果我们在客户端加载所有记录,所有ag网格功能都能工作,那么是否有任何方法可以更快地加载记录,包括30列和40000条记录,几乎10 30大小的数据。
EN

回答 1

Stack Overflow用户

发布于 2018-01-10 08:38:51

大多数瓶颈发生在后端(数据库检索)。为了减少慢速的影响,你可以采用我所用的方法。

  1. 增强后端api以支持服务器端分页调用
  2. 重构加载ajax调用以执行小规模调用(例如,前400行)。
  3. 完成第一个加载后,检查是否有更多的记录。如果是,则设置递归加载,直到完成。

现在,用户将“看到”前400行,而它仍然加载其余的3600行。在这里,您需要显示一个加载图标来显示进度。

下面是加载这些代码的示例。

代码语言:javascript
运行
复制
var myList = [];

var loadDataFunc = function( start, limit ) {
        _self.Status.IsLoading = true;

        $http
            .get( DataUrl + "?start=" + start + "&limit=" + limit)
            .then(function(response){

                if( response && response.data && response.data.List) {
                    if( response.data.Total > 0 ) {
                        for( var z = 0; z < response.data.List.length; z++ ) {
                            myList.push(response.data.List[z]);
                        }

                        var currentItemsLoaded = start + response.data.List.length;
                        if( currentItemsLoaded < response.data.Total ) {
                            //means we still have pending to load, then we load again!
                            setTimeout(function(){
                                loadDataFunc(currentItemsLoaded, limit);
                            }, 500);
                        }else {
                            //If it reaches here, it means we have completed loading
                            _self.Status.IsLoading = false;
                            _self.Status.IsLoaded = true;
                        }
                        BindDataToGrid();
                    } else {
                        _self.Status.IsLoading = false;
                        _self.Status.IsLoaded = true;   
                        if( start === 0 ) {
                            BindDataToGrid();
                        }
                    }
                }
                else {
                    _self.Status.IsLoading = false;
                    _self.Status.IsLoaded = true;
                }
            })
            .catch(function(response){
                _self.Status.IsLoading = false;
                //error!
            });
    };      

    function BindDataToGrid () {
        setTimeout(function(){                  
          grid.api.setRowData(myList);
        },100);
    };
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46786811

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档