在角度网格上批量编辑 [英] Bulk Edit on Angular Grid

问题描述

我处理行级版本的已收款项属性的方式，如下所示:

 < tr ng-repeat =在Event.ParticipantPledges中的项目">< div>< span ng-if ="item.Id！= Event.ParticipantPledge.Id"> {{item.PaymentReceived |货币}}</span><输入type ="number" ng-if ="item.Id == Event.ParticipantPledge.Id" name ="paymentReceived" ng-model ="Event.ParticipantPledge.PaymentReceived"是必需的/></div></tr> 

我有一个如上所示的网格.我知道如何编辑如上所示的行级别，但是我的问题是如何一次对所有行进行编辑.换句话说，批量编辑.我可以给按钮一个<代码>全部编辑，然后用户可以编辑任何行，然后可以更新记录.但是，当我提供这样的功能时，如果用户更改了一项的值，那么它将应用于该项的所有行.知道这是由于两种方式的数据绑定性质而发生的.但是您能告诉我如何避免这种情况吗?预先感谢.

注意:一个简单的例子已足够.

解决方案

我使用了很棒的 >

HTML:

 < form editable-form name ="tableform" onaftersave ="saveTable()" oncancel ="cancel()"><！-表格->< table class ="table table-bordered table-hover table-condensed">< tr style ="font-weight:粗体">< td style ="width:40％">名称</td>< td style ="width:30％">状态</td>< td style ="width:30％"> Group</td>< td style ="width:30％">< span ng-show ="tableform.$ visible"> Action</span></td></tr>< tr ng-repeat =用户的用户| filter:filterUser">< td><！-可编辑的用户名(带有验证的文字)->< span editable-text ="user.name" e-form ="tableform" onbeforesave ="checkName($ data，user.id)">{{user.name ||'空的' }}</span></td>< td><！-可编辑状态(本地选择)->< span editable-select ="user.status" e-form ="tableform" e-ng-options ="s.value as s.text for s in statuss"{{showStatus(user)}}</span></td>< td><！-可编辑组(选择-远程)->< span editable-select ="user.group" e-form ="tableform" onshow ="loadGroups()" e-ng-options ="g.id as g.text for group in g"{{showGroup(user)}}</span></td>< td>< button type ="button" ng-show ="tableform.$ visible" ng-click ="deleteUser(user.id)" class ="btn btn-danger pull-right"> Del</按钮</td></tr></table><！-按钮->< div class ="btn-edit">< button type ="button" class ="btn btn-default" ng-show =！tableform.$ visible" ng-click ="tableform.$ show()">编辑</button></div>< div class ="btn-form" ng-show ="tableform.$ visible">< button type ="button" ng-disabled ="tableform.$ waiting" ng-click ="addUser()" class ="btn btn-default pull-right">添加行</button>< button type ="submit" ng-disabled ="tableform.$ waiting" class ="btn btn-primary">保存</button>< button type ="button" ng-disabled ="tableform.$ waiting" ng-click ="tableform.$ cancel()" class ="btn btn-default"> cancel</button></div></form></div> 

