代码之家 › 专栏 › 技术社区 › Vinod Louis

如何防止自定义元素上的行选择在UI-GRID中单击

ui-grid ng-grid angular-ui-grid angularjs javascript

Vinod Louis · 技术社区 · 9 年前

我在使用带有行选择和自定义单元格元素的UI GRId时遇到了一个问题:

示例plunker如下: http://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview

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

$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];

您可以看到,单击行时,相应的行会被选中,而如果您倾向于隐式选择下拉选项,行选择事件也会被触发,我希望在元素上单击类似下拉列表的内容时,不应触发行选择事件。

请指导。

2 回复 | 直到 9 年前

Brian 9 年前

有趣的问题,还没有遇到,但我相信这是我唯一一次遇到。我创建了一个plunk来演示我的解决方案。

基本上,正如AranS所提到的,我所做的是注册一个观察者。从那里,我们有两个要处理的对象:行和发生的事件。由于事件对象显示了选中(单击)的元素,因此我们可以确定它是DIV还是其他元素。如果选择列表发生更改,则为evt.srcElement的值。tagName为“SELECT”。

http://plnkr.co/edit/k2XhHr2QaD1sA5y2hcFd?p=preview

  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
      if (evt)
        row.isSelected = (evt.srcElement.tagName === 'DIV');
    });

  };

Community Mohan Dere 8 年前

ui网格的API允许控制行选择。从另一个线程看这个答案: https://stackoverflow.com/a/33788459/5954939 基本上你可以利用这个活动 rowSelectionChanged 或 isRowSelectable 如果你需要一个例子,请告诉我。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前