我正在使用 Angular ui-grid，并在尝试保存网格状态时遇到错误。gridApi 似乎未定义。我创建了一个Plunker来演示该错误。您可以在 View2Controller.js 的 vm.saveState 函数下找到该语句。
angular.module('app').controller('View2Controller').$inject = ['$scope', '$http', 'uigridconstants'];
和
angular.module('app').controller('View2Controller', function ($scope, $http, uiGridConstants) {
var vm = this;
vm.customers = [];
vm.selectedText = '';
vm.selectedItems = [];
vm.gridOptions = {
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
data: 'vm.customers',
columnDefs: [
{
field: 'status', name: '', width: 50, sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'member', name: 'M', width: 50, type: 'boolean',
cellTemplate: '<input type="checkbox" ng-model="row.entity.lid" >'
}, …我正在实现一个包含6列的基本表ui-grid,它跨越页面的宽度,但我注意到列标题宽度与数据没有整齐对齐.查看计算出的CSS值,标题与数据的宽度偏差<1像素(例如标题中的182.222229003906与数据中的182.986114501953)
在前几列中,差异并不明显,但在最右边的列中更明显.我已经删除了自定义CSS类来检查是否存在对ui-grid渲染的干扰,但得到了相同的结果.
然后我发现,即使在某些教程页面中,行为也存在.示例:ui-grid教程中的此页面:
http://ui-grid.info/docs/#/tutorial/321_singleFilter
gridOptions非常简单:
columnDefs: [
{ field: 'name' },
{ field: 'gender', cellFilter: 'mapGender' },
{ field: 'company' },
{ field: 'email' },
{ field: 'phone' },
{ field: 'age' },
{ field: 'mixedDate' }
]
我浏览了教程中的其他示例,发现并非所有网格都遇到此问题.(例如,这个:http://ui-grid.info/docs/#/tutorial/401_AllFeatures都整齐排列)这会影响这种行为以及如何避免这种行为？
谢谢!
我正在尝试深入研究Angular UI-Grid的API,以确保我为我的单元头实现Bootstrap Popover.我一直在看,但找不到任何解决方案.
像这样的东西 - plnkr.co/edit/UJJttN
我也试图让popover只发生在标题单元格中.有什么建议？
我已经使用 ui-grid 一段时间了。最近我遇到了一个网格问题，如果我传递一个稍微大的数据集（比如 50 行），网格不会显示它们。
当我调试并查找我的 $scope.gridOption.data 对象时，它似乎包含所有元素，但仍然只显示了几个（大约 10 个）。
当我尝试通过单击标题进行排序时，会出现更多行。（有时 1 或 2 个）
这不规则，也没有规律。对于不同的数据集，它随机发生。
我正在使用ui-grid - v3.2.6并且我有一个div带有 amax-height和scroll其他的网格表。我在具有类似实现的页面上有多个这样的网格，但这个问题目前似乎出现在某个网格上。
我可以起草一个plunker，但它并没有真正的帮助，因为这个问题是随机的，而且我有一个基本的ui-grid实现。
我跟着这个链接https://github.com/angular-ui/ui-grid/issues/424，但是我无法理解它，我仍然被卡住了。
似乎这是一个已知且未修复的错误。但是有什么可行的解决方案吗？？？
任何帮助表示赞赏..
我已经查看了关于这个 ui-grid 的多篇文章，它让我很适合。我正在尝试获取选定的行对象。我要么得到一个未定义的，要么无法读取“getSelectedRows”的属性。任何帮助是极大的赞赏。
我从这篇文章here开始，文档似乎也不是那么好。
这是我的代码：
vm.gridOptions = {
enableRowSelection: false,
enableSelectAll: false,
showGridFooter:true
};
vm.gridOptions.columnDefs = [
{ name: 'productName' },
{ name: 'unitPrice' }
];
vm.gridOptions.multiSelect = false;
vm.getSelectedRows = function () {
vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
}
productDataService.getProductList()
.then(function (result) {
vm.gridOptions.data = result.data;
vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();<--Property undefined error here
$timeout(function() {
if (vm.gridApi.selection.selectedRow) {
vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
}
});
});
vm.gridOptions.onRegisterApi = function(gridApi) {
vm.gridApi = gridApi;
}
我有如下的ui-grid选项
{
"enableHorizontalScrollbar":false,
"enableHiding":false,
"enableColumnResizing":true,
"enableSorting":true,
"enableColumnResize":true,
"paginationPageSize":20,
"enablePagination":true,
"enablePaginationControls":true,
"columnDefs":[
// skipped for clarity
],
"data":"griddata",
"excludeProperties":[
"$$hashKey"
],
"enableRowHashing":true,
"showHeader":true,
"headerRowHeight":30,
"rowHeight":30,
"maxVisibleRowCount":200,
"minRowsToShow":10,
"showFooter":false,
"footerRowHeight":30,
"columnWidth":50,
"maxVisibleColumnCount":200,
"virtualizationThreshold":20,
"columnVirtualizationThreshold":10,
"excessRows":4,
"scrollThreshold":4,
"excessColumns":4,
"horizontalScrollThreshold":2,
"scrollThrottle":70,
"enableFiltering":false,
"enableColumnMenus":true,
"enableVerticalScrollbar":1,
"minimumColumnSize":10,
"headerTemplate":null,
"footerTemplate":null,
"cellEditableCondition":true,
"enableCellEditOnFocus":false
}
所以我希望会发生一些分页,但事实并非如此.我看到了卷轴.可能是什么原因？
我的目标是客户端分页.
我搜索了很多这个问题,但没有得到任何解决方案,实际上正在努力满足我的需求.问题:我想在单击具有columnDef as的复选框时选择行实体 [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello()' />"}.
我正在基于另一个JSON [更新工作代码]动态构建此columnDef
$scope.columnDef = function(){
var column = [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello(\"row.entity.field01\")' />"}], coltype = [];
angular.forEach($scope.columns, function(value, index){
coltype = [];
switch(value.type){
case "Number": coltype.push({type: "number"});
break;
case "String": break;
case "Boolean": coltype.push({editableCellTemplate: "ui-grid/dropdownEditor", cellFilter: "mapBool", editDropdownValueLabel: "bool", editDropdownOptionsArray: [{ id: 1, bool: 'Yes' },{ id: 2, bool: 'No' }] });
break;
case "Date": coltype.push({type: 'date', cellFilter: …这是我第一次使用ui-grid而且我发现API有点令人沮丧.
我正在使用编辑和cellnav.我打开了焦点编辑,因此只需单击一下即可将单元格切换到编辑模式.当我单击例如网格外部时,编辑将关闭模糊,但单元格仍保持选中状态.这样做的问题是,在选定的单元格中,单击一次不会将单元格置于编辑模式.
所以,我正在寻找:
a)在编辑关闭时取消选择单元格的方法,或者:b)在所选单元格中单击以将其切换到编辑模式的方法.
搜索API和教程文档还没有找到办法.
谢谢
编辑:由于我找不到其他方法,我写了这个可怕的指令,我敦促你不要复制和使用你自己的项目.我希望有人会回答一个不那么令人厌恶和脆弱的建议,但现在这就是我的全部.
(function () {
angular.module('eventApp').directive('autoEdit', function () {
return function (scope, element, attrs) {
function doubleClick() {
$(this, '.ui-grid-cell-focus').dblclick();
}
$(element).on('blur', '.ui-grid-cell-focus ~ div input', function () {
$(this).closest('div').parent().children('.ui-grid-cell-focus').unbind('click', doubleClick).click(doubleClick);
});
}
});
})();
在尝试保存ui-grid单元模板中的更改时,我无法理解从哪里开始.当我浏览Ui-Grid教程时,我发现的是当单个字段映射到列时如何保存更改:http ://ui-grid.info/docs/#/tutorial/201_editable.
我创建了一个简单的网格作为一个示例,在一列中有多个输入文本字段.您将如何处理编辑并保存对此网格的更改？使用Kendo + razor + c#我能够保存包含8-9个变量的列中的更改.我无法理解如何使用角度ui网格来做到这一点.
总而言之,我希望一旦他或她完成网格中的数据编辑,就可以单击网格外的单个保存按钮.
这是我的简单网格示例的链接:http://plnkr.co/edit/IeYWL62Oa182crRUEtX4？p = info
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.gridOptions = {
rowHeight: 40,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
};
$scope.gridOptions.columnDefs =
[{ name: 'id', width: 35},
{ name: 'template',
cellTemplate: '<div><input type="text" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' +
'<div><input type="text" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}
])
如何在每次尝试对列进行排序时禁用显示的"1"？
这是一个plunkr:http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5？p = preview
您可以看到,当您排序时,会'1'显示出来.