ng-table dataset 模式 渐进式渲染

Posted 2021-01-05 liboo

有大批量的数据需要在列表中单页显示，如果数据全部加载完毕后一次性渲染到界面会出现页面一直空白或者状态切换响应半天，这不是一个好的用户体验；正因为如此，采用渐进式渲染的思想，设置数据以一定的粒度进行渲染，会看到页面上的数据在瀑布式的加载，不至于让用户看着白屏或者一直等待跳转响应，从感官上告诉用户数据量比较大并且正在加载中；因为是单页显示所有的数据，只需要请求后台一次，使用NgTable 的dataset 模式渲染列表，排序、过滤、分页就可以在客户端实现，业务中不需要分页，并且搜索为多层次只能请求服务端实现，这里只用到客户端排序功能。

 # 渐进式渲染

function renderDataset(tableParams,data,size){
    //没有数据了则不再处理
    if(data.length==0){
        return;
    }
    //根据渲染粒度添加数据
    for(var i=0;i<size;i++){
        if(data.length>0){
            tableParams.settings().dataset.push(data.shift());
        }
    }
    tableParams.reload();
    $timeout(function(){
        renderDataset(tableParams,data,size);
    });
}

this.tableLoad = function(stateParams){
    filesService.get(stateParams).$promise.then(function(resp){
        //总数据
        var respData = resp.data.pager.data;
        //实例化列表
        self.tableParams = new NgTableParams({
            sorting:{lastModified:‘desc‘}    //更新时间降序排列
        },{
            counts:[],
            dataset:[],    //不给数据
            dataOptions:{
                applyPaging:false    //不分页
            }
        });
        
        renderDataset(self.tableParams,respData,3);
    });
};

//加载列表
self.tableLoad($state.params);