ng-grid 在 ui-grid 中的“beforeSelectionChange”相当于什么?

2024-03-12

In ng-grid,我以前用过beforeSelectionChange通过以下方式:

当用户选择一行时,将执行 ajax 调用。当 ajax 调用发生时我设置$scope.doingAjaxCall = true,并为了防止用户更改选择,我在网格定义中添加了以下内容:

beforeSelectionChange: function () {
    return !($scope.doingAjaxCall);
},

它锁定/冻结正在发生的 ajax 调用的选择。

Now, in ui-grid(又名 ng-grid 3),我不知道相当于什么afterSelectionChange.

在文档的这一部分中:
http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi
我看到两个事件:

  • rowSelectionChanges
  • rowSelectionChangedBatch.

这些似乎相当于旧的afterSelectionChange

在文档的这一部分中:
http://ui-grid.info/docs/#/api/ui.grid.selection.service:uiGridSelectionService http://ui-grid.info/docs/#/api/ui.grid.selection.service:uiGridSelectionService
我看到这两种方法似乎与需求相关:

  • raiseSelectionEvent(grid, changedRows, event)
  • decideRaiseSelectionEvent(grid, row, changedRows, event)

但我不明白如何使用它们

重要的提示:
我在用着multiSelect: false(即:只能选择一行)


这有点像黑客,但它会完成工作,直到您找到更好的解决方案。这是一个工作plunker http://plnkr.co/edit/SuJxNQ?p=preview.

我假设你使用rowSelectionChanged执行 AJAX 调用并切换doingAjaxCall.

gridApi.selection.on.rowSelectionChanged($scope, function(row) {
  $log.log('Row ' + row.entity.id + ' selected: ' + row.isSelected);

  $log.log('  Simulating ajax call...');
  $scope.doingAjaxCall = true;
  $timeout(function() {
    $log.log('  ...done with ajax call');
    $scope.doingAjaxCall = false;
  }, 2000);
});

然后,修改 ui-grid 用于选择按钮的模板。

$templateCache.put('ui-grid/selectionRowHeaderButtons',
  '<div ' +
  '  class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ' +
  '  ng-class="{\'ui-grid-row-selected\': row.isSelected}" ' +
  '  ng-click="grid.appScope.clickConditions() && selectButtonClick(row, $event)"> ' + // Modified template here
  '  &nbsp; ' +
  '</div>'
);

这边走,$scope.clickConditions()被评估before调用实际的点击逻辑。如果它是假的,那么selectButtonClick处理内部选择逻辑的 永远不会被调用。

$scope.clickConditions = function() {
  // Check for any other conditions you need
  return !$scope.doingAjaxCall;
};

正如我提到的,这非常 hacky!有更好的方法来覆盖模板(例如ui-grid/selectionRowHeaderButtons),当覆盖模板时,你必须检查更新时的逻辑 http://ui-grid.info/docs/#/tutorial/317_custom_templates,你应该让用户知道发生了什么事visually当执行 AJAX 调用时等

更好的解决方案是分叉存储库并添加您自己的beforeSelectionChange逻辑(可能开始here https://github.com/angular-ui/ui-grid/blob/master/src/features/selection/js/selection.js#L460)。但似乎您在其他地方没有得到太多帮助,所以希望这至少能让您开始!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-grid 在 ui-grid 中的“beforeSelectionChange”相当于什么? 的相关文章

  • Angularjs 模式的复选框表现得很奇怪

    我有一个有角度的应用程序plunker http plnkr co edit rac8w9g8L0eX8mlXKuVn p preview 当我们单击该按钮时 它会打开一个包含项目列表的模式对话框 其中 2 项是根据复选框表输入中的条件进行
  • Angular 1.0.8 $resource 具有多个可选的获取参数

    我的学生 url 如下所示 var Student resource app student studentid courseId studentid id courseId cid 当我不带参数调用它时 我希望 url 为 app stu
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • AngularUI 可排序不适用于多个应用程序

    我创建了带有可排序列表的 angularjs 应用程序 我的应用程序可以与其他不同的应用程序一起多次包含在页面中 每个角度应用程序都是独立的用户控制 var myapp angular module myapp ui myapp contr
  • 如何在 AngularJS 中从 ng-include 切换控制器值?

    我正在使用 AngularJS 我有一个header html我已经使用 ng include 将该 html 页面合并到另一个 html 中 另外 我有一个下拉列表header html我希望显示所选值 从下拉列表中 列表 我怎样才能做到
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 如何使用 Angularjs 检查模块中的指令或控制器是否可用

    在 angularjs 中 给定一个模块 如何检查给定一个模块是否存在指令 控制器 我有一个模块 我想知道是否已加载某些特定指令 下面是一些示例代码 var module angular module myModule check if c
  • 到子级的角度路由 - 来自不同父级的子级

    我正在使用打字稿进行角度路由 但面临一些路由问题 流程似乎是 我真正想做的是通过Child Child2的一部分 其ID为Child1的Child 路由 但它不显示页面 Child1 用于插入 更新的所有路由都驻留在 Child1 中 而
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • 输入类型 = AngularJS 中的数字验证

    我正在尝试验证 lt input type number gt 通过使用输入 数字 AngularJS 模块 ng 的指令 当使用数字类型的输入时 最大 或最小 属性设置为数字 例如
  • 如何发布数组多维角度js

    我在 angularjs 中有一个数组 示例如下 scope order qty 20 scope order adress Bekasi scope order city Bekasi 这个数组可以用这个代码发布 http method
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • 有没有办法禁用所选 DOM 元素的 Angular 双大括号表示法?

    在我们的网站上 我们显示用户生成的内容 博客文章等 它由 Symfony 应用程序呈现 前端目前正在以 Angular 应用程序的形式重写 现在我们注意到 当用户的博客文章包含双花括号符号时 Angular 会处理它 这是不希望的 Angu
  • angularjs:timeout 在 $http POST 请求中不起作用

    我的代码中有以下代码片段 它为请求设置了以毫秒为单位的超时 但即使满足超时 它也不会取消 var httpURL method URLobj method url urlString data data withCredentials tr
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我

随机推荐