标签: angular-ui-grid

我正在使用ng-grid的新3.0版ui- grid在我的应用程序中创建一个网格.我正在尝试做的是在我的表格中创建一个可编辑单元格的ng-options下拉列表,其中填充了使用角度工厂检索的数据.

我试图通过使用ui-grid 的editableCellTemplate功能来实现这一点.

这是一些示例代码:

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

控制器:

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

这是一个带代码的plunker.[ 注意:这只是示例代码.用于ng-options的数组正在实际代码中从角度工厂中提取,而不是在范围中声明.editDropdownOptionsArray可能无法正常工作,因为数据是动态的.]

是否可以使用ui-grid执行此操作？我想也许这是一个范围问题,因为如果我将ng-option代码放在​​我的HTML页面中它按预期工作,但我可以从ui-grid文档收集的是temp.html文件应该在范围内.我知道这些东西仍处于不稳定状态,但对此事的任何帮助都将不胜感激!

在ui-grid中实现了更好的分页.该演示看起来不错.但它使用的是不稳定版本.

当我检查凉亭包裹时

bower info angular-ui-grid

最新发现的是#3.0.0-RC.18.

安装凉亭后:

bower install angular-ui-grid#3.0.0-RC.18

我发现不unstable.js使用.并且ui-grid.js安装时不包含任何功能enablePaginationControls.显然,没有安装那个不稳定的版本.

那么,获取不稳定文件的正确方法是什么？

刚查看了GitHub页面链接,发现有新的更新.

我们不希望仅仅通过bower安装单个文件,这违背了包管理的目的.

bower安装版本3.0.0-RC.18-7774d30怎么可能？

我试过了:

bower install angular-ui-grid#3.0.0-RC.18-7774d30 --save

这是错误:

bower not-cached    git://github.com/angular-ui/bower-ui-grid.git#3.0.0-RC.18-7774d30
bower resolve       git://github.com/angular-ui/bower-ui-grid.git#3.0.0-RC.18-7774d30
bower ENORESTARGET  No tag found that was able to satisfy 3.0.0-RC.18-7774d30

Additional error details:
Available versions: 3.0.0-rc.16, 3.0.0-rc.15, 3.0.0-rc.14, 3.0.0-rc.13, 3.0.0-rc.12, 3.0.0-rc.11, 3.0.0-rc.10, 3.0.0-rc.8, 3.0.0-rc.7, 3.0.0-RC.18

我正在使用Angularjs ui-grid并使用默认设置,问题是如何将数字格式化为两位小数？

这是我的plunker示例: http ://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae？p = preview

我正在尝试做的事情: 使用cellTemplate将我的数据中的field04的复选框html绑定到单元格,并仍然可以访问其ng-click功能.

app.js中的代码:

var app = angular.module('app', ['ui.grid', 'ngSanitize']);

app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log, $sce) {

$scope.myViewModel = {
  someProp:'abc',
  showMe : function(){
     alert(this.someProp);
  }
};

$scope.gridOptions = {
};

$scope.gridOptions.columnDefs = [
     { name: 'field01', field: 'field01' },
     { name: 'field02', field: 'field02'},
     { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">'},
     { name: 'field04', field: 'field04', cellTemplate: 'viewTemplate2'},
     { name: 'field05', field: 'field05', cellTemplate: 'viewTemplate2'} 
   ];

$scope.gridOptions.data = [
  {
      "field01": …

我正在为一个项目尝试angular的ui-grid,但发现很难为我的网格构建一个自定义模板.当我检查源代码时,我得到了以下html模板,我将其保存到文件header-template.html并在配置网格时引用它.

<div class="ui-grid-header">
  <div class="ui-grid-top-panel">
    <div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
      <div class="ui-grid-group-panel ng-scope">
        <div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
          Drag a column header here and drop it to group by that column.</div>
        <ul ng-show="groupings.length > 0" class="ngGroupList ">
          <!-- ngRepeat: group in configGroups -->
        </ul>
      </div>
    </div>
    <div class="ui-grid-header-viewport">
      <div class="ui-grid-header-canvas">
         <!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
        <div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 &amp;&amp; colContainer.columnStyle($index)">
          <div ng-class="{ …

我正在使用Angular JS ui Grid

http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex

我的要求是我要显示例如5列,但是当我导出PDF时,我不想导出某些列username.

我怎样才能做到这一点？

我有一个Angular UI Grid元素.我定期在数据阵列的前面添加新项目.我一次只添加几个(比如1到5个新项目)

我希望UI Grid为要添加的新行设置动画.现在,行立即被添加,这使它变得有弹性.我希望新的行能够进行动画处理,因此UI Grid看起来很平滑地添加它们.

这很容易吗？这有选择吗？

我按如下方式定义一列:

{
  name: 'button', 
  displayName: '', 
  cellClass: 'ui-grid-vcenter',
  enableColumnMenu: false,
  enableFiltering: false,
  enableSorting: false,
  cellTemplate: '<div><button ng-click="grid.appScope.rowButtonHandler(row.entity.id)">clicky</button></div>'
}

导致:

<div class="ui-grid-cell ng-scope ui-grid-coluiGrid-010 ui-grid-vcenter" ui-grid-cell="" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name">
    <div class="ng-scope">
        <button ng-click="grid.appScope.rowButtonHandler(row.entity.id)"></button>
    </div>
</div>

我想垂直和水平居中这个按钮.水平,工作,但垂直,我似乎无法正确的CSS.这是我的通用镜头:

.ui-grid-vcenter div {
  text-align: center;
  vertical-align: middle !important;
  background-color: yellow !important;
}

如何在这种AngularJS网格的单元格中居中？

我正在使用Angular UI-GRID,我需要为PDF导出和CSV导出等导出功能创建外部按钮,类似于此图像.你知道我怎么能这样做吗？

此外,我需要一个打印按钮,但我没有在文档中看到它.此网格是否有打印行为？

谢谢你,埃内斯托

我想知道在渲染Angularjs网格后触发的回调函数是什么意味着它的所有单元格都呈现为类似$ .ready()的函数