表格内容动态更新实现

需求描述：

点击添加按钮，添加数据，表格(二维列表)内容动态更新

 

使用点：

1、动态更新新增内容：

$_scope.pagedResultInfo.list.push(saveDataDictionaryKey);

2、动态更新删除内容

$scope.pagedResultInfo.list.remove(data);

注意：是删除数组里面的对象，对象这个是在checkbox选择、取消时已处理好的。

伪代码示例如下：

jsp:

<table class="table table-bordered table-hover">

<thead>

<tr>

<td></td>

<td>字典</td>

<td>描述</td>

</tr>

</thead>

<tbody>

<tr data-ng-repeat="data in pagedResultInfo.list">

   <td data-ng-click="ckEvent(this,'{{data.id}}');">

   <label>

      <input type="checkbox" name="ckdict"  data-ng-checked="isSelected(data.id)" >

   </label>

   </td>

<td data-ng-click="queryValuePagedResult('{{data.id}}');"><a href="#">{{data.name}}</a></td>

<td>{{data.description}}</td>

</tr>

</tbody>

</table>

js:

/**

* checkbox事件

*/

var ckvalues=[];

var datas=[];//方便移除数据使用

Array.prototype.indexOf = function(val) {

for (var i = 0; i < this.length; i++) {

if (this[i] == val)

return i;

}

return -1;

};

Array.prototype.remove = function(val) {

var index = this.indexOf(val);

if (index > -1) {

this.splice(index, 1);

}

};

$scope.ckEvent=function($event, id){

$scope.isSelected = function(id){          

           return ckvalues.indexOf(id)!=-1; 

}

if(ckvalues.indexOf(id)>=0){

ckvalues.remove(id);

datas.remove($event.data);

}else{

ckvalues.push(id);

datas.push($event.data);

}

// console.log(ckvalues);

// console.log(datas);

}

var $_scope = $scope;//以为新增方法里有个$scope，所以重新定义个名字，用来处理动态增加的数据，

/**

* 新增视图

*/

$scope.addView = function(id) {

        $modal.open({

        templateUrl : urlManager.$staticViewUrls.$getUrl( 'static/basis/html/data/add-key-view' ),

backdrop : 'false',

controller : ['$scope','$state', '$modalInstance','DataDictionaryKeyService', function($scope,$state,$modalInstance,dataDictionaryKeyService) {

$scope.saveOne = function(saveDataDictionaryKey) {

$scope.isSaveSuccess = false;

dataDictionaryKeyService.saveOne( saveDataDictionaryKey ).success( function(responseData) {

$scope.isSaveSuccess = true;

$modalInstance.dismiss( 'cancel' );

saveDataDictionaryKey.id=responseData.moreData.data;//添加这个否则checkbox的id是空，功能不能使用

$_scope.pagedResultInfo.list.push(saveDataDictionaryKey);

} );

}

$scope.closeView = function() {

$modalInstance.dismiss( 'cancel' );

}

}],

});

/**

* 删除

*/

$scope.deleteOne = function(id) {

// messages.confirm( {

// title : '删除操作',

// message : '确定要删除信息吗?'

// } ).ok( function() {

// var objids=ckvalues;

// angular.forEach(objids, function(objid) {

// dataDictionaryKeyService.deleteOne(objid.id);

// });

// } );

// dataDictionaryKeyService.deleteOne(ckvalues[0]);

var objids=ckvalues;

angular.forEach(objids, function(objid) {

var a=dataDictionaryKeyService.deleteOne(objid);//

});

angular.forEach(datas, function(data) {

$scope.pagedResultInfo.list.remove(data);

});

ckvalues=[];

datas=[];

}

}