标签: ng-grid

我正在使用AngularJS和Bootstrap 3创建一个App.我想显示一个包含数千行的表/网格.AngularJS和Bootstrap的最佳可用控件是什么,具有排序,搜索,分页等功能.

我对Angular和ng-options.有点困惑.

我有一个简单的数组,我想用它初始化一个选择.但是,我希望选项值=标签.

的script.js

$scope.options = ['var1', 'var2', 'var3'];

HTML

<select ng-model="myselect" ng-options="o for o in options"></select>

我得到了什么:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

我想要的是:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

所以我尝试过:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(但它不起作用.)

编辑:

我的表单是外部提交的,这就是为什么我需要'var1'作为值而不是0.

我的用例非常简单.在编辑Cell(enableCellEdit:true)之后,用户应该将数据"自动"发送到服务器(在单元格模糊时).我尝试了不同的方法,但没有一个方法得到适当的解决.我有一个简约的网格:

// Configure ng-grid
$scope.gridOptions = {
    data: 'questions',
    enableCellSelection: true,
    selectedItems: $scope.selectedRow,
    multiSelect: false,
    columnDefs: [
        {field: 'id', displayName: 'Id'},
        {field: 'name', displayName: 'Name'},
        {field: 'answers[1].valuePercent', displayName: 'Rural', enableCellEdit: true}
    ]
};

例如,我试图观察传递给Grid的数据模型.但这样做不会返回我编辑的单元格:

$scope.$watch('myData', function (foo) {
    // myModel.$update()
}, true);

我试图摆弄"ngGridEventData"数据事件,但在单元格编辑后它不会触发

$scope.$on('ngGridEventData', function (e, gridId) {
    // myModel.$update()
});

最后,我试图观察一个Cell.但是,这仅适用于网格的"selectedCell"属性的行:

$scope.selectedRow = [];

$scope.gridOptions = {
    selectedItems: $scope.selectedRow,
}

$scope.$watch('selectedRow', function (foo) {
    console.log(foo)
}, true);

它是否需要ng-grid插件？我不敢相信它不是开箱即用的东西.

你有一个指针/片段如何解决自动保存/发送到服务器？

我查看了angular-ui模块,因为我需要实现一个网格.

我看到有稳定的ng网格和不稳定版本的ui-grid.

我应该使用哪个版本？
它们是非常不同还是难以切换？

我认为这很可能非常简单,但我找不到任何关于如何在其网站上显示的'filterText'之外添加过滤器的明确文档.我想要做的就是这样简单:

$scope.filterOptions = {
    filter: $scope.myFilter,  // <- How to do something like this? 
    useExternalFilter: true
}

$scope.gridOptions = {
        data: 'entries',
        enableColumnResize: false,
        multiSelect: false,
        enableSorting: false,
        selectedItems: $scope.selectedEntries,
        filterOptions: $scope.filterOptions
}

$scope.lowerLimit = 50;
// My Filter
$scope.myFilter = function(entry) { 
    if (entry < $scope.lowerLimit) {
        return false; 
    }
    return true;
 }

编辑:或者如果我能以某种方式过滤数据源？我试过这个:

$scope.gridOptions = {
        data: 'entries | filter: myFilter',
        enableColumnResize: false,
        multiSelect: false,
        enableSorting: false,
        selectedItems: $scope.selectedEntries,
}

但这会引发很多错误.

我在ng-grid中使用角度按钮.我需要知道如何识别从网格中单击的按钮.

我想部分复杂性是在选择行之前单击按钮(仅我的分析,可能不会帮助解决方案:)

关于网格外观的快照

说明问题的plunker 这里

我正在使用AngularJS ng-grid(v2.0.7 v2.0.8),我想了解API中filterText字段的语法.

特别是我想知道如何过滤特定列或列,并过滤列中的一个或多个条目.

标签ng-grid和filter有很多堆栈溢出问题,虽然它们很有用,但是目前还没有提供filterText格式的完整摘要.

我的列宽度有问题.我不知道它们预先的宽度,也不想指定每列的宽度.是否有可以使用的属性根据内容(包括列标题)自动调整所有列宽？

我正在尝试创建一个使用ng-grid和ASP.NET WebAPI的简单工作示例.因此,我从ng-grid示例页面(http://angular-ui.github.io/ng-grid/)中的服务器端分页示例开始; 无论如何,我的网格总是显示空列,即使在调试时我可以确认数据是否正确接收.可能我只是在网格设置中遗漏了一些东西,但我发现的所有样本看起来都与我的相似.有人可以帮忙吗？这是我做的:

更新#1:建议的解决方案似乎有效但仅适用于第1页.每当我移动到新页面或执行需要刷新的任何其他操作时,即使服务器返回数据按预期更改,显示的数据也保持不变.此外,从我发现的所有代码示例中,似乎正确的设置数据的方法只是替换数组成员值而不是清空并再次填充它.我按照https://groups.google.com/forum/#!searchin/angular/nggrid/angular/vUIfHWt4s_4/oU_C9w8j-uMJ的建议尝试了申请,但我得到的结果相同.

服务器端

只需创建一个新的MVC4应用程序,更新NuGet包并添加angular和ng-grid包.我的假数据模型由Item类表示:

public sealed class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public bool IsFemale { get; set; }
}

我还添加了几个模型来处理分页,过滤和排序各种数据集(我发现更容易有一个共同的分页基础模型-PagedFilter-,以及一些派生模型):

public class PagedFilter
{
    private int _nPageSize;
    private int _nPageNumber;

    public int PageSize
    {
        get { return _nPageSize; }
        set
        {
            if (value < 1) throw new ArgumentOutOfRangeException("value");
            _nPageSize = value;
        }
    }

    public …

我正在使用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 尝试为每个网格上下滚动行.差异应该非常明显.