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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
js替代copy(示例代码)
Nov 27 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
JavaScript门面模式详解
Oct 19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
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
图书管理程序(二)
2006/10/09 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
javascript学习之闭包分析
2010/12/02 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
windows下python安装pip图文教程
2018/05/25 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python实现石头剪刀布小游戏
2021/01/20 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python实现根据文件格式分类
2019/10/31 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
Java语言的优势
2015/01/10 面试题
工厂厂长的职责
2013/12/12 职场文书
小学毕业家长寄语
2014/01/19 职场文书
土木工程专业推荐信
2014/02/19 职场文书
幼儿评语大全
2014/04/30 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书