Fatal编程技术网
  • angularjs/
  • Angularjs 当一行处于编辑模式时，禁用ng grid的其他行中的编辑

Angularjs 当一行处于编辑模式时，禁用ng grid的其他行中的编辑

angularjs

Angularjs 当一行处于编辑模式时，禁用ng grid的其他行中的编辑,angularjs,ng-grid,Angularjs,Ng Grid,功能性 我有一个ng网格。一列有一个“编辑”按钮。单击编辑按钮后，“编辑”按钮将被禁用，“取消”和“删除”将被启用，行的所有列都将变为可编辑 问题 <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" /> <

功能性

我有一个ng网格。一列有一个“编辑”按钮。单击编辑按钮后，“编辑”按钮将被禁用，“取消”和“删除”将被启用，行的所有列都将变为可编辑

问题

<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>

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
    }

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

预期行为

当一行已经处于编辑模式时。我点击了另一行的编辑按钮，上一个可编辑的行应该变成不可编辑的。 -->应还原上一行中已编辑的值。 -->给定点上只有一行可以编辑

以下是我尝试过的链接。

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>

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
    }

  ]
};
});


取消
JavaScript代码

<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>

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
    }

  ]
};
});

var m=angular.module（“myApp”，“ngGrid”）；
m、 控制器（“myCtrl”，函数（$scope）{
//log（“这里我需要知道选择了哪个按钮”+row.entity.name）
var removeTemplate=''；
var ageTextBoxTemplate='{{row.getProperty（col.field）}}'+
'';
var nameTextBoxTemplate='{{row.getProperty（col.field）}}'+
'';
var editbuttonemplate='Edit'+
“取消”+
“保存”；
//var checkboxTemplate=''；
var checkboxTemplate=''+
'';
$scope.tempdata={
姓名：“，
年龄：“，
旗帜：假
}
$scope.edit=函数（行）{
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=函数（行）{
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=函数（行）{
row.entity.edit=！row.entity.edit；
if（$scope.tempdata.flag==row.entity.object.edit）{
警报（“值未更改”）；
}
console.log（row.entity）；
};
$scope.removeRow=函数（行）{
var index=row.rowIndex；
$scope.gridOptions.selectItem（index，false）；
$scope.myData.splice（索引，1）；
};
$scope.myData=[{
姓名：“拉杰什”，
年龄:27岁，
编辑：false，
对象：{
编辑：真
}
},
{
姓名：“Saurav”，
年龄:31岁，
对象：{
编辑：真
}
},
{
姓名：“Rajubabu”，
年龄:32岁，
对象：{
编辑：false
}
}, {
姓名：“Joby”，
年龄:37岁，
对象：{
编辑：真
}
}, {
姓名：“曼尼什”，
年龄:41岁，
对象：{
编辑：false
}
}, {
名称：“Sidhansu”，
年龄:31岁，
对象：{
编辑：真
}
}
];
$scope.gridOptions={
数据：“myData”，
enableRowSelection:true，
//showSelectionCheckbox:true，
enablePaging:true，
enableColumnResize:true，
columnDefs：[{
字段：“名称”，
displayName:'名称'，
cellTemplate:nameTextBoxTemplate
}, {
字段：“年龄”，
displayName:“年龄”，
cellTemplate:ageTextBoxTemplate
}, {
displayName:“编辑/取消/保存”，
cellTemplate:editButtonTemplate
}, {
displayName:“删除”，
细胞模板：removeTemplate
}, {
字段：“编辑”，
displayName:“编辑”，
cellTemplate:checkboxTemplate
}
]
};
});
如果您能提供一份完整的解决方案，我们将不胜感激。

请保持表格模式。所以，如果有人点击编辑按钮，设置编辑模式。现在在编辑按钮模板上添加ng disable，如果mode=edit，则返回true。。当有人点击save/cancel（保存/取消）将模式重置为view（查看）时…我这里没有使用表。我的意思是说在$scope上创建一个变量。比如$scope.tableMode，您应该在其中维护表的模式