大家都是程序员,我的要求是在运行时在网格中添加一列,或者使用ui-grid动态添加一列.我能够使用按钮实现相同,但我想要的是覆盖图标的预定义功能,在用于排序的网格标题和一些预定义的任务(),我想在那里添加一个更多的功能
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.columns = [{ field: 'name' }, { field: 'gender' }];
$scope.gridOptions = {
enableSorting: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.add = function() {
$scope.columns.push({ field: 'company', enableSorting: false });
}
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);.grid {
width: 500px;
height: 250px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> …我正在研究ui网格编辑单元格功能.我需要使用rest api将编辑的单元格值更新到数据库.另外,我如何获得在控制器中选择的行列表.
我的工作代码
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = { };
$scope.gridOptions.columnDefs = [
{ name: 'id', enableCellEdit: false},
{ name: 'name' },
{ name: 'age', displayName: 'Age' , type: 'number', width: '10%' }
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}])
我希望能够在我的控制器中设置/更新一个值,然后在网格中进行过滤.目前,在我输入网格然后触发filterChanged事件之前,不会更新对过滤器的更改.知道我如何自动过滤网格配置中的数据或至少做一次硬刷新？
感谢您的帮助.
这是AngularJS UI Grid网站上稍微修改过的Plunker. http://plnkr.co/edit/pgX31NT3Ry3XllZ3JO2B?p=preview
这是我在columnDefs部分中的当前过滤器定义:
{ field: 'company', filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return cellValue == scope.term;
}
如何在angular ui-grid单元格中添加图像.
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'company' },
{ field: 'image'}
],
data:[
{name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},
{name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},]
};
}]);
我试图让一个单元格动态扩展它的高度.
有没有办法在渲染后调整行的高度(GridRow)？
如果没有,那么我将尝试在网格中使用可扩展的网格或树.
是否可以显示特定单元格/列的可扩展网格？
目前,我看到所有可扩展的网格/树网格占据了父级下面的整行.
谢谢
有没有办法从ui-grid下拉菜单中删除导出为pdf的选项？我想保留导出到csv的能力,但无法弄清楚如何在不删除所有导出功能的情况下删除pdf功能.
我从文档中编辑了这个plunker,删除了与pdf导出器相关的所有脚本和JavaScript.这有效地禁用了该功能,但仍可从菜单中选择导出为pdf.
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'gender', visible: false},
{ field: 'company' }
],
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
我正在项目中使用来自http://ui-grid.info/的网格.我已经创建了一个分层网格,它可以很好地工作,但是当我进行导出时,它只从顶层网格导出数据.
这是设计的并且是网格的标准功能,因此我没有必要提出任何示例代码.来自http://ui-grid.info/docs/#/tutorial的任何例子都可以.
有没有办法导出子网格(最好是主网格和子网格一起出现在网格中)？
我有一个客户在进行排序时特别不喜欢列标题中的下一个数字。这植根于UI-Grid的多重排序，该排序为每列赋予编号的优先级。有没有一种方法可以禁用多重排序以删除这些数字？我仍然想继续启用排序功能，但一次只能在一个列上。谢谢。
对于显示表格数据,我使用角度ui-grid
如果列已排序,然后如果我们编辑单元格,则排序将被踢入并移动该行.我想在单元格编辑上禁用排序,有没有办法做到这一点？
Plnkr http://plnkr.co/edit/17H5K6nOEz9gf4Keeap9?p=preview
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit >
</div>
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid','ui.grid.edit',
'ui.grid.selection',
'ui.grid.rowEdit', 'ui.grid.cellNav']);
app.controller('MainCtrl', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'A' },
{ field: 'B' },
{ field: 'C', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [{'A':'a1', 'B':'b1', 'C':'c1'}, {'A':'a3', 'B':'b3', 'C':'c3'}, {'A':'a2', 'B':'b2', 'C':'c2'}];
});
我在带有angularjs的项目中使用ui-grid.
在我的项目中,ui-grid将内容导出到excel文件,并且它运行良好.
这是ui-grid声明:
这里是javascript中的ui-grid定义:
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle …angular-ui-grid ×10
angularjs ×7
hierarchical ×1
javascript ×1
pdfmake ×1
subgrid ×1
ui-grid ×1