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
相关产品推荐
相关产品推荐

