JavaScript--全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）

最新推荐文章于 2021-12-02 14:44:34 发布
最新推荐文章于 2021-12-02 14:44:34 发布
阅读量246 收藏 1
点赞数
分类专栏： YII
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38568388/article/details/78661863
版权 
<?php
header("content-type:text/html;charset=utf-8");
use yii\helpers\Html;
use yii\widgets\LinkPager;
//print_r($countries);die;  
?>
<h1>显示出数据</h1>
<input type="checkbox" value="全选" οnclick="check(this);">全选
<input type="checkbox" value="全不选" οnclick="check_bx(this);">全不选
<input type="checkbox" value="反选" οnclick="check_fx();">反选
<input type="checkbox" value="批量删除" οnclick="check_del();">批量删除

<script src="public/jq.js"></script>
<style media="screen">
    tr{
        background-color: red;
        font-family: 宋体;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    td{
        background-color: pink;
        border: 2px solid purple;
    }
    .aa{
        border: 2px solid green;
        background-color: yellow;
        font-family: 隶书;
    }
    h1{
        font-family: 华文行楷;
        box-shadow: 10px 10px 5px #888888;
        border:2px solid;
        border-radius:25px;
        width: 200px;
        background-color: white;
    }
    th{
        font-family: 隶书;
        border: 2px solid green;
        background-color: yellow;
    }
    .checkbox{
        width: 25px;
        height: 30px;
    }
</style>
<table border="1">
    <th></th>
    <th>序列号</th>
    <th>父级ID</th>
    <th>地区名称</th>
    <th>操作</th>
    <?php foreach ($countries as $k => $v) {  ?>
        <tr>
            <td><input type="checkbox" id="<?php echo $v['r_id'] ?>" class="checkbox" name="check[]" value="<?php echo $v['r_id'] ?>"></td>
            <td><?php echo $v['r_id'] ?></td>
            <td><?php echo $v['pid'] ?></td>
            <td><span class="num" id="<?php echo $v['r_id'] ?>"><?php echo $v['r_name']?></span></td>
            <td><a href="javascript:void(0)" id="<?php echo $v['r_id'] ?>" class="aa" οnclick="del(this)">删除 </a></td>
        </tr>
    <?php } ?>
</table>
<?= LinkPager::widget(['pagination' => $pagination]) ?>
<script type="text/javascript">
    //即点即改入库  
    $(function(){
        $(document).on('click','.num',function(){
            var id=$(this).attr('id');
            var _this=$(this);
            var new_val=$(this).html();
            _this.parent().html("<input type='text'class='asdf' value="+new_val+" id="+id+">");
            var inp=$('.asdf');
            inp.focus();
            inp.blur(function(){
                var old_id=$(this).attr('id');
                var old_val=$(this).val();
                //inp.parent().html("<span class=\"num\" id="+old_id+">"+old_val+"</span>");  
                $.get("index.php?r=upload/updates",{measure_unit:old_val,id:old_id},function(e){
                    if(e==1){
                        inp.parent().html("<span class=\"num\" id="+old_id+">"+old_val+"</span>");
                    }else{
                        inp.parent().html("<span class=\"num\" id="+old_id+">"+new_val+"</span>");
                    }
                })
            })
        })
    })
</script>
<script>
    //无刷新删除  
    function del(obj)
    {
        var ids=obj.id;
        ajax=new XMLHttpRequest();
        ajax.onreadystatechange=function()
        {
            if(ajax.readyState==4)
            {
                //alert(ajax.responseText);  
                if(ajax.responseText==1)
                {
                    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
                }
                else{
                    alert("删除失败");
                }
            }
        }
        ajax.open("get","index.php?r=upload/del&ids="+ids);
        ajax.send(null);
    }
    /*全选*/
    function check(obj)
    {
        var ids=document.getElementsByName("check[]");
        if(obj.checked)
        {
            for(var i=0;i<ids.length;i++)
            {
                ids[i].checked=true;
            }
        }
    }
    /*全不选*/
    function check_bx(obj)
    {
        var ids=document.getElementsByName("check[]");
        if(obj.checked)
        {
            for(var i=0;i<ids.length;i++)
            {
                ids[i].checked=false;
            }
        }
    }
    //反选  
    function check_fx()
    {
        var ids=document.getElementsByName("check[]");
        for(var i=0;i<ids.length;i++)
        {
            ids[i].checked=!ids[i].checked;
        }
    }
    /*批量删除*/
    function check_del()
    {
        var ids=document.getElementsByName("check[]");
        var str='';
        for(var i=0;i<ids.length;i++)
        {
            if(ids[i].checked)
            {
                str=str+','+ids[i].value;
            }
        }
        new_str=str.substr(1);
        ajax=new XMLHttpRequest();
        ajax.onreadystatechange=function() {
            if (ajax.readyState == 4) {
                //alert(ajax.responseText);    
                if(ajax.responseText==1)
                {
                    for(var j=ids.length-1;j>=0;j--)
                    {
                        if(ids[j].checked)
                        {
                            ids[j].parentNode.parentNode.parentNode.removeChild(ids[j].parentNode.parentNode);
                        }
                    }

                }
                else
                {
                    alert("删除失败");
                }
            }
        }
        ajax.open("get","index.php?r=upload/del_all&new_str="+new_str);
        ajax.send(null);
    }


<?php
namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use yii\filters\VerbFilter;
use app\models\LoginForm;
use app\models\ContactForm;
use yii\web\UploadedFile;
use app\models\Upload;
use yii\data\Pagination;
use app\models\Country;
use app\models\Region;

class UploadController extends Controller
{
    //public $layout=false; //禁用yii自带样式  
    public function actionIndex(){
        $model = new Upload();
        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // 验证 $model 收到的数据  
            // 做些有意义的事 ...  
            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // 无论是初始化显示还是数据验证错误  
            return $this->render('entry', ['model' => $model]);
        }
    }
    public function actionAdds()
    {
        $model = new Upload();
        $request = Yii::$app->request;
        $post=$request->post('Upload');
        $u_name = $post['u_name'];
        $u_pwd = $post['u_pwd'];
        //在浏览器输出的值是 yii\web\UploadedFile Object ( [name] => 2.jpg [tempName] => C:\Windows\php3986.tmp  
        // [type] => image/jpeg [size] => 216848 [error] => 0 )  
        $arr =  $model->u_img = UploadedFile::getInstance($model,'u_img');
        //print_r($arr);  
        if ($model->upload()){
            $u_img = $arr->name;
            //var_dump($u_img);  
            $connection = \Yii::$app->db;
            $result=$connection->createCommand()->insert('upload', [
                'u_name' => $u_name,
                'u_pwd' => $u_pwd,
                'u_img' =>$u_img,
            ])->execute();
            if($result)
            {
                echo "添加成功";
            }
            else
            {
                echo "添加失败";
            }
        }

    }
    /*分页*/
    public function actionLists()
    {
        $query = Country::find();

        $pagination = new Pagination([
            'defaultPageSize' => 1,
            'totalCount' => $query->count(),
        ]);

        $countries = $query->orderBy('name')
            ->offset($pagination->offset)
            ->limit($pagination->limit)
            ->all();

        return $this->render('lists', [
            'countries' => $countries,
            'pagination' => $pagination,
        ]);
    }
    /*地区表进行分页*/
    public function actionShow(){
        $query = Region::find();
        $pagination = new Pagination([
            'defaultPageSize' => 6,
            'totalCount' => $query->count(),
        ]);
        $countries = $query->orderBy('r_id')
            ->offset($pagination->offset)
            ->limit($pagination->limit)
            ->all();
        return $this->render('show', [
            'countries' => $countries,
            'pagination' => $pagination,
        ]);
    }
    /*修改*/
    public function actionUpdates(){
        $name = $_GET['measure_unit'];
        $id = $_GET['id'];
        $connection = \Yii::$app->db;
        $command = $connection->createCommand("UPDATE region SET r_name='$name' WHERE r_id='$id'");
        $command->execute();
        if(!empty($command)){
            echo 1;
        }else{
            echo 0;
        }
    }
    // 无刷新delete  
    public function actionDel(){
        $id=$_GET['ids'];
        $connection=\Yii::$app->db;
        $arr=$connection->createCommand("delete from region where r_id='$id'")->execute();
        if($arr){
            echo 1;
        }else{
            echo 0;
        }
    }
    /*  
   批量删除  
   @new_str  GET  
   */
    public function actionDel_all(){
        $new_str=$_GET['new_str'];
        $connection=\Yii::$app->db;
        $arr=$connection->createCommand("delete from region where r_id in($new_str)")->execute();
        if($arr){
            echo 1;
        }else{
            echo 0;
        }
    }
}
?>

