标签: angular-ui-grid
角度UI网格滚动错误
我正在使用ui grid 3.0.6.直到昨天它工作正常.但是现在Google Chrome存在问题.(版本56.0.2924.87)
当我滚动网格,或单击向下滚动箭头时,它开始滚动非常快.无法控制速度.它运行良好,只在Chrome中运行.
有人可以帮忙吗？
提前致谢.
推荐指数
解决办法
查看次数
隐藏水平滚动条(Angular ui-grid)
我试图隐藏Angular ui-grid的水平滚动条,但我找不到合适的属性.(属性enableScrollbars = false删除两者.)
是否可以仅删除水平滚动条？
推荐指数
解决办法
查看次数
如何改变ui-grid行的高度？
我正在使用ui-grid.我有很多行,这就是我使用滚动的原因.在我尝试更改行的高度之前,一切正常.然后滚动变得一团糟.我在这里添加了一个示例http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview 这是ui-grid网站的教程之一 - 我唯一改变的是CSS.我添加了这些规则.
.ui-grid-cell-contents {
padding: 1px 1px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
height: 22px !important;
font-size: 12px;
line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
height: 55px !important;
}
.ui-grid-filter-container {
padding: 1px 3px;
}
如果删除上述CSS规则,滚动工作完全正常.所以我要么需要添加更多的CSS规则,要么我需要使用网格的某些API来正确设置行高.任何帮助都感激不尽.
如何更改行高并保持滚动顺畅？
更新:这是默认网格和修改后的CSS之间的比较:http: //plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview 尝试为每个网格上下滚动行.差异应该非常明显.
推荐指数
解决办法
查看次数
如何将ui-grid字体文件包含到项目中
我一直坚持使用anjularjs ui-grid,它显示了一些中文符号代替图标.在深入了解之后我才知道我必须使用ui-grid团队提供的一些字体文件,我下载了文件并将它们包含在我的项目中,但仍然没有得到正确的图标图像和字体,如何包含这些文件进入项目？
这些是我下载并包含在我的项目中的文件名:
1 ui-grid.eot
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
推荐指数
解决办法
查看次数
Angular UI Grid 3.x版本中的操作按钮
我试图使用Angular UI Grid(不稳定版本)渲染一个简单的表.对于每一行,我需要一个按钮,点击时应该在我的父控制器中处理.
使用Javascript: -
angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
console.log("Controller is up.");
$scope.data = [];
for (var i = 0; i < 50; i++) {
$scope.data.push({
fullName: "Name" + i,
age: i
});
}
$scope.clickHandler = function(){
// this never gets invoked ?!
console.log("Row Action click Handler.");
};
$scope.gridOptions = {
data: $scope.data,
columnDefs:[ {name:'fullName',field:'fullName'},
{name:'age',field:'age'},
{name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
]
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css">
<link …推荐指数
解决办法
查看次数
如何下载Angular UI Grid？
我不敢相信我要问这个问题,但是如何下载Angular UI Grid呢？
之后,我点击下载按钮(上图),我在这里:
怎么办？我没有看到下载按钮.我不知道该怎么做.有人请告诉我,我必须明白这一点.
推荐指数
解决办法
查看次数
Angularjs ui-grid从文本输入字段中过滤
也许有人可以帮我解决一个小问题.我是网络编程领域的新手,但我有编程经验.我想开发一个使用angularjs和ui-grid的小网站.不幸的是,过滤不能从外部输入字段起作用.
有人可以告诉我编程错误在哪里吗？
代码可以在这里找到:http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview
var myDummyData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
var myDummyData2 = [{name: "aTest", age: 50},
{name: "bTest1", age: 43},
{name: "cTest2", age: 27},
{name: "dTest3", age: 29},
{name: "eTest4", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true
, filter: {
term: $scope.filterOptions.filterText //DOES NOT …推荐指数
解决办法
查看次数
格式化日期angularjs ui-grid
我正在尝试更改日期的显示方式.数据以"Sun May 03 18:04:41 2009"格式的字符串形式出现
我查看了这些例子,他们要我使用
$scope.gridOptions = {
data: 'mydata',
enableRowSelection: true,
multiSelect: false,
enableColumnResize: true,
columnDefs: [
{ field: 'startDate', displayName: 'Date', cellFilter: 'date:\'yyyy-MM-dd\'' }]
};
但这不适合我.数据仍然按原样显示.而不是"2009-05-13"我做错了什么？提前致谢!
推荐指数
解决办法
查看次数
如何在angular-ui-grid中对特定值进行着色？
我试图根据它在新的angular-ui-grid 3.0 rc12中的值来着色,但我无法做到.以下代码用于以前的版本(ngGrid):
$scope.gridOptions =
data: 'data.sites'
tabIndex: -1
enableSorting: true
noTabInterference: true
enableColumnResizing: true
enableCellSelection: true
columnDefs: [
{field: 'sv_name', displayName: 'Nombre'}
{field: 'sv_code', displayName: 'Placa'}
{field: 'count', displayName: 'Cuenta'}
]
rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"
class="ui-grid-cell"
ui-grid-cell></div>"""
和相应的CSS:
.grid {
width: 100%;
height: 250px;
}
.green {
background-color: #2dff07;
color: #006400;
}
.blue {
background-color: #1fe0f0;
color: #153ff0;
}
这里的问题是表达式:
row.getProperty('count') === 1
不再像在ngGrid中那样工作了.任何关于如何在angular-ui-grid中实现相同的猜测(ui-grid.info)
非常感谢!
推荐指数
解决办法
查看次数
Angular UI Grid:如何为列过滤创建预先填充的下拉菜单
我正在寻找有关Angular UI Grid功能的一些帮助.具体来说,我正在探索过滤,虽然我能够在我的应用程序中使用自由格式文本字段成功实现排序,就像他们在其网站上 的示例中所做的那样,我希望找到一些帮助,找到一种方法来使用预先填充的排序某些列的下拉菜单.
澄清一下:通过预先填充,我的意思是我希望通过我的代码填充下拉列表.我很好,如果解决方案包含硬编码数据,但我最终的目标是让预填充包含被排序的列的唯一数据值集:)
我在(例如)Kendo UI(kendodropdownlist)中看到了这个功能,但我对该解决方案附带的价格标签不感兴趣.我想坚持上面提到(和链接)的Angular UI-grid.在StackOverflow上我发现了一个类似的问题,但不幸的是它似乎并没有太多牵引力.我希望通过对我正在寻找的内容给出更详细的解释,我会得到比我在那里找到的更完整的答案.
以下是我的控制器中的内容:
var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate',
'ngTouch', 'ui.grid' ]);
simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http',
'uiGridConstants', function($scope, $http, uiGridConstants) {
$scope.columns = [ {
field : 'trans_detail',
displayName : 'Transaction'
}, {
field : 'cust_name',
displayName : 'Customer'
}, {
field : 'quantity',
displayName : 'Quantity',
filters : [ {
condition : uiGridConstants.filter.GREATER_THAN,
placeholder : 'greater than' …推荐指数
解决办法
查看次数