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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
javascript包装对象实例分析
Mar 27 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
javascript实现动态标签云
2015/10/16 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
应聘医药销售自荐书范文
2014/02/08 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
自主招生学校推荐信
2014/09/26 职场文书