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

最新推荐文章于 2023-12-06 15:19:26 发布
最新推荐文章于 2023-12-06 15:19:26 发布
阅读量3.4k 收藏 1
点赞数 2
本文为郝云原创文章，未经郝云允许不得转载。
本文链接：https://blog.csdn.net/haoyunyun888/article/details/52046424
版权

效果展示：


代码实现：

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

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



请叫我郝先生
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
yii2使用GridView实现数据全选及批量删除按钮示例
12-19
整理文档，发现一个用GridView实现数据全选及批量删除按钮示例，稍微整理精简一下做下分享。 先来看实现的效果 关键代码如下： <?= GridView::widget([ 'dataProvider' => $dataProvider, 'showFooter' => true, //设置显示最下面的footer 'id' => 'grid', 'columns' => [ [ 'class'=>CheckboxColumn::className(), 'name'=>'id', 'headerOption
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享
11-29
use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use app\...
关于Yii2批量更新的操作
dj1540225203的博客
08-03 2161
批量更新
yii 批量修改方法
weixin_47099556的博客
07-31 186
@param $key string 条件主键,作用参考switch中的case。* @param $data array $key与$val主键对应的数据载体。yii自带的只有updateAll方法，多条数据某个字段只能修改成统一的。* @param $table string 表名。* @param $val self 修改主键。* @return int 修改成功的条数。使用含义：通过拼接成多条修改sql，再进行运行。
YII 批量更新 多个属性不同值
他乡幻想的专栏
08-28 1153
背景：当然是提高程序性能，缩短执行时间。 批量更新同一属性为相同的值，这个就没什么好讨论的，不会的，自行百度或者Google。 1、第一种方法首先想到是用MySQL 的case when 组装一个SQL，然后执行 a、更新其中一个属性时，SQL如下： UPDATE test_user SET t_name = CASE t_id WHEN 1 THEN '张三...
yii批量更新
weixin_33744141的博客
04-02 197
为什么80%的码农都做不了架构师？>>> ...
yii2实现修改及批量修改、批量插入数据
最新发布
徊忆羽菲
12-06 696
yii2实现修改及批量修改
JavaScript案例-js全选和全不选.zip
02-16
JavaScript案例-js全选和全不选.zip
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
Yii2.0实现的批量更新及批量插入功能示例
01-20
本文实例讲述了Yii2.0实现的批量更新及批量插入功能。分享给大家供大家参考，具体如下： 批量更新 方法1 /** * 批量更新循环周期 * @param array $condition * $condition = ['advertise_id' => '','status' => '', 'weekdays'=>[1,2,3]] 查询条件 * $params = ['status' => ''] * @param $params * @return bool */ public function batchUpdateAdSchedule($condition = [], $param
yii 批量删除及CDBCriteria的常用方法
Sara的专栏
03-19 2816
yii 批量删除及CDBCriteria的常用方法
yii2 批量删除
征途人生&梦
08-05 5735
在yii中，是使用widget::GridView小部件做列表的，如果要使用checkbox，自己写估计要费一番周折，好在yii提供了CheckboxColumn， 这个类为我们提供了checkbox，我们可以直接使用。 'columns' => [             [                 'class' => 'yii\grid\CheckboxColumn',  
YII框架之增删改查、批量删除，修改
ps1006的博客
09-21 683
yii2增删改查小结 1、查 $data= User::find()->asArray() // as后为别名 ->select(['id', 'name', 'phone', 'image as images']) ->where(['id' => $id]) // one输出为一位数组，all查全部、输出二维数组 -&g
yii 全选 php,Yii中CGridView实现批量删除的方法
weixin_36484814的博客
03-17 82
这篇文章主要介绍了Yii中CGridView实现批量删除的方法,实例分析了CGridView的相关设置,前台JS调用与后台Action具体功能实现的技巧,需要的朋友可以参考下本文实例讲述了Yii中CGridView实现批量删除的方法。分享给大家供大家参考，具体如下：1. CGridView中的columns添加array('selectableRows' => 2,'footer' =&gt...
Yii1.1 批量处理（新增、删除、修改）
大洋
05-09 5950
$model = new UebEbayAccountNotice(); $transaction = $model-&amp;amp;gt;getDbConnection()-&amp;amp;gt;beginTransaction(); 新增 //差集，需要增加的 $addUserIdArr = array_diff($newUserIdArr,$oldUserIdArr); if (!empty($addUserIdA...
CI框架（ajax分页，全选，反选，不选，批量删除）
10-25 574
//ajax分页+搜索（视图层） function ajax_page(page){ var sou = $('#sou').val(); $.ajax({ type: "POST", dataType: "json", url: "", data: "page="+page+"&sou="+sou, success: function(data){ var str=""; s
Yii 批量删除
代码技巧
04-30 869
widget('admin.widgets.GridView', array( 'id'=>'app-comment-grid', 'dataProvider'=>$model->search(), 'filter'=>$model, 'columns'=>array( array( 'selectableRows' => 2, 'footer' => '批量删除', 'class

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值