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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JavaScript中继承原理与用法实例入门
May 09 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
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python 实现矩阵填充0的例子
2019/11/29 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
电子商务应届生求职信
2013/11/16 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015年教师节主持词
2015/07/03 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python