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 26 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
JS加载解析Markdown文档过程详解
May 19 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
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php统计文章排行示例
2014/03/04 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
Vue生命周期示例详解
2017/04/12 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
js事件委托和事件代理案例分享
2017/07/25 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python 多线程应用介绍
2012/12/19 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python文件及目录操作代码汇总
2020/07/08 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python读写Excel表格的方法
2021/03/02 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
2019年c语言经典面试题目
2016/08/17 面试题
.net开发工程师面试题
2014/02/25 面试题
2014年大班元旦活动方案
2014/02/26 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
临床医学专业求职信
2014/08/08 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python