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

待我称王封你为后i 2022-09-24 06:26 168阅读 0赞

效果展示：

![Center][]

代码实现：

<?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);
        }
    </script>

<?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>

[Center]: /images/20220719/3953fd610471412daf9f7002f1bb3c9d.png