DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中全選、全不選、反選、無刷新刪除、批量刪除、即點即改入庫（在yii框架中操作）的代碼分享
JavaScript中全選、全不選、反選、無刷新刪除、批量刪除、即點即改入庫（在yii框架中操作）的代碼分享
編輯：關於JavaScript
效果展示：
代碼實現：
控制器
<?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框架中操作）的代碼分享，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！
小編推薦
熱門推薦