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


Posted in Javascript onNovember 01, 2016

效果展示:

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

代码实现:

控制器

<?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框架中操作)的代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
JavaScript中return用法示例
Nov 29 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
Node调用Java的示例代码
Sep 20 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 #Javascript
js print打印网页指定区域内容的简单实例
Nov 01 #Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 #Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 #Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
flask-restful使用总结
2018/12/04 Python
安装python及pycharm的教程图解
2019/10/10 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
适用于所有创业者的创业计划书
2014/02/05 职场文书
1亿有多大教学反思
2014/05/01 职场文书
模具专业求职信
2014/06/26 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
经营场所使用证明
2015/06/19 职场文书
公司业务员管理制度
2015/08/05 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
Python合并pdf文件的工具
2021/07/01 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android