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

时间: 2016-10-31

通过js来制作复选框的全选和不选效果

复制代码 代码如下: <html> <head> <title>制作全选效果</title> <script language="javascript"> function selectAll(){ allcheckBoxs=document.getElementsByName("a"); var a2=document.getElementsByName("a1"); if(a2[0]

javascript 复选框选择/全选后特效

运行效果 @charset "utf-8"; .content form { margin:0; } table { border:1px solid #CCC; background:#E4E4E4; } td { border-top:1px solid #CCC; background:#FFF; font-size:12px; } th,td,.quantity { text-align:center; font-family:Arial, Helvetica, sans-se

javaScript checkbox 全选/反选及批量删除

前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum

JS实现复选框的全选和批量删除功能

如图示: 功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选.如果点击批量删除,删除所勾选的商品. <td align="center" width="12%" > <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全选/全不选 </td> //全选 function ckAl

JS实现CheckBox复选框全选全不选功能

CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo

JS实现CheckBox复选框全选、不选或全不选功能

CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

js与jQuery实现checkbox复选框全选/全不选的方法

本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

jQuery对checkbox 复选框的全选全不选反选的操作

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

jQuery 获取多选框的值及多选框中文的函数

 DOM结构 我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述. <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="0"> <span>甘肃</span> </label> <label class="input_checkbox

JavaScript简单判断复选框是否选中及取出值的方法

本文实例讲述了JavaScript简单判断复选框是否选中及取出值的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript 获取复选框的值,有朋友在刚开始利用表单提交数据的时候,一般都会遇到表单中有一个特别的元素--复选框,判断它是否选中以及获取它的值 ,好像跟其它的表单元素有点不一样,本代码将为您展示如何获取复选框的值并判断是否被选中. 运行效果如下图所示: 具体代码如下: <title>JavaScript 获取复选框的值</title> <script>

Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

页面代码: <!-- 弹出层 --> <section class="popup-bg" ng-if="IsActive"> <div class="popup-box phone-detail"> <div class="popup-title popup-detail-title">通讯录 <i class="iconfont popup-close-font

C#实现将选中复选框的信息返回给用户的方法

本文实例讲述了C#实现将选中复选框的信息返回给用户的方法.分享给大家供大家参考.具体实现方法如下: /// <summary> /// 自定义方法,获得复选框中选中的值,用指定的分隔符隔开 /// </summary> /// <param name="split">分隔符</param> /// <param name="chk">复选框名称</param> /// <returns&g

jQuery简单实现input文本框内灰色提示文本效果的方法

本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun

Vue + element 实现多选框组并保存已选id集合的示例代码

Vue + element 实现列表复选框并保存已选id集合 1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源 2.初始化tableData集合 3.循环遍历需要显示得值 4.在多选框组上添加chang事件 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', addre

JS实现仿google、百度搜索框输入信息智能提示的实现方法

本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

jquery判断checkbox(复选框)是否被选中的代码

复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals