我正在使用角度1.3和角度ui bootstrap和ui-grid 3(因为支持rtl).
这是傻瓜.
我只想在加载时显示某些列,同时仍然在网格菜单中显示其他列.
例如,我的数据包含:姓名,地址,电话,电子邮件.
我想在页面加载时显示姓名和地址,但在网格菜单中显示电话和电子邮件.这是为了容纳15列的网格,但只显示5,并允许用户选择要显示的其他列,如果有的话.如果用户希望默认显示7列,我可以保存当前显示的列并创建新配置以加载该特定用户.
我热衷于从ng-grid 2迁移到新的ui-grid 3.0替代品.事情到目前为止看起来不错 我无法弄清楚的一件事是如何使用向上和向下箭头键启用记录导航.当multiSelect设置为false时,这与ng-grid开箱即用.
我需要根据某些条件改变角度ui网格的行颜色.如图所示,目标在ng-grid中实现
rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
Run Code Online (Sandbox Code Playgroud)
如何在角度ui网格中实现相同
这个答案说明这段代码:
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
$scope.mySelectedRows=$scope.gridApi.selection.getSelectedRows();
}
Run Code Online (Sandbox Code Playgroud)
应该工作以获取所选行,但对我来说它总是返回[],以跟踪gridApi.selection.getSelectedRows()每次触发选择事件时我必须调用的所选行,这是正确的吗?
我想要实现的是自己的页脚跟踪网格选定行的数量,这是实现这一目标的正确方法吗?
我正在使用UI-Grid制作表格.我想在单击单元格的内容时调用范围函数.在这种情况下,单击单元格时,应显示警报.这是我的javascript文件.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [{name: 'ID', field: 'id', cellTemplate: '<a ng-href="#" ng-click="test()">{{row.entity.id}}</a>'}];
$scope.test = function() {
window.alert("Alert");
}
}]);
Run Code Online (Sandbox Code Playgroud)
我的网页:
<!doctype html>
<html ng-app="app" class="ng-scope">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<style type="text/css">
.grid {
width: auto;
height: 500px;
margin-left: 50px;
margin-right: 50px;
margin-top: …Run Code Online (Sandbox Code Playgroud) 我正在使用Angular UI-Grid创建一个表,我希望通过严格匹配来过滤表内容.默认情况下,"Car"输入将与"Carol"匹配,但我希望UI-Grid的过滤仅在输入等于表条目时才匹配.
我有简单的控制器:
angular.module('it.works', ['ngResource'])
.controller 'ItWorksCtrl', ($scope, Task) ->
$scope.worksTable = {
data: Task.query(),
columnDefs: [
{ field: "created_at", cellFilter: "date:'dd.MM.yyyy'", displayName: '???? ????????' },
{ field: "task", cellFilter: "limitTo:300", displayName: '???????? ??????' },
{ field: "performer", displayName: '???????????' },
{ field: "task_type", displayName: '?????????' },
{ field: "is_orgtechnik_task", displayName: '??????????', cellTemplate: "<div class='ui-grid-cell-contents'><i class='fa {{ COL_FIELD == true && \"fa-check\" }}'></i></div>" },
{ field: "department", displayName: '?????????????' },
{ field: "customer", displayName: '????????' },
{ field: "customer_telephone", displayName: '??????? ?????????' …Run Code Online (Sandbox Code Playgroud) 当我的ui-grid中有足够的行来进行滚动时,由于某种原因,它似乎在列表的底部有很多空格.
我把它钉在了这段代码上(我想?):
styles['margin-top'] = hiddenRowWidth + 'px';
ui-grid.js的第3038行
不知道为什么它会在底部添加如此多的空白区域.有任何想法吗?我当时认为这是因为我的容器高度为100%,但即使具有特定的像素高度,它似乎也是如此.
编辑:嗯,现在我不确定那个代码是罪魁祸首.ui-grid-canvas元素有一个巨大的高度,仍然不确定为什么.
关闭它,因为它似乎是CSS相关的东西,这只是我的自定义CSS的问题.
我添加了一个js文件,ui-grid.js,它使用了一个无法识别的函数uppercase().所有其他角度函数都在我的项目中工作,但是当我包含js文件时,我有这个错误.
我检查了在angular.js之后是否加载了ui-grid.js.
我真的不明白为什么