如何在Kendo复选框勾选/取消前添加权限验证弹窗（AngularJS场景）

核心思路 #

当用户点击复选框时，先拦截操作并验证权限：如果无权限，就恢复复选框的原有状态，同时阻止自动勾选/取消子节点的默认行为，确保整个树的状态一致性。

完整代码修改 #

首先更新你的onCheck函数，添加权限验证和状态恢复逻辑，同时补充辅助函数处理子节点：

// 你的原有options配置保持不变
$scope.options = { 
  checkboxes: { checkChildren: true }, 
  loadOnDemand: false, 
  check: onCheck, 
  dataSource: $scope.treeData, 
  template: '{{ dataItem.text}}', 
  schema: { model: { children: "List" } } 
};

// 保存TreeView实例（需要在HTML中配置kendo-tree-view="treeView"）
$scope.treeView = null;

function onCheck(e) {
  var sender = e.sender;
  var currentItem = sender.dataItem(e.node);
  
  // 获取操作前的原有选中状态（事件触发时状态已切换，取反即可）
  var originalChecked = !currentItem.checked;

  // 替换为你的实际权限验证逻辑
  var hasPermission = checkIfUserHasOperationRights(currentItem.rights);

  if (!hasPermission) {
    // 阻止默认行为，避免自动处理子节点
    e.preventDefault();

    // 恢复当前节点的原有选中状态
    currentItem.set("checked", originalChecked);

    // 因为配置了checkChildren: true，递归恢复所有子节点的状态
    if (sender.options.checkboxes.checkChildren) {
      restoreChildNodesState(e.node, originalChecked);
    }

    // 弹出无权限提示（可替换为项目的模态框组件）
    alert("抱歉，您没有权限进行此操作！");
  }
}

// 递归恢复子节点的选中状态
function restoreChildNodesState(parentNode, targetCheckedState) {
  var treeView = $scope.treeView;
  var childNodes = treeView.children(parentNode);
  
  childNodes.each(function() {
    var childItem = treeView.dataItem(this);
    // 更新子节点状态，TreeView会自动同步UI
    childItem.set("checked", targetCheckedState);
    // 递归处理深层子节点
    restoreChildNodesState(this, targetCheckedState);
  });
}

// 自定义权限验证函数，根据业务需求实现
function checkIfUserHasOperationRights(nodeRights) {
  // 示例：判断节点权限中是否包含"modify"权限
  // 实际场景可从用户权限列表/服务端接口获取验证结果
  return nodeRights && nodeRights.includes("modify");
}

对应的HTML需要配置TreeView的引用，方便后续获取实例：

<div kendo-tree-view="treeView" k-options="options"></div>

关键细节说明 #

• 获取原有状态：Kendo的check事件触发时，复选框状态已经完成切换，所以用!currentItem.checked来获取操作前的状态。
• 阻止默认行为：e.preventDefault()会禁用TreeView自动勾选/取消子节点的逻辑，避免子节点状态被错误修改。
• 状态同步：通过dataItem.set("checked", ...)更新数据，TreeView会自动同步UI，不需要手动操作DOM。
• 递归恢复子节点：因为开启了checkChildren: true，如果不手动恢复子节点，会出现父节点状态恢复但子节点状态不一致的问题。

可选优化 #

• 把原生alert替换为AngularJS生态的模态框组件（比如ui-bootstrap的$uibModal），提升用户体验。
• 如果权限验证需要调用服务端接口，可改为异步验证逻辑（注意要先阻止默认行为，等接口返回后再决定是否恢复状态）。

内容的提问来源于stack exchange，提问作者dscythe