homepage收获 jsp ----id isExist!

博客展示了JSP与JavaScript的数据交互过程。在提交的JSP中,将ID存入Vector并设置到session。在目标JSP里,从session获取Vector数据,将其转为JavaScript数组。还定义了isExist函数,用于检查ID是否存在于数组中。
//提交的jsp
Vector vector = new Vector();
  id = scbean.getAttSuccessfulCaseID();
  vector.addElement(String.valueOf(id));
session.setAttribute("id",vector);

//提交到的jsp
//script  function
    if(isExist(id.value)){
     alert("<ses:i18n localize='i18nId'>homepage.message.isExist</ses:i18n>");
     id.focus();
     id.select();
     return false;
    }
//
<SCRIPT LANGUAGE="JavaScript">
<%
Vector vector = (Vector) session.getAttribute("id");
%>
 p = new Array(<%=vector.size()%>)
<%
 for(int i=0;i<vector.size();i++)
 {
  Object object = vector.elementAt(i);
  String string = String.valueOf(object);
  out.println("p[" + i + "] = '" + string + "';");
 }
%>
 function isExist(id){ 
  for(j =0 ;j < p.length; j ++) {
   if(p[j] == id)
    return true;
  }
  return false;
 }
</SCRIPT>
<think>我们正在讨论的是在Element UI的el-table中实现勾选行的功能。根据引用内容,我们可以总结出几种常见的实现方式: 1. **基本勾选功能**:使用el-checkbox列,通过控制一个数组(selectedData)来存储选中的行数据。在selectChange方法中,根据复选框的变化(val)和当前行数据(row)来更新selectedData数组(引用[1])。 2. **树形表格的联动勾选**:当表格是树形结构时,需要实现父子联动勾选。这包括: - 勾选父级时,自动勾选所有子级(包括深层子级) - 取消勾选父级时,自动取消所有子级 - 子级部分勾选时,父级显示为半选状态 - 所有子级都勾选时,父级自动勾选 - 同时,在分页或查询后,需要保留之前的勾选状态(引用[2]) 3. **勾选行的数据获取与计算**:通过el-table的ref(例如:this.$refs.multipleTable.selection)可以获取到当前选中的所有行数据,进而可以进行求和或其他计算(引用[3])。 根据用户当前的问题,他想要知道在el-table中勾选某些行的实现方法。我们可以结合引用内容,给出两种常见场景的实现方法: ### 方法一:基本勾选(非树形表格) 在非树形表格中,我们可以通过以下步骤实现: 1. 在el-table中添加一个el-table-column,类型为复选框。 2. 使用一个数组(如selectedData)来存储选中的行。 3. 使用isExist方法判断当前行是否已选中(即是否在selectedData中)。 4. 在复选框的change事件中,根据选中状态更新selectedData数组。 示例代码(基于引用[1]): ```html <el-table :data="tableData"> <el-table-column align="center" width="50"> <template v-slot="scope"> <el-checkbox :value="isExist(scope.row)" @change="(val) => selectChange(val, scope.row)" ></el-checkbox> </template> </el-table-column> <!-- 其他列 --> </el-table> ``` 在Vue实例中: ```javascript data() { return { selectedData: [] // 存储选中的行数据 }; }, methods: { // 判断当前行是否已选中,返回索引,不存在则返回-1 isExist(row) { return this.selectedData.findIndex(item => item.id === row.id); }, // 复选框变化事件 selectChange(val, row) { let idx = this.isExist(row); if (val && idx === -1) { this.selectedData.push(row); // 选中且之前未选中,则添加 } else if (!val && idx !== -1) { this.selectedData.splice(idx, 1); // 取消选中且之前已选中,则移除 } } } ``` ### 方法二:树形表格的联动勾选(复杂场景) 对于树形表格,Element UI提供了树形数据展示,但多选框的联动需要自己实现。引用[2]提到了实现父子联动勾选的要求。我们可以使用以下思路: 1. 使用el-table的`row-key`和`tree-props`属性来开启树形表格。 2. 维护一个选中数组(selectedData)和一个半选数组(indeterminateData)来记录选中和半选状态。 3. 实现一个递归方法,当父节点被选中时,递归选中所有子节点;当父节点被取消时,递归取消所有子节点。 4. 当子节点状态变化时,检查父节点的状态(全选、半选或未选)并更新。 由于实现较为复杂,这里给出一个简化版的思路代码(基于引用[2]): ```javascript // 递归选中所有子节点 function selectChildren(row, selected) { if (row.children && row.children.length > 0) { row.children.forEach(child => { // 更新当前子节点状态 updateSelected(child, selected); // 递归子节点的子节点 selectChildren(child, selected); }); } } // 更新选中状态 function updateSelected(row, selected) { let idx = this.selectedData.findIndex(item => item.id === row.id); if (selected) { if (idx === -1) { this.selectedData.push(row); } } else { if (idx !== -1) { this.selectedData.splice(idx, 1); } } } // 在复选框的change事件中 selectChange(val, row) { // 更新当前行 updateSelected(row, val); // 如果选中,则递归选中所有子节点 if (val) { selectChildren(row, val); } else { // 取消选中,递归取消所有子节点 selectChildren(row, val); } // 然后检查父节点的状态(需要向上遍历父节点,调整父节点的选中状态) // 这里省略对父节点状态调整的代码(需要递归向上更新父节点) } ``` ### 获取勾选行的数据 无论是哪种表格,我们都可以通过以下方式获取选中的行数据: 1. 直接使用我们维护的selectedData数组。 2. 或者使用el-table的ref(需要设置ref="multipleTable"): ```javascript this.$refs.multipleTable.selection // 获取当前选中的行(注意:在树形表格中,这种自带的selection可能不包含子节点,所以自己维护的数组更可靠) ``` ### 注意事项 - 在树形表格中,Element UI自带的多选框列(type="selection")默认不支持联动,所以需要自己实现。 - 实现联动时,注意性能问题,尤其是当数据量很大时。 ### 相关问题 §§相关问题§§ 1. 如何在Element UI的el-table中实现树形结构的联动勾选? 2. 如何获取el-table中当前选中的行数据? 3. 在el-table中,如何实现分页后保留勾选状态? </think>在 Element UI 的 `el-table` 中实现行勾选功能,主要有以下三种方法(根据引用内容整合): ### 方法一:基础复选框勾选(非树形表格) 通过自定义复选框列实现行勾选功能,适合普通表格[^1]: ```html <el-table :data="tableData"> <!-- 复选框列 --> <el-table-column align="center" width="50"> <template v-slot="scope"> <el-checkbox :value="isExist(scope.row)" @change="(val) => selectChange(val, scope.row)" ></el-checkbox> </template> </el-table-column> <!-- 数据列 --> <el-table-column prop="name" label="名称"></el-table-column> </el-table> ``` ```javascript data() { return { selectedData: [], // 存储选中行数据 canSelectNum: 5 // 最大可选数量 } }, methods: { // 检查行是否已选中 isExist(row) { return this.selectedData.findIndex(item => item.id === row.id) !== -1; }, // 处理勾选变化 selectChange(val, row) { if(val && this.selectedData.length >= this.canSelectNum) return false; const idx = this.selectedData.findIndex(item => item.id === row.id); if(val && idx === -1) { this.selectedData.push(row); // 添加选中 } else if(!val && idx !== -1) { this.selectedData.splice(idx, 1); // 移除取消 } } } ``` ### 方法二:树形表格联动勾选(父子联动) 针对树形结构数据,需实现父子节点联动[^2]: ```javascript // 递归处理子节点勾选 handleTreeSelect(row, selected) { // 处理当前节点 const idx = this.selectedData.findIndex(item => item.id === row.id); if(selected && idx === -1) this.selectedData.push(row); if(!selected && idx !== -1) this.selectedData.splice(idx, 1); // 递归处理子节点 if(row.children) { row.children.forEach(child => { this.handleTreeSelect(child, selected); }); } } // 更新父节点状态(半选/全选) updateParentStatus(row) { // 实现逻辑需遍历父节点,根据子节点勾选状态更新 // (具体实现需结合树形数据结构深度递归) } ``` ### 方法三:内置多选列(快速获取) 使用 Element UI 内置的多选列类型,适合简单场景[^3]: ```html <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> </el-table> ``` ```javascript methods: { // 自动获取所有选中行 handleSelectionChange(selection) { this.selectedData = selection; // 可对选中行数据进行操作(如求和) const total = selection.reduce((sum, row) => sum + row.value, 0); } } ``` ### 关键特性对比 | **方法** | **适用场景** | **父子联动** | **获取数据方式** | |------------------|--------------------|-------------|--------------------------| | 自定义复选框列 | 需要精细控制的场景 | ❌ 不支持 | 手动维护 `selectedData` | | 树形递归勾选 | 树形表格 | ✅ 支持 | 递归维护 `selectedData` | | 内置多选列 | 简单选择场景 | ❌ 不支持 | `@selection-change` 事件 | ### 注意事项 1. **跨页保存状态**:在分页/查询时保留勾选状态,需在请求数据前缓存 `selectedData`,数据返回后根据ID重新匹配[^2] 2. **性能优化**:树形表格递归时,对大数量级数据使用 `Map` 存储ID提高查找效率 3. **禁用控制**:可通过 `:disabled="scope.row.disabled"` 实现条件禁用[^1]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值