You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Camunda表格行复选框选中/取消逻辑失效,求实现全选收集数据方案

解决Camunda嵌入式表单表格复选框问题

一、修正全选逻辑&行复选框联动

你的checkAll函数里有个明显的逻辑漏洞:判断$scope.selectedAll后又把它赋值成和原来一样的状态,等于没做任何切换!咱们先把核心逻辑理顺,同时补上复选框联动的逻辑:

// 全选/取消全选切换
$scope.checkAll = function () {
  // 先对全选状态取反,这才是切换的关键
  $scope.selectedAll = !$scope.selectedAll;
  // 遍历所有文档,同步每一行的选中状态
  angular.forEach($scope.selectedDocuments, function (item) {
    // 注意:别用和数组名重名的属性!改成item.isSelected这类清晰命名
    item.isSelected = $scope.selectedAll;
  });
  // 同步收集选中的数据
  $scope.gatherSelectedItems();
};

// 行复选框变化时,自动更新全选框状态
$scope.onRowSelectChange = function () {
  // 判断所有行是否都被选中,以此更新全选框的状态
  $scope.selectedAll = $scope.selectedDocuments.every(function(item) {
    return item.isSelected === true;
  });
  // 同步收集选中的数据
  $scope.gatherSelectedItems();
};

// 专门收集选中的数据到数组
$scope.selectedItems = [];
$scope.gatherSelectedItems = function () {
  $scope.selectedItems = $scope.selectedDocuments.filter(function(item) {
    return item.isSelected === true;
  });
  // 如果需要把选中数据同步到Camunda流程变量,加这行:
  // $scope.model.variables.selectedItems = $scope.selectedItems;
};

// 初始化全选状态
$scope.selectedAll = false;

二、对应HTML代码调整

要把复选框的ng-model绑定到正确的属性,同时用ng-change触发状态同步:

<table>
  <thead>
    <tr>
      <!-- 全选复选框 -->
      <th>
        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" />
        全选
      </th>
      <!-- 其他表头字段 -->
      <th>文档名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历文档数组生成表格行 -->
    <tr ng-repeat="doc in selectedDocuments">
      <td>
        <!-- 行复选框,绑定到当前行的isSelected属性 -->
        <input type="checkbox" ng-model="doc.isSelected" ng-change="onRowSelectChange()" />
      </td>
      <td>{{doc.name}}</td>
      <td><!-- 自定义操作按钮 --></td>
    </tr>
  </tbody>
</table>

<!-- 可选:调试用,实时显示选中的数据 -->
<div>已选中文档:{{selectedItems}}</div>

关键提醒

  • 别把行选中属性命名成和数组名selectedDocuments一样!你原来代码里用item.selectedDocuments会导致属性冲突,改成item.isSelected这类明确的命名更稳妥。
  • 如果需要把选中的数据提交给Camunda流程引擎,记得在gatherSelectedItems里给$scope.model.variables赋值,这样表单提交时数据会被同步到流程变量中。
  • Camunda嵌入式表单基于AngularJS 1.x,确保使用的指令(ng-model/ng-repeat/ng-change)都是AngularJS 1的语法。

内容的提问来源于stack exchange,提问作者beginer beginer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 08:22:47