如何通过Sandbox页面编辑器获取Fusion流程申请页AF表格多选行值

方案一：DOM遍历提取选中行数据 #

通过浏览器DOM结构直接定位选中行，提取申请编号，无需依赖ADF内部API，适配性更强：

1. 在Page Composer中添加自定义脚本
   进入页面编辑模式，找到合适的布局容器（如按钮所在区域），添加「HTML Markup」组件，插入以下脚本：

   <script type="text/javascript">
   function getSelectedRequisitionNumbers() {
       // 定位目标表格：可通过浏览器开发者工具查看表格id，或用包含VO名称的模糊匹配
       var table = document.querySelector('table[id*="RequisitionSearchLineVO"]');
       if (!table) return [];
       
       // 获取所有选中行（Fusion选中行默认带af_table_row_selected类）
       var selectedRows = table.querySelectorAll('tr.af_table_row_selected');
       var reqNumbers = [];
       
       selectedRows.forEach(row => {
           // 调整cells索引匹配申请编号所在列（索引从0开始）
           var reqCell = row.cells[1];
           if (reqCell) {
               reqNumbers.push(reqCell.textContent.trim());
           }
       });
       
       return reqNumbers;
   }
   
   // 绑定自定义按钮点击事件（替换#viewUOMBtn为按钮实际id）
   document.addEventListener('DOMContentLoaded', function() {
       var viewBtn = document.querySelector('#viewUOMBtn');
       if (viewBtn) {
           viewBtn.addEventListener('click', function() {
               var selectedReqs = getSelectedRequisitionNumbers();
               if (selectedReqs.length === 0) {
                   alert('请至少选择一行');
                   return;
               }
               // 此处可扩展后续业务逻辑，比如弹窗展示或传递数据
               console.log('选中申请编号:', selectedReqs);
               alert('选中的申请编号:\n' + selectedReqs.join('\n'));
           });
       }
   });
   </script>
   

2. 配置自定义按钮
   在Page Composer中给「View UOM」按钮设置唯一id（如viewUOMBtn），确保脚本中的选择器能匹配到按钮。

方案二：利用ADF Faces客户端API（推荐，更稳定） #

如果环境允许调用ADF客户端API，可直接通过组件对象获取选中行数据，避免DOM结构变更导致的失效：

1. 获取表格Client ID
   在Page Composer中选中目标af:table，查看属性面板中的「Client Id」（通常是类似pt1:r1:0:t1的带冒号字符串），记下来备用。

2. 添加自定义脚本
   同样通过「HTML Markup」组件插入以下代码：

   <script type="text/javascript">
   function getSelectedReqsViaADF() {
       // 替换为表格实际Client ID
       var tableClientId = 'YOUR_TABLE_CLIENT_ID';
       var tableComp = AdfUIComponent.findComponentByAbsoluteId(tableClientId);
       if (!tableComp) return [];
       
       // 获取选中行的键集合
       var selectedRowKeys = tableComp.getSelectedRowKeys();
       var reqNumbers = [];
       var collectionModel = tableComp.getCollectionModel();
       
       selectedRowKeys.forEach(key => {
           collectionModel.setRowKey(key);
           var rowData = collectionModel.getRowData();
           // 替换为VO中申请编号的属性名（如RequisitionNumber）
           var reqNumber = rowData.RequisitionNumber;
           if (reqNumber) {
               reqNumbers.push(reqNumber);
           }
       });
       
       return reqNumbers;
   }
   
   document.addEventListener('DOMContentLoaded', function() {
       var viewBtn = document.querySelector('#viewUOMBtn');
       if (viewBtn) {
           viewBtn.addEventListener('click', function() {
               var selectedReqs = getSelectedReqsViaADF();
               if (selectedReqs.length === 0) {
                   alert('请至少选择一行');
                   return;
               }
               console.log('选中申请编号:', selectedReqs);
               alert('选中的申请编号:\n' + selectedReqs.join('\n'));
           });
       }
   });
   </script>
   

3. 参数调整

   • 将YOUR_TABLE_CLIENT_ID替换为实际表格的Client ID
   • 将rowData.RequisitionNumber替换为RequisitionSearchLineVO中申请编号对应的属性名

注意事项 #

• 测试时用浏览器开发者工具检查DOM结构，确认选中行的CSS类、表格id、列索引是否正确
• 若ADF客户端API不可用（如部分Fusion版本限制），优先使用方案一
• 确保按钮id唯一，避免脚本选择器匹配错误

内容的提问来源于stack exchange，提问作者Mohamed Jeelan . A