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

时间：2021-05-26

效果展示：

代码实现：

控制器

<?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\db\ActiveRecord; use yii\data\Pagination; use app\models\EcsGoods; class PageController extends Controller { //public $layout=false; //展示，分页 public function actionList() { $query = EcsGoods::find(); $pagination = new Pagination([ 'defaultPageSize' => 5, 'totalCount' => $query->count(), ]); $countries = $query ->offset($pagination->offset) ->limit($pagination->limit) ->all(); return $this->render('list', [ 'brr' => $countries, 'pagination' => $pagination, ]); } //即点即改 public function actionUpdates() { $request = Yii::$app->request; $id = $request->get('old_id'); $name = $request->get('old_val'); $connection=Yii::$app->db; $command = $connection->createCommand("update ecs_goods set goods_name='$name' where goods_id='$id'"); $re=$command->execute(); if($re) { echo 1; } } //单删 public function actionDel() { $request = Yii::$app->request; $id = $request->get('ids'); $connection=Yii::$app->db; $command = $connection->createCommand("delete from ecs_goods where goods_id='$id'"); $re=$command->execute(); if($re) { echo 1; } else { echo 0; } } //批删 public function actionAlldel() { $request = Yii::$app->request; $id = $request->get('new_str'); $connection=Yii::$app->db; $command = $connection->createCommand("delete from ecs_goods where goods_id in($id)"); $re=$command->execute(); if($re) { echo 1; } else { echo 0; } } } 视图层[html] view plain copy 在CODE上查看代码片派生到我的代码片<?php use yii\helpers\Html; use yii\widgets\LinkPager; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>循环数据</title> </head> <style> table{ background-color: pink; } .dels{ border: 1px solid red; font-family:楷体; background-color: white; } .trs{ background-color: red; } </style> <body> <center> <p> <input type="checkbox" value="全选" onclick="check_qx(this);">全选 <input type="checkbox" value="全不选" onclick="check_bx(this);">全不选 <input type="checkbox" value="反选" onclick="check_fx();">反选 <input type="button" value="批量删除" onclick="check_del();"> </p> <table border="1"> <tr class="trs"> <td><input type="checkbox" onclick="check_qx(this);"></td> <td>商品ID</td> <td>商品名称</td> <td>操作</td> </tr> <?php foreach($brr as $val) { ?> <tr> <td><input type="checkbox" name="check[]" value="<?php echo $val['goods_id']?>"></td> <td><?php echo $val['goods_id']?></td> <td><span class='num' id="<?php echo $val['goods_id']?>"><?php echo $val['goods_name']?></span></td> <td><a href="javascript:void(0)" id="<?php echo $val['goods_id']?>" onclick="del(this);" class="dels">删除</a></td> </tr> <?php } ?> </table> <?= LinkPager::widget(['pagination' => $pagination]) ?> </center> </body> </html> <script src="jq.js"></script> <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(); $.get("index.php?r=page/updates",{old_val:old_val,old_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>"); } }) }) }) }) //单删 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=page/del&ids="+ids); ajax.send(null); } //全选 function check_qx(obj) { //alert(32432); var ids=document.getElementsByName("check[]"); //alert(ids); 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=page/alldel&new_str="+new_str); ajax.send(null); } </script>

以上所述是小编给大家介绍的JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章