JS:

  app.controller('EditableTableCtrl'，function($ scope，$ filter，$ http，$ q){$ scope.users = [{id:1，名称:"awesome user1"，状态:2，组:4，groupName:"admin"}，{id:2，名称:"awesome user2"，状态:未定义，组:3，groupName:"vip"}，{id:3，名称:"awesome user3"，状态:2，组:null}];$ scope.statuses = [{value:1，text:'status1'}，{value:2，text:'status2'}，{值:3，文字:'status3'}，{值:4，文字:'status4'}];$ scope.groups = [];$ scope.loadGroups = function(){返回$ scope.groups.length?null:$ http.get('/groups').success(function(data){$ scope.groups =数据;});};$ scope.showGroup = function(user){if(user.group&& $ scope.groups.length){var selected = $ filter('filter')($ scope.groups，{id:user.group});返回selected.length?selected [0] .text:未设置"；} 别的 {返回user.groupName ||'没有设置';}};$ scope.showStatus = function(user){var selected = [];if(user.status){selected = $ filter('filter')($ scope.statuses，{value:user.status});}返回selected.length?selected [0] .text:未设置"；};$ scope.checkName = function(data，id){if(id === 2&& data！=='awesome'){返回用户名2应该很棒"；}};//过滤用户以显示$ scope.filterUser = function(user){返回user.isDeleted！== true;};//将用户标记为已删除$ scope.deleteUser = function(id){varfiltered = $ filter('filter')($ scope.users，{id:id});如果(filtered.length){已过滤[0] .isDeleted = true;}};//添加用户$ scope.addUser = function(){$ scope.users.push({id:$ scope.users.length + 1，姓名: ''，状态:null，组:null，isNew:是});};//取消所有更改$ scope.cancel = function(){for(var i = $ scope.users.length; i--;){var user = $ scope.users [i];//取消删除如果(user.isDeleted){删除user.isDeleted;}//删除新的如果(user.isNew){$ scope.users.splice(i，1);}};};//保存修改$ scope.saveTable = function(){var结果= [];for(var i = $ scope.users.length; i--;){var user = $ scope.users [i];//实际删除用户如果(user.isDeleted){$ scope.users.splice(i，1);}//标记为不是新的如果(user.isNew){user.isNew = false;}//在服务器上发送results.push($ http.post('/saveUser'，user));}返回$ q.all(结果);};}); 

The way which I have handled the row level edition for payment received property as shown below:

   <tr ng-repeat="item in Event.ParticipantPledges">
    <div>
        <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
        <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-model="Event.ParticipantPledge.PaymentReceived" required />
    </div>
   </tr>

I have a grid as shown above.I know how to edit row level as shown above.But my question is how can I do it for all rows at once.In other words bulk edit.I can give a button as Edit All and then user can edit any row and after that he can update the records.But when I give a such feature where if user changes one item's value then it apply to all the rows of that item.I know this is happening due to 2 way data binding nature.But could you tell me how to avoid this ? Thanks in advance.

Note : Simple example is more than enough.

解决方案

I have used awesome Angular-xeditable directive for that.

Play with it : JSFiddle

HTML :

<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
      <tr style="font-weight: bold">
        <td style="width:40%">Name</td>
        <td style="width:30%">Status</td>
        <td style="width:30%">Group</td>
        <td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
      </tr>
      <tr ng-repeat="user in users | filter:filterUser">
        <td>
          <!-- editable username (text with validation) -->
          <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
            {{ user.name || 'empty' }}
          </span>
        </td>
        <td>
          <!-- editable status (select-local) -->
          <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
            {{ showStatus(user) }}
          </span>
        </td>
        <td>
          <!-- editable group (select-remote) -->
          <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
            {{ showGroup(user) }}
          </span>
        </td>
        <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
      </tr>
    </table>

    <!-- buttons -->
    <div class="btn-edit">
      <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
        edit
      </button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
      <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div> 

  </form>
</div>

JS :

app.controller('EditableTableCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  // filter users to show
  $scope.filterUser = function(user) {
    return user.isDeleted !== true;
  };

  // mark user as deleted
  $scope.deleteUser = function(id) {
    var filtered = $filter('filter')($scope.users, {id: id});
    if (filtered.length) {
      filtered[0].isDeleted = true;
    }
  };

  // add user
  $scope.addUser = function() {
    $scope.users.push({
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null,
      isNew: true
    });
  };

  // cancel all changes
  $scope.cancel = function() {
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];    
      // undelete
      if (user.isDeleted) {
        delete user.isDeleted;
      }
      // remove new 
      if (user.isNew) {
        $scope.users.splice(i, 1);
      }      
    };
  };

  // save edits
  $scope.saveTable = function() {
    var results = [];
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];
      // actually delete user
      if (user.isDeleted) {
        $scope.users.splice(i, 1);
      }
      // mark as not new 
      if (user.isNew) {
        user.isNew = false;
      }

      // send on server
      results.push($http.post('/saveUser', user));      
    }

    return $q.all(results);
  };
});

这篇关于在角度网格上批量编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！