Angular-xeditable实现仅选中复选框行进入编辑模式咨询

Absolutely, this requirement is totally achievable with Angular-xeditable! Let's walk through the implementation step by step, using your provided code as a base.

Key Changes Needed #

We'll add three core functionalities:

• A checkbox column to track selected rows
• A bulk edit trigger that only activates edit mode for selected rows
• Adjustments to the editable form visibility to respect the selection state

Modified Full Code #

<h4>Angular-xeditable Editable row (Bootstrap 3) with Checkbox Selection</h4>
<div ng-app="app" ng-controller="Ctrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:5%">Select</td> <!-- New checkbox header -->
      <td style="width:30%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Actions</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- Checkbox bound to user's selected state -->
        <input type="checkbox" ng-model="user.selected" />
      </td>
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform{{user.id}}" e-ng-hide="true" onbeforesave="checkName($data, user.id)" e-required>
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform{{user.id}}" 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-name="group" onshow="loadGroups()" e-form="rowform{{user.id}}" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form with unique name per row -->
        <form editable-form name="rowform{{user.id}}" onbeforesave="saveUser($data, user.id)" ng-show="rowform{{user.id}}.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform{{user.id}}.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform{{user.id}}.$waiting" ng-click="rowform{{user.id}}.$cancel(); user.selected = false" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform{{user.id}}.$visible">
          <button class="btn btn-primary" ng-click="rowform{{user.id}}.$show()">Edit Single</button>
        </div>
      </td>
    </tr>
  </table>
  <!-- Bulk Edit Button -->
  <button class="btn btn-primary" ng-click="editSelectedRows()">Edit Selected Rows</button>
  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

Controller Updates #

You'll need to add these functions and initialize the selected property in your controller:

angular.module('app', ['xeditable'])
.controller('Ctrl', function($scope, $filter, $http) {
  // Initialize users with selected property set to false
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, selected: false},
    {id: 2, name: 'awesome user2', status: 1, group: 3, selected: false},
    // Add more users as needed
  ];

  // Your existing statuses, groups, and helper functions (checkName, showStatus, etc.) go here

  // Bulk edit function: trigger edit mode for selected rows
  $scope.editSelectedRows = function() {
    angular.forEach($scope.users, function(user) {
      if (user.selected) {
        // Access the unique row form by its generated name
        var rowForm = $scope['rowform' + user.id];
        if (rowForm) {
          rowForm.$show();
        }
      }
    });
  };

  // When adding a new user, set selected to false
  $scope.addUser = function() {
    var newUser = {
      id: $scope.users.length + 1,
      name: '',
      status: 1,
      group: 1,
      selected: false
    };
    $scope.users.push(newUser);
  };
});

Key Notes #

1. Unique Form Names: We gave each editable-form a unique name using rowform{{user.id}}, which lets us reference individual row forms in the bulk edit function.
2. Selection State Reset: The cancel button resets the selected property so the row isn't accidentally re-selected in future bulk edits.
3. Flexibility: We kept the single-row edit button intact for individual edits, but you can remove it if you only want bulk edit functionality.
4. Initialization: Always initialize the selected property for both existing and new users to avoid undefined state issues.

内容的提问来源于stack exchange，提问作者Soorya Prakash