TP5中即點即改，json分頁，單刪
阿新 • • 發佈：2018-10-14
har ont r+ sha static href ret lang turn
HTML頁面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<center>
<table>
<tr>
<td><input type="checkbox"></td>
<td>位置</td>
<td>房源</td>
<td>房源面積</td>
<td>計租面積</td>
<td>戶型</td>
<td>建築結構</td>
<td>租賃性質</td>
<td>狀態</td>
{switch name="$list.u_name"}
{case value="root"} <td>操作</td>{/case}
{case value="admin"}{/case}
{/switch}
</tr>
<tbody class="tby">
{volist name="list.data" id="v"}
<tr id="{$v.f_id}">
<td><input type="checkbox" class="box"></td>
<td>{$v.f_wei}</td>
{switch name="$list.u_name"}
{case value="root"} <td class="ww" fd="f_name">{$v.f_name}</td>{/case}
{case value="admin"}<td >{$v.f_name}</td>{/case}
{/switch}
<td>{$v.f_mian}</td>
<td>{$v.f_ji}</td>
<td>{$v.f_hu}</td>
<td>{$v.f_jian}</td>
<td>{$v.f_zu}</td>
<td>{$v.f_static}</td>
{switch name="$list.u_name"}
{case value="root"} <td><a href="javascript:void(0);" class="shan">刪除</a></td>{/case}
{case value="admin"}{/case}
{/switch}
</tr>
{/volist}
</tbody>
<input type="hidden" value="1" class="shou_page">
<input type="hidden" value="{$list.zong_page}" class="wei_page">
</table>
<button class="pre">首頁</button>
<button class="pre">上一頁</button>
<button class="pre">下一頁</button>
<button class="pre">尾頁</button>
</center>
<script src="__STATIC__/js/jquery.min.js"></script>
<script>
//即點即改
$(document).on("dblclick",".ww",function () {
var fd_val=$(this).attr("fd");
var html_val=$(this).text();
var id=$(this).parents("tr").attr("id");
//替換
$(this).html(‘<input type="text" id="‘+fd_val+html_val+‘" value="‘+html_val+‘">‘)
$("#"+fd_val+html_val).blur(function () {
var new_val=$(this).val();
$(this).parents("td").text(new_val);
//請求
$.post(
"{:url(‘access/ji_gai‘)}",
{
id:id,
new_val:new_val,
fd_val:fd_val
},
function (data) {
}
)
})
})
//分頁
$(document).on("click",".pre",function () {
var pre=$(this).text();
var shou_page=$(".shou_page").val();
var wei_page=$(".wei_page").val();
var p="";
if(pre=="首頁")
{
p=1;
}else if(pre=="上一頁")
{
p=parseInt(shou_page)-1<1?1:parseInt(shou_page)-1;
}else if(pre=="下一頁")
{
p=parseInt(shou_page)+1>wei_page?wei_page:parseInt(shou_page)+1;
}else if(pre=="尾頁")
{
p=wei_page;
}
//請求
$.post(
"{:url(‘access/show_json‘)}",
{
page:p
},
function (data) {
var res=JSON.parse(data)
var res_list=res.data
var name=res.u_name
if(name=="root")
{
var aa=‘ <td><a href="javascript:void(0);" class="shan">刪除</a></td>‘;
var bb=‘class="ww" fd="f_name"‘;
}
var str="";
$.each(res_list,function (k, v) {
str+=‘<tr id="‘+v.f_id+‘">‘;
str+=‘<td><input type="checkbox" class="box"></td>‘
str+=‘<td>‘+v.f_wei+‘</td>‘
str+=‘<td ‘+bb+‘>‘+v.f_name+‘</td>‘
str+=‘<td>‘+v.f_mian+‘</td>‘
str+=‘<td>‘+v.f_ji+‘</td>‘
str+=‘<td>‘+v.f_hu+‘</td>‘
str+=‘<td>‘+v.f_jian+‘</td>‘
str+=‘<td>‘+v.f_zu+‘</td>‘
str+=‘<td>‘+v.f_static+‘</td>‘
str+=‘‘+aa+‘‘;
str+=‘</tr>‘;
})
$(".tby").html(str)
$(".shou_page").val(p)
}
)
})
//刪除
$(document).on("click",".shan",function () {
var id=$(this).parents("tr").attr("id");
//請求
$.post(
"{:url(‘access/dan_del‘)}",
{
id:id
},
function (data) {
var re=JSON.parse(data)
if(re==1)
{
alert("單刪成功")
document.getElementById(id).remove();
}else if(re==2)
{
alert("單刪失敗")
}
}
)
})
</script>
</body>
</html>
PHP頁面：
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Request;
use think\Session;
use app\index\model\Fang_yuan;
use app\index\controller\Commen;
class Access extends Commen
{
//頁面分頁展示
public function fang_list()
{
$user=Session::get("user",‘think‘);
$u_name=$user[‘u_name‘];
$p=Request::instance()->param("page");
$page=empty($p)?1:$p;
$count=Db::table("fang_yuan")->count();
$tiao=3;
$zong_page=ceil($count/$tiao);
$limit=($page-1)*$tiao;
$data=Db::table("fang_yuan")->limit($limit,$tiao)->select();
$list=[‘data‘=>$data,‘zong_page‘=>$zong_page,‘u_name‘=>$u_name];
return view("show",[‘list‘=>$list]);
}
//分頁的json格式
public function show_json()
{
$user=Session::get("user",‘think‘);
$u_name=$user[‘u_name‘];
$p=Request::instance()->param("page");
$page=empty($p)?1:$p;
$count=Db::table("fang_yuan")->count();
$tiao=3;
$zong_page=ceil($count/$tiao);
$limit=($page-1)*$tiao;
$data=Db::table("fang_yuan")->limit($limit,$tiao)->select();
$list=[‘data‘=>$data,‘zong_page‘=>$zong_page,‘u_name‘=>$u_name];
echo json_encode($list);
}
//單刪
public function dan_del()
{
$id=Request::instance()->param("id");
$aa=new Fang_yuan();
$a=$aa->del($id);
if($a)
{
echo json_encode(1);
}else{
echo json_encode(2);
}
}
//即點即改
public function ji_gai()
{
$id=Request::instance()->param("id");
$new_val=Request::instance()->param("new_val");
$fd_val=Request::instance()->param("fd_val");
$a=Db::table("fang_yuan")->where("f_id=‘$id‘")->update(["$fd_val"=>"$new_val"]);
if($a)
{
return 1;
}else{
return 2;
}
}
}
TP5中即點即改，json分頁，單刪