标签: angular-ui-grid

ui-grid(3.0.0-rc.16)在使用过滤日期时效果不佳.过滤其他字段效果很好.

这是一个骗子:

http://plnkr.co/edit/b9NSk0

尝试开始输入2014年的任何日期.

我还是错过了什么错误？

// main.js
var app = angular.module('myApp', ['ui.grid', 'ui.grid.i18n']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    eventName: "event1",
    eventDateRaw: new Date(1416396274368),
    eventDateFormatted: new Date(1416396274368)
  }, {
    eventName: "event2",
    eventDateRaw: new Date(1416352423803),
    eventDateFormatted: new Date(1416396274368)
  }];

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
      name: 'eventName', width: "20%"
    }, {
      name: 'eventDateRaw', width: "40%"
    }, {
      name: 'eventDateFormatted', width: "40%",
      cellFilter: 'date: "yyyy-MM-dd HH:mm:ss.sss"'
    }],
    enableFiltering: true
  };
});

br remy44

所以我试图让我的Angular UI Grid在整行上注册一个双击事件来打开一个模态.我可以从toasttr吐司开始然后从那里开始.这是我最接近的基于各种演示和在线示例,但我似乎无法让它工作.

控制器:

$scope.gridHandlers = {
  onDblClick: function(rowItem){
    toastr.success(rowItem, 'Row Item:')
  }
}
$scope.gridOptions = {
  onRegisterApi : function(gridApi){
    $scope.gridApi = gridApi
  },
  data: $scope.customerList,
  enableRowHeaderSelection: false,
  enableRowSelection: true,
  enableSelectAll: false,
  multiSelect: false,
  noUnselect: true,
  rowTemplate: '<div ng-dblclick="getExternalScopes().onDblClick(row)" external-scopes="gridHandlers" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>',
  columnDefs : [
  {name: 'name', type: 'string'},
   ...etc
  {name: 'status_name', displayName: 'Status', width: '11%', type: 'string'}
]

视图:

<div class="large-12 cols" ui-grid="gridOptions" ui-grid-selection external-scopes="gridHandlers">

我尝试过使用他们谈论的grid.appScope方法以及其他所有方法,但我无法让它工作.我在哪里,完全关闭？

我一直在尝试使用Angular UI-Grid插件来呈现数据表，并且我有以下示例数据：

var data = [
{"id" : 10, "name" : "Name 1", "city" : "San Francisco"},
{"id" : 12, "name" : "Name 2", "city" : "San Diego"},
{"id" : 20, "name" : "Name 3", "city" : "Santa Barbara"},
];

下面是gridOptions的columnDefs，在名称字段中，我需要使用ui-sref创建超链接

$scope.gridOptions.columnDefs = [
{field: 'id', displayName: 'ID'},
{field: 'name',
cellTemplate: '<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">' +
                       '<a ui-sref="main.placeDetail{{placeId: \'{{row.entity.id}}\' }}">{{COL_FIELD CUSTOM_FILTERS}}</a></div>'
},
{field: 'city', enableSorting: true}
];

除了row.entity.id值之外，该表都呈现良好的外观。我在超链接中（名称列中）获得的值是连续的：1、2和3，而不是数据数组中定义的10、12和20 ，但是，在ID列中显示的id …

如何使角度ui网格始终在编辑模式下显示列？我尝试将cellTemplate设置为editablecelltemplate但它不起作用..这里有任何想法

谢谢,Lokesh

我正在使用cellTooltipcolDef的属性，但这似乎不起作用。

$scope.gridOptions.columnDefs = [{ displayName: 'Test', field: '_test', 
    cellTooltip: function (row, col) { return row.entity._Number },
    cellTemplate: '<div class="ui-grid-cell-contents" title="{{row.entity._Number}}"></div>'},
];

任何帮助，将不胜感激。

我具有ui-grid和菜单的以下配置，但是我正在为显示的每个元素打开菜单（我知道所有项目都打开相同菜单的问题，因为没有区分要打开哪个菜单项的术语；但是我无法引用它）

$scope.gridOptions = {
                enableSelectAll: true,
                exporterCsvFilename: 'AGS_Extract.csv',
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [25, 50, 75],
                paginationPageSize: 25,
                useExternalPagination: true,
                enableGridMenu: true,
                exporterAllDataFn: function () {

                    var paramsObj = {};
                    var url = "http://test.satellite.com:8080/Dashboards/AGSMateervlet";

                    paramsObj['query'] = $scope.keyword;
                    paramsObj['start'] = 0;
                    paramsObj['rows'] = $scope.gridOptions.totalItems;
                    return $http.get(url, { params: paramsObj, headers: { 'Content-Type': 'application/json' } }).then(function (res) {
                        var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                        $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
                    });
                },
                columnDefs: [
                    { name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum', 
                    cellTemplate: …

我ui.bootstrap.datepickerPopup在 内部的过滤器标头模板中使用ui.grid。这让我可以按日期过滤行。我的网格菜单内还有一个用于切换的按钮grid.options.enableFiltering。

由于 的对齐问题ui-grid，我有datepicker-append-to-body日期选择器设置为 true。第一次启用过滤时，一切正常。但是，当我禁用过滤并重新启用它时，我会得到重复的日期选择器。

问题是这样的：

我认为问题在于每次启用过滤器时，以下内容div都会附加到 DOM 中，并且在禁用过滤器时永远不会删除。

<div uib-datepicker-popup-wrap=""
     ng-model="date"
     ng-change="dateSelection(date)"
     template-url="uib/template/datepickerPopup/popup.html"
     class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
    <!-- ngIf: isOpen -->
</div>

这是一个简化的plunker： http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
如果我只在其中使用一个日期选择器，我会遇到同样的问题Time Range。

任何想法都将不胜感激！不想使用 jQuery。

我在理解通过ui-grid提供的属性/功能时遇到了一些困难.我经常对之前版本的ng-grid感到困惑.我试图找到删除检查条目的最​​佳方法.这是我的标记,但由于不太了解我是否有通过行实体可用的索引或计数:

HTML:

       <div class="form-group">
          <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
          <button type="button" id="removeData" class="btn btn-success" ng-click="removeData()">Remove First Row</button>
          <br>
          <br>
          <div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-selection external-scopes="myViewModel" class="grid"></div>
    </div>

在我的控制器下面:

 $scope.removeData = function () {
        console.log($scope.gridApi.selection.getSelectedRows());

        var items = $scope.gridApi.selection.getSelectedRows();

        angular.forEach($scope.myData, function (data, index) {
            angular.forEach(items, function (item) {
                if (item.displayValue = data.displayValue)
                {
                    $scope.myData.splice(index, 1);
                }

            });

displayValue我的列的属性在哪里,$scope.myData是我的数据.是否有不同的方法将该选择发送到控制器以进行删除？我目前的方式不起作用(显然).任何帮助将不胜感激.如果我的标记不完整,我会根据需要更新它.谢谢!

有没有办法动态地,以编程方式,为Angularjs更改ui-grid中列的宽度？

我已经尝试更改$ scope.gridOptions.columnDefs [i] .width,但它没有任何效果.

我问,因为我有ui-grid-resize-columns指令集,允许用户调整最初设置为百分比宽度的列的大小.但是一旦用户进行任何手动修改,列大小都会变为静态,不再随着整个表宽度的增长或缩小.

我想添加一个"自动调整"按钮,允许用户将列大小定义恢复为百分比(基于当前手动设置的比例),最多可达100%.理想情况下,列将再次开始调整为表大小更改.

我可以看到用户经常点击F5来获得这种效果(我会!),在不知不觉中导致整个页面从头开始重新加载,不必要地耗费大量的服务器资源.我想一个不快乐的选择是从一开始就让它们变得静止,消除这种诱惑!

我正在尝试动态添加列ui-grid并分配数据.第一次,电网工作正常.但是,当我尝试动态更改列和数据时,它无法正常工作.

$scope.myfunc = function() {

alert("Rebinding the data");
$scope.gridOptions = {};

$scope.gridOptions.columnDefs.push({
 name: 'firstName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'lastName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'company'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'employed'
  });

  alert("added new columns");
  $scope.gridOptions.data = data1;

  $scope.gridApi.grid.refresh();
};

请检查一下plunkr

任何人都可以调查这个问题并建议我如何做到这一点？