php jquery实现即点即改

最新推荐文章于 2022-06-08 13:51:29 发布

村里娃

最新推荐文章于 2022-06-08 13:51:29 发布

阅读量2.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/itgujing/article/details/77885029

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

视图层

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>ul li {float:left;list-style: none;padding: 10px;}</style>
<script type="text/javascript" src="http://www.itgujing.cn/jquery/jquery.js"></script>
</head>
<body>
<form action="shop.delAll" method="post">
<table border="1" align="center">
<tr>
<td colspan="4" align="center"><a href="shop.add">插入数据</a>||<input type="submit" value="批量删除"></td>
</tr>
<tr>
<td><input type="checkbox" id="selectAll"></td>
<td>名称</td>
<td>价格</td>
<td>操作</td>
</tr>
@foreach($arr as $value)
<tr id="{{$value->id}}">
<td><input type="checkbox" name="id[]" value="{{$value->id}}"></td>
<td name="name"><span class="click">{{$value->name}}</span></td>
<td name="price"><span class="click">{{$value->price}}</span></td>
<td><a href="shop.del?id={{$value->id}}">删除</a></td>
</tr>
@endforeach
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
$(function () {
//全选
$("#selectAll").click(function () {
$(":checkbox").attr("checked", true);
});
// 显示文本框并显示原值
$(document).on("click", ".click", function () {
var _this = $(this);
var old_val = _this.html(); // 获取要修改的值
_this.parent().html("<input type='text' name=" + old_val + " class='focus' value=" + old_val + " />"); // 显示文本框
$(".focus").focus(); // 存在瑕疵，光标无法聚焦到文本最后的位置
$(":text").select(); // 改进，弥补瑕疵，全选文字
});
// 还原列表并修改数据
$(document).on("blur", ".focus", function () {
var _this = $(this);
// 获取所需参数
var key = _this.parent().attr("name");
var old_val = _this.attr("name");
var new_val = _this.val();
var id = _this.parents("tr").attr("id");
// 修改数据
$.post("shop.edit", {key: key, id: id, old_val: old_val, new_val: new_val}, function(msg) {
if(msg == 0){
alert('无修改');
_this.parent().html('<span class="click">' + old_val + '</span>');
}else if(msg == 100){
_this.parent().html('<span class="click">' + old_val + '</span>');
alert('修改失败');
}else if(msg == 200){
_this.parent().html('<span class="click">' + new_val + '</span>');
alert('修改成功');
}
})
})
})
</script>
</html>

控制器

public function edit(){
// 接值
$data = Request::all();
$status = 0; // 初始值
if($data['old_val'] == $data['new_val'] || $data['new_val'] == ""){ // 验证新值为空或等同旧值
echo $status;exit;
}
$res = DB::table('shop') // 修改数据
->where('id', $data['id'])
->update([$data['key'] => $data['new_val']]);
if($res){
$status = 200;
}else{
$status = 100;
}
echo $status;exit;
}

村里娃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
php jquery实现即点即改

视图层Documentul li {float:left;list-style: none;padding: 10px;}插入数据||名称价格操作@foreach($arr as $value)id}}">id}}">{{$value->name}}{{$value->price}}id}}">删除@endforeach$(f
复制链接

扫一扫