Question

功能

我有一个ng-grid。一列有一个“编辑”按钮。单击编辑按钮后，“编辑”按钮将被禁用，“取消”和“删除”将被启用，并且该行的所有列都可以编辑。

问题

我一次可以编辑多行。这不是预期的行为。

预期行为

当一行已处于编辑模式时。然后我点击其他行中的编辑按钮，然后上一个可编辑行应该变得不可编辑。 - ＆gt;应恢复上一行中的编辑值。 - ＆GT;只有给定点的一行可以编辑。

这是我尝试过的链接。 Plnkr link

html代码

<html>

<head>
  <link data-require="ng-grid@*" data-semver="2.0.14" rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="myApp">
    <div ng-controller="myCtrl">
      <div class="gridStyle" ng-grid="gridOptions"></div>

    </div>
    <button ng-show="row.entity.edit" id="cancelBtn" type="button" class="btn btn-primary" ng-click="cancel(row)" >Cancel</button>

  </div>
</body>

</html>

JavaScript代码

var m = angular.module("myApp", ["ngGrid"]);
m.controller("myCtrl", function($scope) {

  //console.log("Here I need to know which button was selected " + row.entity.name)
  var removeTemplate = '<input type="button" value="remove" ng-click="removeRow(row)" />';
  var ageTextBoxTemplate = '<div class="ngCellText"><div ng-show="!row.entity.edit[{{row.rowIndex}}]">{{row.getProperty(col.field)}}</div>' +
    '<div ng-show="row.entity.edit[{{row.rowIndex}}]" class="ngCellText"><input type="text" ng-model="row.entity.age"/></div></div>';
  var nameTextBoxTemplate = '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
    '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.name"/></div></div>';
  var editButtonTemplate = '<button ng-show="!row.entity.edit" id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button>' +
    '<button ng-show="row.entity.edit" id="cancelBtn" type="button" class="btn btn-primary" ng-click="cancel(row)" >Cancel</button> ' +
    '<button ng-show="row.entity.edit" id="saveBtn{{row.rowindex}}" type="button" class="btn btn-primary" ng-click="save(row)" >Save</button> ';
  //var checkboxTemplate='<input type="checkbox" ng-model="row.entity.object.dude" ng-click="toggle(row)">';
  var checkboxTemplate = '<input ng-show="!row.entity.edit" type="checkbox" ng-model="row.entity.object.edit" disabled=true>' +
    '<input ng-show="row.entity.edit" type="checkbox" ng-model="row.entity.object.edit">';

  $scope.tempdata = {
    name: "",
    age: "",
    flag: false
  }

  $scope.edit = function(row) {
    row.entity.edit[row.rowIndex] = !  row.entity.edit[row.rowIndex];

    $scope.tempdata.name = row.entity.name;
    $scope.tempdata.age = row.entity.age;
    $scope.tempdata.flag = row.entity.object.edit;
  };

  $scope.cancel = function(row) {
    row.entity.edit = !row.entity.edit;

    row.entity.name = $scope.tempdata.name;
    row.entity.age = $scope.tempdata.age;
    row.entity.object.edit = $scope.tempdata.flag;
  };

  $scope.save = function(row) {
    row.entity.edit = !row.entity.edit;
    if($scope.tempdata.flag === row.entity.object.edit){
      alert("value not changed");
    }
    console.log(row.entity);

  };

  $scope.removeRow = function(row) {
    var index = row.rowIndex;
    $scope.gridOptions.selectItem(index, false);
    $scope.myData.splice(index, 1);
  };

  $scope.myData = [{
      name: "Rajesh",
      age: 27,
      edit: false,
      object: {
        edit: true
      }

    },

    {
      name: "Saurav",
      age: 31,
      object: {
        edit: true
      }
    },

    {
      name: "Rajubabu",
      age: 32,
      object: {
        edit: false
      }
    }, {
      name: "Joby",
      age: 37,
      object: {
        edit: true
      }
    }, {
      name: "Manish",
      age: 41,
      object: {
        edit: false
      }
    }, {
      name: "Sidhansu",
      age: 31,
      object: {
        edit: true
      }
    }
  ];

$scope.gridOptions = {
  data: 'myData',
  enableRowSelection: true,
  //showSelectionCheckbox: true,
  enablePaging: true,
  enableColumnResize: true,
  columnDefs: [{
      field: 'name',
      displayName: 'Name',
      cellTemplate: nameTextBoxTemplate
    }, {
      field: 'age',
      displayName: 'Age',
      cellTemplate: ageTextBoxTemplate
    }, {
      displayName: 'Edit/Cancel/Save',
      cellTemplate: editButtonTemplate
    }, {
      displayName: 'Delete',
      cellTemplate: removeTemplate
    }, {
      field: 'edit',
      displayName: 'edit',
      cellTemplate: checkboxTemplate
    }

  ]
};
});

高度赞赏解决方案的一部分。

当一行处于编辑模式时，禁止在ng-grid的其他行中进行编辑

0 个答案: