java复选框批量删除_实现Web上行式输入打勾多选和批量删除

野性酷女 2022-11-06 14:50 147阅读 0赞

快逸报表用户在使用行式填报进行数据输入的时候，页面上往往有很多行数据。有些情况下，终端用户要批量操作很多数据，例如：删除30行数据中的28行。如果每一行点一下删除，那么网页要刷新28次，效率比较低。

因此，我们给出一种可以打勾选择多行数据，集中批量操作的方案。

最终效果如图，完整的demo(raq文件和jsp文件)：

![chenhu011.jpg][]

解决方案

报表设计

![chenhu021.jpg][]

其中：A2设置为复选框，关值为0，开值为1。

批量删除的Javascript脚本

在展现的jsp文件中增加如下的脚本。

其原理是：遍历选中行，将选中行依次赋值给currCell，调用行式填报的\_deleteRow(report)，依次删除，实现批量的勾选删除。

function deleteRows()\{

var report = document.getElementById(‘report1′);

for(var i=report.rows.length-2;i>0;i-)\{

var row = report.rows\[i\];

if(!row.all.tags(“input”)\[0\].checked) continue;

var cell = row.cells\[1\];

report.currCell = cell;

\_deleteRow(report);

\}

增加checkbox控件

在展现的jsp文件中增加如下的脚本。

function selcheck() \{

var objs = report1.getElementsByTagName(“input”);

for(var i=0; i

if(objs\[i\].type.toLowerCase() == “checkbox” )

objs\[i\].checked =event.srcElement.checked;

批量操作按钮设置

在展现的jsp文件中增加如下的HTML文本。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="font-size:13px;"> 
     <p>全选:&nbsp;</p> 
     <p>插入&nbsp;</p> 
     <p>添加&nbsp;</p> 
     <p>删除勾选&nbsp;</p> 
     <p>提交</p> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

这样，就轻松实现了行式填报的打勾多选(复选)和批量删除，使得报表不仅能用来展现数据和图表，而且在进行输入时也能更方便。

[chenhu011.jpg]: http://www.runqian.com.cn/know-how/wp-content/uploads/2009/02/chenhu011.jpg
[chenhu021.jpg]: http://www.runqian.com.cn/know-how/wp-content/uploads/2009/02/chenhu021.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP实现多行复选框的单选效果及批量提交

在PHP中，我们可以通过以下步骤实现多行复选框的单选效果，并实现批量提交多行复选框的功能。下面是详细的实现步骤和相应的源代码。步骤1：创建HTML表单首先，我们需要创

妖狐艹你老母/ 2024年02月24日 06:09/ 0 赞/ 54 阅读

相关使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能

前台页面通过sJavaScript实现单击复选框实现全选与全不选功能代码： function checkAll() { var all = docum

绝地灬酷狼/ 2023年10月17日 13:17/ 0 赞/ 20 阅读

相关 vue实现复选框默认勾选功能案例

一、概述 1. 最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后，自己也写了一下代码来实现复选框如何默认勾选的功能；二、案例介绍 1. 实现

以你之姓@/ 2022年11月26日 07:58/ 0 赞/ 621 阅读

相关 java复选框批量删除_实现Web上行式输入打勾多选和批量删除

快逸报表用户在使用行式填报进行数据输入的时候，页面上往往有很多行数据。有些情况下，终端用户要批量操作很多数据，例如：删除30行数据中的28行。如果每一行点一下删除，那么网页要刷

野性酷女/ 2022年11月06日 14:50/ 0 赞/ 148 阅读

相关 yii框架全选反选批量删除

<?php namespace app\\controllers; use Yii; use yii\\filters\\AccessControl;

太过爱你忘了你带给我的痛/ 2022年07月15日 00:37/ 0 赞/ 220 阅读

相关 input复选checkbox多选删除

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2022年05月29日 06:11/ 0 赞/ 280 阅读

相关 ssm批量删除数据，jquery:实现全选和取消全选

> 问题 > > ssm批量删除数据，jquery:实现全选和取消全选解决 1. 实现效果图 ![在这里插入图片描述][70] 2. 原理

比眉伴天荒/ 2022年05月10日 01:38/ 0 赞/ 331 阅读

相关关于全选、反选，批量删除

全选/反选 //全选/反选 function checkOpposite() { //获取所有复选框name属性值为check将其存入数组

╰半夏微凉°/ 2022年04月03日 09:56/ 0 赞/ 196 阅读

相关 jQuery实现全选/反选和批量删除

//全选/全不选 $(function()\{ //初始化时候,删除按钮隐藏 $("input\[name='Delete'").css("display",'non

朱雀/ 2022年01月12日 06:11/ 0 赞/ 402 阅读

相关 Vue实现复选框,批量操作

声明 selectIds 数组： data: { whiteCardList: [], selectIds: [] }, 获取列...

你的名字/ 2021年03月14日 03:18/ 0 赞/ 689 阅读