ng-table getData & dataset 模式 remove()

ng-table getData  模式 remove()

ng-table 使用getData 分页获取数据模式下如何更好的删除一条或者多条数据？

1. 请求后台删除数据，成功回调中reload 当前状态；这样页面会跳动，交互不友好

2. 请求后台删除数据，成功回调中先删除tableParams.data 中对应的条目，NgTable 自动监测会去除页面上的dom；再以当前状态请求服务端数据，将请求的数据与tableParams.data 作比对，把当前页没有的数据添加到tableParams.data 中，NgTable 内部监测会把数据添加上去

3. 测试后发现2 方法还是偶尔会有跳动存在，优化后直接在删除服务端数据的成功回调中reload 列表

# 移除方法

//前端调用
//<li><a ng-click="$ctrl.remove(user.id,$index)">删除</a></li>

this.remove = function(id,index){
 // 删除服务端数据
 usersService.remove(params).$promise.then(function(resp){
     self.tableParams.data.splice(index,1);    // 删除界面上的一条数据
     // 请求当前状态的数据直接补充到界面
     usersService.get(params).$promise.then(function(resp){
         var respData = resp.data.pager.data;
         var tableData = self.tableParams.data;
         newDataArray(respData,tableData);
     });
 });
};

//测试后方案改进
this.remove = function(id,index){
 // 删除服务端数据
 usersService.remove(params).$promise.then(function(resp){
    //先前尝试页面偶尔还是会有跳动，还是直接采用reload 
     self.tableParams.reload();
 });
};

 

# 响应数据与tableParams.data 作比对，将页面上没有的值添加到tableParams.data 数组

//返回新增数据，respDataArray 服务端请求的新数组 ，tableDataArray 删除后的数组

//js 原生数组遍历
function newDataArray(respDataArray,tableDataArray){
    var result = [];
    for(var i=0;i<respDataArray.length;i++){
        var repeat = false;
        for(var j=0;j<tableDataArray.length;j++){
            if(respDataArray[i]['id'] == tableDataArray[j]['id']){
                repeat = true;
                break;
            };
        };
        if(!repeat){
            result.push(respDataArray[i]);
        };
    };
    for(var k=0;k<result.length;k++){
        self.tableParams.data.push(result[k]);
    };
};

// for ... in 数组遍历
function newDataArray(respDataArray,tableDataArray){
    var result = [];
    for(var x in respDataArray){
        var repeat = false;
        for(var y in tableDataArray){
            if(respDataArray[x]['id'] == tableDataArray[y]['id']){
                repeat = true;
                break;
            }
        };
        if(!repeat){
            result.push(respDataArray[x]);
        };
    };
    for(var z in result){
        self.tableParams.data.push(result[z]);
    };
};

//jquery 数组遍历、合并
function newDataArray(respDataArray,tableDataArray){
    var result = [];
    $.each(respDataArray,function(index1,value1){
        var repeat = false;
        $.each(tableDataArray,function(index2,value2){
            if(value1['id'] == value2['id']){
                repeat = true;
                return false;
            };
        });
        if(!repeat){
            result.push(value1);
        };
    });
    
    //数组合并，一次性添加页面没有的新数据
    $.merge(self.tableParams.data,result);
    
    /*$.each(result,function(index3,value3){
        self.tableParams.data.push(value3);    //一条一条添加页面不存在的新数据
    });*/
};

 

ng-table dataset 模式 remove()

ng-table 使用dataset 模式单页或者分页显示数据时如何更好的删除一条或者多条数据？

1. 最简单的方法就是请求后台删除数据，并重新reload 列表或者当前状态，这样会产生页面跳动，多次渲染，数据量大时对使用不友好

2. 对于单页显示数据，请求后台删除数据后，在成功回调中删除tableParams.data 中对应的数据，并同时删除tableParams.settings().dataset 中的记录，否则直接执行客户端排序界面上还会显示已删除的记录，因为他的客户端排序、过滤、分页都是作用于dataset ；分页显示数据删除区别于单页主要是删除一条数据后续的数据需要实时补充上来，删除完一页数据就要跳转到前一页

3. 删除方法优化，直接删除tableParams.data 中的数据，并将改变后的结果传入到ngTableEventsChannel.publishDatasetChanged() 方法，这样可以将界面上的操作直接同步到数据池中，从而不会影响其他功能

# 单页移除方法

//前端调用
//<li><a ng-click="$ctrl.remove(user.id,$index)">删除</a></li>

//单页移除js 方法
this.remove = function(id,index){
 var ids = 'ids=' + id;
 // 服务端删除
 filesService.fileDelete(ids).$promise.then(function(resp){
     // 页面移除
     self.tableParams.data.splice(index,1);
     // 数据池移除
     var dataset = self.tableParams.settings().dataset;
     for(var i=0;i<dataset.length;i++){
         if(dataset[i]['id'] == id){
             dataset.splice(i,1);
         }
     };
 });
};

//单页移除jquery 方法
this.remove = function(id,index){
 var ids = 'ids=' + id;
 // 服务端删除
 filesService.fileDelete(ids).$promise.then(function(resp){
     // 页面移除
     self.tableParams.data.splice(index,1);
     // 数据池移除
     var dataset = self.tableParams.settings().dataset;
     $.each(dataset,function(i,item){
         if(item['id'] == id){
             dataset.splice(i,1)
         }
     });
 });
};

//删除方法优化改进
this.remove = function(id,indices){
 var ids = 'ids=' + id;
 // 服务端删除
 filesService.fileDelete(ids).$promise.then(function(resp){
     if(!angular.isArray(indices)){
        indices=[indices];
    }
    var params = self.tableParams;
    for(var i in indices){
        params.data.splice(indices[i],1);
    }
　　 params.settings().dataset = params.data;
 });
};

 

 # 分页移除方法

//分页移除jquery 方法
this.remove = function(id,index){
    var ids = 'ids=' + id;
    //服务端删除
    filesService.fileDelete(ids).$promise.then(function(resp){
        //页面移除
        self.tableParams.data.splice(index,1);
        //数据池移除
        var dataset = self.tableParams.settings().dataset;
        $.each(dataset,function(i,item){
            if(item['id'] == id){
                dataset.splice(i,1)
                self.tableParams.reload().then(function(data){
                    //如果最后一页全部被删除，跳转到前一页
                    if(data.length === 0 && self.tableParams.total() > 0) {
                        self.tableParams.page(self.tableParams.page() - 1);
                        self.tableParams.reload();
                    }
                });
            }
        });
    });
};