另外一种方法：

<h1>您得到的验证码为：<font id="sum" color="red"></font></h1>
<h2><font color="aqua">验证码的个数是：</font><input type="text" id="num"></h2>
<h3><input type="button" οnclick="fun();" value="点击生成"><input type="reset" value="刷新"></h3>
<html>
<title>点名表</title>
<fieldset style="color: blue">
    <legend><h2>1408phpE班级点名表</h2></legend>
    <h1>点名表</h1>
    <h3><textarea id="student"></textarea></h3>
    <input type="button" οnclick="fun1();" value="点击" id="one">
</fieldset>
</html>
<form>
    <p>
        <input type="checkbox" id="ab" οnclick="fun5();"> 全选/全不选<br>
        <input type="checkbox" value="反选" οnclick="fun6();" id="fa">反选<br>
        <input type="checkbox" name="a" value="吃饭">吃饭<br>
        <input type="checkbox" name="a" value="睡觉">睡觉<br>
        <input type="checkbox" name="a" value="打豆豆">打豆豆<br>
        <input type="checkbox" name="a" value="玩游戏">玩游戏<br>
        <input type="checkbox" name="a" value="看电影">看电影<br>
    </p>
</form>

<script>
    //点名表  
    document.bgColor='green';
    function fun2(){
        var arr=Array('134','1234','14324','12342134','1234123424','34534','6434','342','234','234','342','2341','24','a','s','d','f','g','h','j','n','v','x','xw');
        var num=parseInt(Math.random()*arr.length);
        document.getElementById('student').innerHTML=arr[num];
    }
    function fun1(){
        if(document.getElementById('one').value=='开始'){
            document.getElementById('one').value='停止';
            a=setInterval("fun2();",10)
        }else{
            document.getElementById('one').value='开始';
            clearInterval(a);
        }
    }
    //验证码  
    function fun(){
        var num=document.getElementById('num').value;
        var s='';
        for(var a=1;a<=num;a++){
            s=s+parseInt(Math.random()*10);
        }
        document.getElementById('sum').innerHTML=s;
    }
    //全选  
    function fun5(){
        var q=document.getElementById('ab');
        var w=document.getElementsByName('a');
        if(q.checked==true){
            for(var a=0;a< w.length;a++){
                w[a].checked=false;
            }
        }else{
            for(var a=0;a< w.length;a++){
                w[a].checked=true;
            }
        }
    }
    //反选  
    function fun6(){
        var e=document.getElementsByName('a');
        for(var b=0;b< e.length;b++){
            if(e[b].checked){
                e[b].checked=false;
            }else{
                e[b].checked=true;
            }
        }
    }
