标签: angular-ui-grid

我使用Angular UI Grid来显示一些数据.排序已启用并初始化以及选择单行:

vm.gridOptions = {
    enableSorting: true,
    enableRowSelection: true,
    multiSelect: false,
    noUnselect: true,
    columnDefs: [
        { name: '#', field: 'ID' },
        { name: 'Name', field: 'CODE', sort: { direction: 'asc', priority: 1 } },
        { name: 'Comment', field: 'DESCR' },
    ],
    data: []
};

我能够选择一行,并按行"按名称"列按照配置的升序排序.

如UI网格教程210中所示,我添加了逻辑,以在我的数据加载并添加到网格后自动选择第一个项目:

datacontext.getAllGcTab(vm.filter).then(function (result) {
    vm.gridOptions.data = result.results;
    vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
});

但是这段代码正在选择未排序数据的第一项.我的网格中有大约500个项目,这些项目并不多,并且表现良好,但在这种情况下,所选项目位于线下并且不可见.

有没有选项可以直接访问UI Grid的行或排序数据？

我知道外部排序可以解决这个问题,因为我会将已排序的数据分配给网格.但在我看来,这似乎是一种不必要的开销......

我正在使用ui-grid来显示数据.我想隐藏列标题.这个原因有没有财产？谢谢

我正在使用AngularJs Ui-Grid.info来显示动态数据网格,我喜欢它,但现在我必须使用服务器端过滤和分页将其连接到具有60,000条记录的数据库表,并且看起来这个分页选项插件仅用于客户端分页.

有没有人能够使用Server Side Paging.你有一个代码示例吗？

查看代码

<div class="gridContainer">
    <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>

控制器的一部分

$scope.gridOptions = {
    enableFiltering: true,
    enableColumnResize: true,
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    columnDefs: [
        {
            //field: 'Id', width: 60, displayName: 'Id', enableFiltering: false
            field: 'id', width: 60, displayName: 'Id', enableFiltering: false
        },
        {
            field: 'skill_count',
        },
        {
            field: 'name'
        } 
    ]
};

$scope.loadData = function () {
    skillService.getUnprovisioned(function (data) {
        $scope.gridOptions.data = data;
    });
};

我有一个只有1列和大约1000行的ui-grid.每行中都有一个文本框.我想通过选项卡浏览文本框.这可以很好地工作大约10到15行,之后文本框失去焦点,然后如果再次按Tab键,它将跳过下面几行并跳转到另一个文本框.

请在此处查看问题plnkr

UI-Grid选项:

$scope.gridOptions = {
    rowHeight: '200',
    enableColumnMenus: false,
    paginationPageSize: 2000,
    columnDefs: [
      {name:"value", width:'*',
        cellTemplate: gridTemplate,
      }
    ],
    data: gridData
};

我已将AngularJS SPA应用程序升级ng-grid v2.0.7到,ui-grid v3并且我的列标题不再包含在内.我的列标题现在是单行...标题,并在列标题不适合时显示省略号.

此功能是否已被删除或是否已被其他方法取代？

使用ui-grid我想使用过滤器获取所有过滤数据行的列表.

在下面的plunker中,我将500个项目的原始数据过滤到61.现在如何获得这61个实体的列表？

plnkr链接

如果我使用以下代码,我只获得在屏幕上呈现的行

var _renderedRows = $scope.gridApi.grid.renderContainers.body.renderedRows;

单击该plunker底部的按钮显示过滤行的数量,仅为14而不是61.如果我的过滤器中有14个或更少,则可以完美地工作,因为我可以从上面访问实体对象.但我看不到网格中暴露过滤行的任何属性.

那么如何才能获得61的列表,以便我可以将它们传递给另一个函数来对它们执行操作？

我想在鼠标位于其上方时突出显示整行的角度ui网格.

我试图通过添加设置背景颜色的ng-mouseover和ng-mouseleave回调来修改rowTemplate.

这是我的rowTemplate - 我希望前三行将整个行颜色更改为红色.但只有当前鼠标下的单元格才会发生变化.

<div
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);"
    ng-mouseleave="rowStyle={}"
    ng-style="rowStyle"
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell"
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
    ui-grid-cell>
</div>

如何在鼠标悬停事件中突出显示整行？

我尝试的另一种方法:使用一些回调函数执行此操作 - 例如示例中的appScope.onRowHover.在这里,我有行的范围.如何在onRowHover函数中设置该行的样式？

谢谢!

链接到Plunkr.我希望将鼠标悬停在网格单元格上以将整行变为红色.

我一次使用angular-ui-grid 3.1.1和25,50,75条记录.每个单元格都有不同的单元模板,例如onclick popovers,悬停弹出窗口,文件下载链接,带有配置文件图像的数据,嵌套表格中的数据等.数据在网格中渲染得很好,但是在几秒钟内,网格变得没有响应.

我也创建了一个外部列选择器.在选择要显示/隐藏的列时,网格会在几秒钟内无响应.(与ui-grid提供的内置列选择器相同的无响应行为)

请为此建议任何修复.

我正在使用角度ui-grid并且有一个长达30列的网格,我想为列设置固定宽度,以便至少可以轻松看到列标题.有没有办法设置,比如说所有列的宽度都是10%,或者我必须逐个为每列做这个.

在ui-grid-header-cell上设置min-width后,许多列合并为一列

.ui-grid-header-cell {
    min-width: 150px !important;
}

我在我的项目中使用了UI Grid,下面是gridOptions我使用的变量的快照.问题是一切正常.但是从过去的1或2周开始,垂直滚动就只能在一个滚动条上滚动.由于multiSelect设置为true,客户端无法检查/选择滚动条疯狂滚动的特定记录(当用户仅滚动一次时会发生这种情况)并且滚动条到达表格的底部.

版本: ui-grid - v3.2.1

this.gridOptions = {
      appScopeProvider: this,
      infiniteScrollRowsFromEnd: 20,
      enableSelectAll: true,
      multiSelect: true,
      enableColumnResizing: true,
      saveScroll: false,
      saveFocus: false,
      saveGrouping: false,
      enableFiltering: true,
      saveGroupingExpandedStates: false,
      saveTreeView: false,
      infiniteScrollDown: true,
      useExternalFiltering: false,
      useExternalSorting: false,
      enableCellEditOnFocus: false,
      enableCellEdit: false,
      enableRowSelection: true,
      enableFullRowSelection: true,
      enableGridMenu: true,
      enableSorting: true,
      exporterCsvFilename: 'ClientResults.csv',
      exporterCsvLinkElement: angular

      //sorry cant share other code

任何人都可以帮助什么是错的.

PS:表中共有2000多条记录.此外,这只发生在Chrome中,并且在Firefox中表现正常.