我在下面发布了示例代码。在那里,我想使用键盘按钮(空格按钮)更改出勤值列。我正在搜索谷歌中的“示例代码/任何线索”,直到现在我得到任何样本。所以请帮助我/建议我解决这个问题。
<!DOCTYPE html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
<script>
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", attendance: "L", age: 50},
{name: "Tiancum", attendance: "A", age: 43},
{name: "Jacob", attendance: "P", age: 27},
{name: "Nephi", attendance: "E", age: 29},
{name: "Enos", attendance: "L", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field:'name', displayName:'Name'}, {field:'attendance', displayName:'Attendance', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="ChangeValue(row)">{{row.getProperty(col.field)}}</a></div>'},
{field:'age', displayName:'Age'}],
showFooter: true,
enableCellSelection: true,
multiSelect: false,
};
$scope.ChangeValue = function(row) {
if(row.entity.attendance === 'L') {
row.entity.attendance = 'P';
} else if(row.entity.attendance === 'P') {
row.entity.attendance = 'A';
} else if(row.entity.attendance === 'A') {
row.entity.attendance = 'E';
} else {
row.entity.attendance = 'L';
}
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</body>
当我在列出勤时选择任何单元格时,我应该能够使用键盘“空格”按钮更改该值。
感谢: Ramakrishna K.C