php jquery实现即点即改
视图层
<!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;
}
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇：没有了
