标签: angular-ui-grid

我正在使用新的Angular UI Grid(计划替换ng-grid).我的数据需要一些格式才能显示在表格中.例如,我的服务器返回一个名为"status"的属性作为数字,但我想将其显示为一个好名字.

如果status = 1则显示"Todo",如果status = 2则显示"Doing"等.

如何在UI Grid中完成？

我正在使用 Angular http://ui-grid.info/。当我在网格中有下拉菜单时遇到问题。

以下代码我用于 DropDown :-

objCombos = $scope.getComboValues('DEPARTMENT');

$scope.gridOptions.columnDefs.push({
field: fieldName.toUpperCase(), displayName: displayName,
columnType: 'columnDb',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'DEPARTMENT',
editDropdownOptionsArray: objCombos,
name: fieldName.toUpperCase()
});

DropDown 的数组是这样的objCombos：-

[
    { id: 1, department: 'Branch1' },
    { id: 2, department: 'Branch2' }
];

当我选择并更改下拉值时说从Branch1到Branch2，更改值后，id在这种情况下，它会显示下拉列表中所选值的值2。

使用AngularJS ui-grid导入XLSX数据的最佳方法是什么？

js-xlsx解析器是不是一个很好的选择,还是有其他开源XLSX解析器工具更适合这个任务？在我的情况下,XLSX数据非常基本,没有什么复杂,但我想尽可能保留样式信息.我预计数据网格将少于20行x 1000行.

或者使用替代数据网格(例如Hansontable,而不是ui-grid)会更好吗？这会更适合电子表格数据吗？

例如,在本教程中,是否有任何方法可以在列页脚中获取数据？我想在其他地方展示总数. 提前致谢.

我有一个UI网格,我想给我的行提供不同的CSS,哪个标题行为group.

在这里,我想对整行表示蓝色,这是组行,(有+符号),我也不希望在动作栏中将单元格模板应用到它.

我可以在单元格模板中做条件但是如何识别这一行.

我发现,组头行获取类'ui-grid-tree-header-row'但不确定如何使用此信息.

我正在寻找这样的东西:

我正在探索Angular.js UI-Grid.但是,当我在我的服务中发出HTTP请求时,我似乎无法弄清楚为什么数据未定义.当我从控制器发出HTTP请求时似乎工作正常.如何使Ui-Grid以模块化方式工作？

HTML

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

调节器

app.controller('tableCtrl', function($scope, tableService) {

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);
            $scope.gridOptions.data = data;

            $scope.gridOptions = {};

            $scope.gridOptions.columnDefs = [
                {name:'artist_id'},
                {name:'first_name'}
            ];

            });
        };
    getAllArtistData();
});

服务

app.service('tableService', function($http, $q) {

    /************************************************
    GET ARTIST DATA 
    ************************************************/
    this.getArtistData = function() {

        var defer = $q.defer();

        $http.get('../../../data/artists-lite.json')
            .success(function(response) {
                console.log("this is response", response);
                defer.resolve(response);
            })
            .error(function(err) {
                defer.reject(err);
            });

        return defer.promise;

    };
});

App.js

'use strict';

var app …

我需要用常规复选框而不是默认的OK按钮替换UI网格选择标题内容.我能够插入复选框,但我无法根据列标题选中复选框来控制行复选框值.要求:选中列标题复选框后,应选中所有行复选框.如果未选中行复选框,则应取消选中列标题复选框.

选择/取消选中复选框有效,但我应该能够根据列标题复选框控制行复选框.

我在这里挣扎着范围.任何帮助/建议表示赞赏.

Plunker链接:http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM？p = preview

 $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"rowSelected\" ng-click=\"grid.appScope.clickConditionRow(rowSelected) && selectButtonClick(row, $event)\">&nbsp;</div>"
  );

我正在使用Angular UI Grid,其enableRowHeaderSelection值为true.这允许用户通过单击复选框来选择行.

有没有办法根据列值禁用某些行的行选择？

我正在使用具有CellNav功能的ui-grid:http://ui-grid.info/docs/#/tutorial/309_editable_with_cellnav

无法确定哪种CSS样式在聚焦时在网格周围添加蓝色阴影边框.我应该覆盖哪个CSS类才能摆脱这个边界？

我想使用角度ui日期过滤器在搜索列中搜索日期。

当我尝试在列中搜索我的日期时，它没有显示正确的日期。我希望它显示用户搜索的完全匹配。示例：如果用户键入22-aug-16，则应仅显示与此日期匹配的日期，假设用户仅键入25-aug，则应仅显示与数据库中存在的任何年份的8月25日匹配的日期。

我尝试使用我的代码，例如

.controller(
                'BlockADetailsController',
                [
                        '$scope', '$rootScope','$location','$routeParams', '$filter', 'CommonService', 'BlockADetailsService', '$q',
                        function($scope, $rootScope,$location, $routeParams, $filter, CommonService, BlockADetailsService, $q) {
$scope.changeActorGridOptions = {
enableFiltering : true,
columnDefs : [
                                            {
{
                                                name : 'lLDate',
                                                field : 'lLDate',                                               
                                                displayName : 'LAST_LOGIN',                                         
                                                width : '100',
                                                minWidth: '90',
                                                cellTemplate : '<div title="{{COL_FIELD | date:\'dd-MMM-yy\' }}">{{COL_FIELD | date:"dd-MMM-yy"  }}</div>',
                                                headerTooltip : true,
                                                cellClass : function(grid, row,
                                                        col, rowRenderIndex,
                                                        colRenderIndex) {
                                                    return 'gridGroupCell';
                                                },
                                                headerCellFilter : 'translate',                                         
                                            },

在这里我也尝试过

type: 'date'

并且还添加了在stackoverflow中同类问题中提到的onselect函数。

喜欢，

onSelect: function(date){ …

什么是API？

用例为什么我需要它:在执行外部排序时,我想禁用表上的排序(因为它将刷新内容的次数是单击列标题的次数)或特定列,并启用成功或错误.

我正在尝试为角度 ui-grid 制作一个下拉过滤器。我最初在这里找到了操作方法文章，在无法使用它时，我回到源头尝试使用它。我仍然没有成功。列过滤器看起来像一个普通过滤器，没有任何下拉菜单。有人可以帮我解决吗？

列定义：

{
 field: 'sex'
 , displayName: 'SEX'
 , width: '120'
 , type: uiGridConstants.filter.SELECT
 , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]  }
}

这是它的外观（如果我点击输入，它只接受文本）

我还缺少其他东西吗？

-----更新我的整个设置-----

//options for the main grid
      $scope.gridOptions = {
        enableFiltering: true,
        multiSelect: false,
        onRegisterApi: function(gridApi){
          $scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid

          //handler for clicking rows and getting row object
          gridApi.selection.on.rowSelectionChanged($scope, function(row){
            thisRow = …