我编码了以下内容:
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
myData实际上包含四个列ID,名称,状态和描述.status是一个简单的javascript数组,有三种类型的状态叫做myStatus.
是否有可能以某种方式将myStatus中的数据链接到ng-grid中的字段,以便我可以从选择下拉列表中选择一个新值？
我正在设置从JavaScript调用我的ngGrid的选择gridOptions.selectItem().我将multiSelect设置为false,因此只选择了一行.我希望ngGrid能够自动滚动显示新选择的行,但我不知道如何做到这一点:有人可以帮忙吗？
在相关主题:我可以通过鼠标单击禁用行选择吗？如果是这样,怎么样？
编辑添加
如果可能的话,我还想禁用所选行的键盘导航.
什么有效:
AardVark71的答案奏效了.我发现ngGrid ngGrid在gridOptions变量上定义了一个属性,它保存了对网格对象本身的引用.必需的函数通过此对象的属性公开:
$scope.gridOptions.selectItem(itemNumber, true);
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);
我的网格固定为13行高,我的逻辑尝试使所选行显示在网格的中间.
如果可能的话,我仍然希望禁用鼠标和键盘更改.
什么也有效:
这可能更接近'Angular Way'并达到同样的目的:
// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) {
if (newValue != oldValue && newValue.length > 0) {
var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]);
scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight);
}
}, true);
虽然通过点击选择行的效果可能有点令人不安.
我已将AngularJS SPA应用程序升级ng-grid v2.0.7到,ui-grid v3并且我的列标题不再包含在内.我的列标题现在是单行...标题,并在列标题不适合时显示省略号.
此功能是否已被删除或是否已被其他方法取代？
我有一个问题让我在我的plunker示例中简单说明我想知道为什么我的$scope.revertSelection()功能不起作用.[ http://plnkr.co/edit/3KXrUuCsSACuhefmyzxN?p=info][1]
脚步:
1)按名称(降序)对右手网格排序
2)随机选择3-4行
3)单击"复制"按钮将所有选择的行复制到其中 $scope.retainSelection
4)按名称(升序)对右手网格排序
5)点击"恢复"按钮(这不起作用)
我期待之前在步骤2)中选择的所有行都被选中回来没有发生:-(请帮助我解决问题.我用Google搜索但找不到任何文档gridApi.selection来寻找其他方法来满足我的要求.
注意:我使用的是Ui.grid而不是ng-grid
问候,
我有ng-grid选项:
afterSelectionChange: function (row, event) {
console.log("Event: " + event);
console.log("Row: " + row.rowIndex);
},
第一次选择行时,它按预期工作.第二次,它触发两次,一次为行离开,另一次为新行.这可以.问题是,我想对新行采取一次行动.我能做到的唯一方法是检查事件.但事件未定义.
输出:
Event: undefined activityGridController.js:13
Row: 0 activityGridController.js:14
Event: undefined activityGridController.js:13
Row: 1
问题是,如何确定新行？
我想做一些我不知道是否可能的事情
<!DOCTYPE html>
<html ng-app="myApp">
<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>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData',
cellTemplate:'<div class="ngCellText" …我正在创建一个表,它将只是一个信息的只读显示.使用表行ng-repeat方法,我可以轻松定义包含模型中多个值的单元格,如下所示:
<td>
{{user.supervisorName}} ({{user.supervisorNumber}})
</td>
我正在查看ng-grid的列定义和模板,我没有看到这样做的方法.我看到的每个例子似乎都是每列严格一个字段.我可以用ng-grid做到这一点吗？
我想使用ng-grid作为其包含的功能和性能,因为其中一些表将包含相当多的行,并且使用ng-repeat和分页以及过滤随着大小的增长而快速陷入困境.
在最新版本的ng-grid(v2.0.7)中,当editableCellTemplate处于编辑模式并失去焦点时,它仍处于编辑模式.这是一个错误还是我错误地配置了网格？
下面是一个示例:http://plnkr.co/edit/OgEjk7wFaC982FrKbeHH？p = preview其中第0列包含editableCellTemplate.
我现在已经玩过这个了,但是无法理解它:
(使用角度1.2.2,angularFire 0.5.0和最新的ng-grid)
所以我有一个firebase,我正在使用angularFire将我的数据提取到ng-grid组件中,如下所示:
//First I go get my data, in this case something called 'grades' from ..../db/grades
var promise = angularFire(new Firebase($scope.fireBaseUrl), $scope, 'grades');
//When they're fetched I start up a watcher
promise.then(function(grades) {
startWatchGrade($scope, filterFilter, appSettings);
});
//Then I bind that grades as a datasource to my ng-grid
$scope.gridOptions = {
data: 'grades',
enableCellSelection: false,
enableRowSelection: true,
etc....,
效果很好,我已经完成了控制,将新项目添加到"成绩"(推送)和删除项目(拼接),所有内容都很好地反映到ng-grid.像这样:
//Adding new like this is ok
$scope.grades.push({some-new-data-here});
//Deleting old like this is ok
$scope.grades.splice(row.rowIndex, 1);
但是这种方法会自动生成基于int的火钥匙,这些火钥匙在修改时会一直变化,所以我想控制钥匙,所以我改变了添加要使用的项目:
var fbRef = …我有一个嵌套的ng网格.
var faculty = angular.module('faculty', ['ngGrid']);
faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window)
{
$scope.facdata = [{
examname: 'test'
},{
examname: 'test2'
}];
$scope.gridOptions = {
data: 'facdata',
plugins: [new ngGridFlexibleHeightPlugin()],
columnDefs: [
{field: 'examname',displayName: 'Exam Name'},
{field: '', displayName: 'Subjects' , cellTemplate: '<div ng-grid="gridOptions1" ></div>'
}]
};
$scope.fac1data = [{
abc: 'value',
def: 'value2'
}, {
abc: 'value3',
def: 'value4'
}, {
abc: 'value1',
def: 'value4'
}, {
abc: 'value2',
def: 'value4'
}, {
abc: 'value34',
def: 'value4'
}, {
abc: …