标签: angular-ui-grid

我的代码中的ng-grid有以下设置:

$scope.gridOptions = {
    ...
    useExternalSorting : false,
}

$scope.watch('gridOptions.ngGrid.config.sortInfo', function (oldValue, newValue) {
    console.log(newValue)
})

我也试过用sortInfo : undefined和$watch(gridOptions.sortInfo).这似乎仅在网格最初加载时起作用.之后,当我点击标题列时,它似乎没有进入回调函数$watch.我尝试在回调函数中放置一个调试器来触发排序,我可以看到代码用正确的信息更新sortInfo数组,但是它似乎没有进入watch语句的回调函数.我的设置有什么不对吗？我在这里有一个类似于我正在尝试的东西.

我正在使用ui-grid和306_expandable_grid,我已经使用了doc中的确切代码,但我遇到了一个错误问题.

app.js

$http.get('resources/data/title2.json')
    .success(function(data){

        console.log(data);
        console.log(data[0].Data);
        console.log(data.length);
        for(i = 0; i < data[i].length; i++){
           data[i].subGridOptions = {
                  columnDefs: [ 
                    {name:"Title" },
                    {name:"Jan-10" },
                    {name:"Feb-10"},
                    {name:"Mar-10" },
                    {name:"Apr-10" },
                    {name:"May-10" },
                    {name:"Jun-10" },
                    {name:"Jul-10" },
                    {name:"Aug-10" },
                    {name:"Sep-10" },
                    {name:"Oct-10" },
                    {name:"Nov-10" },
                    {name:"Dec-10" }
                ],
              data: data[i].Data
          }
      }
        // $scope.subGridOptions.data = data;
        $scope.gridOptions.data = data;
        // $scope.title = data[0].Title;
    });

externalHtmlFile.html

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

这是我坚持的错误

 TypeError: Cannot read property 'data' of undefined
    at new <anonymous> (http://localhost/ng-Grid/resources/scripts/ui-grid-unstable.js:2883:41)
    at Object.e [as …

我想使用angularjs ui-grid并且有一个条件:必须可以设置列过滤器菜单的样式.

在文档中,仅解释了如何将新项添加到列菜单,而不是如何更改设计或添加其他控件.如果我们查看示例,应该可以打开一个列菜单,可以显示两个自定义样式的单选按钮(男性,女性),两个按钮两个接受或拒绝更改.如果接受更改,则应应用过滤器.

是否可以在列菜单中使用模板,因为列标题可以使用？如何创建自定义列菜单？

谢谢.

我正在尝试从Smart-Table版本1.x 切换到Angular ui-grid(版本3.0),替换ng-grid.
我几乎喜欢关于ui-grid的一切,但有一件事让我发疯.在智能表中,有一个值dataRow,这是一种在表中引用实体的便捷方式.

我使用它的是填充html模板以包含来自实体的字段信息,类似于ng-click="$parentScope.edit(dataRow.id)"放置在网格单元格中的html模板.

但是,在ui-grid中,我似乎无法在不进行正式行或单元格选择的情况下访问实体对象.将它包含在单元格模板中的任何努力都会产生一个对象(row.entity)但我无法访问任何实体元素,它们显示为未定义.有任何想法吗？

此外,我已经能够在html模板中执行一个方法,但只能在没有参数的情况下执行,而不是尝试使用实体本身的参数.

这是我使用smart-table的 html模板:

<a data-toggle="tooltip" data-placement="top" title="View    {{filteredRowCollection}}"   ng-click="$parent.$parent.$parent.$parent.view(dataRow.id)"
   class="glyphicon glyphicon-camera green">
</a>
<a data-toggle="tooltip" data-placement="top" title="Edit {{selectionId}}" ng-click="grid.appScope.edit(row.entity.id)"
   class="glyphicon glyphicon-pencil blue">
</a>
<a data-toggle="tooltip" data-placement="top" title="Delete {{selectionId}}"  ng-click="$parent.$parent.$parent.$parent.delete(dataRow.id)"
   class="glyphicon glyphicon-trash red">
</a>

我试图用ui-grid这样的东西:

function edit(row){
    . . .
};

row,此时是一个对象,就是这样row.entity.我希望能够使用row.entity.id其中一个字段,但确实如此undefined.

有一个好的谷歌,我似乎无法找到ui-grid的CDN链接...有没有理由它不在CDN上？

编辑:已 添加至CDNJS 2015年9月

如何在AngularJS ui-grid中对分组行进行排序？

就像在官方分组教程中一样,在演示网格中,如果我按升序对天平列进行排序,则所有分组行都不会更改,但排序实际上对每个分组行下的行生效.如下图所示.

问题是,我如何使其工作,以便排序可以在分组的行上工作.

我试图将groped列的排序优先级设置为高于0,但这似乎不起作用.

我想更改角度ui网格标题的颜色和文本.

我希望标题的背景为黑色,文本为白色.

我不想要渐变或阴影.我只想要它黑.

我需要添加什么CSS？

有人可以解释一下ui-grid中gridApi的用途和onRegisterApi事件的目的是什么？什么是网格渲染时的事件顺序？

我使用angularjs 1.5.0与角度ui网格3.1.1.当我在控制器体中分配gridOptions(传递给grid指令)对象时,如下所示:

$scope.gridOptions = {
      data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
    };

HTML:

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

它按预期显示表格.但是当我尝试更改$ scope.on中的数据时:

$scope.$on('update', function (event, passedFromBroadcast) {
      $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
    });

它只呈现表格的框架,当包括分页时,它也会呈现与分页相关的控件 - 但不会呈现内容本身.仅在我调整浏览器窗口大小后才会显示内容(行和列标题).

1. 当$ scope.on中的数据发生变化时,为什么angular-ui网格不更新表内容？

2. 如何手动更新角度ui网格表？ 我已经尝试过的事情:

   $scope.gridApi.core.handleWindowResize(); // Does not work
   $scope.gridApi.core.refresh(); // Does not work
   $timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work
   

   Run Code Online (Sandbox Code Playgroud)

我正在使用ui-grid v3.1.1并启用了rowSelection.我注意到当我启用行选择时,我无法再从行中选择(单击 - 按住 - 拖动)文本.

我在他们的教程(页面上的第二个网格)中的示例中注意到了相同的行为.

很高兴知道在启用rowSelection的同时,我仍然可以允许用户选择文本.

这是教程中示例的一个plunkr链接.

$scope.gridOptions = { 
     enableRowSelection: true, 
     enableRowHeaderSelection: false 
};