</script>
侯亚磊
关注
专栏目录
Dom编程（邮件的全选、反选、删除选中项）
程序员
08-20 755
邮件的全选、反选、删除选中项 table{ border:1px solid #06F; width:60%; } th{ background-color:#0C0; } td, th{ border:1px solid #00C; } .one{ background-color:#FF0; } .two{ background-color:#0CF; } .over{ bac
html中的用户注册与删除
AbyssalMagic的博客
11-12 870
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> td { text-align: center; } </style> <scri
全选/全不选/反选 批量删除 简单易懂
LC_SXC99的博客
12-02 893
全选/全不选/反选 批量删除 简单易懂---适用小白学习
Javascript Jquery 复选框的全选、单选与反选、批量删除
有理想没前途
02-15 4786
// --- 列头全选框被单击 --- function ChkSelectAll(subName, chkAllId){ var arrSub = document.getElementsByName(subName); var chkAll = document.getElementById(chkAllId); var tempStatus=chkAll.checked; for(i
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
Yii框架下JavaScript操作：全选、反选、批量删除与无刷新更新
本文主要分享了在JavaScript中实现全选、全不选、反选、无刷新删除、批量删除以及即点即改功能的代码，这些功能是在Yii框架的背景下进行操作的。提供了相关的控制器代码作为示例。 在Web开发中，用户界面的交互性是...
Yii框架下：无刷新操作技巧 - 全选/反选/批量删除与实时入库
本文档主要介绍了在Yii框架中如何使用JavaScript实现表格操作的几种常见功能：全选、全不选、反选、无刷新删除、批量删除以及即时修改并提交数据到数据库。这些功能对于Web开发中与用户交互的列表或表格处理至关重要...
js实现全选反选
席伟娜的专栏
03-01 2459
//js实现全选反选源代码，超级简单 反选全选 table{     border:#0FF 1px solid;     border-collapse:collapse;     }      table th{         text-align:center;         } table td{     border:1px solid
js--复选框--全选、反选、取消
编程日常记录与总结 https://franciswmf.iteye.com
07-24 127
[align=left][size=large] ---------------------------------------------------------- //[color=red][b]第一种方法：存在不足之处[/b][/color] //全选、反选、取消 //全选 function selectAll() { for (i = 0; i < document.form...
（13）邮箱列表全选、反选、删除
FixedStar 的博客
08-08 975
这是对之前的全选商品列表的checked、行间隔颜色显示和高亮显示的综合练习也涉及到了table中删除一行如何操作（父删子）尤其对checkAllByBut(num)让不同类似操作在同一个方法实现技巧好好理解
php 列表全选,php 分页、全选、反选、全不选、批量删除
weixin_42404710的博客
03-09 160
/*** 用户管理* 2011/8/22* kcj** */include "isLogin.php";include "../conn/conn.php";$sql="select * from user";$rst=mysql_query($sql);$totalnum=mysql_num_rows($rst);$pagesize=5;$page=$_GET['page'];if($page=...
php 分页、全选、反选、全不选、批量删除
小画家
08-04 1055
php 多选删除 SQL：$SQL="delete from `doing` where id in ('1,2,3,4')";  数据用逗号隔开。  表单：                好$ID_Dele=$_POST['ID_Dele']将会是一个数组，虽然说PHP是弱类型的，但这里可没ASP弱。  ASP可以直接：  SQL="delete from [doi
js 全选/全不选/反选 php for表单实现批量删除
phpwanmei的博客
07-31 201
<form class="form form-horizontal" action="{:U('huati/sdel')}" method="post"> <table class="table table-border table-bordered table-bg"> <thead> <tr class="...
php实现复选框全选和批量删除,JS实现复选框的全选和批量删除功能
weixin_39528525的博客
03-22 245
如图示：功能描述：在勾选了全选时，所有的商品都会勾选，在取消全选时，取消所有物品的勾选。如果点击批量删除，删除所勾选的商品。 全选/全不选//全选function ckAll(){var flag=document.getElementById("allChecks").checked;var cks=document.getElementsByName("check");for(var i=0;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值