zoukankan      html  css  js  c++  java
  • TP5中即点即改,json分页,单删

    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 appindexcontroller;

    use thinkController;
    use thinkDb;
    use thinkRequest;
    use thinkSession;
    use appindexmodelFang_yuan;
    use appindexcontrollerCommen;
    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;
    }
    }
    }
     
    你所浪费的今天是那些死去的人所奢望的明天,你所厌恶的现在是未来的你所回不去的曾经。
  • 相关阅读:
    浅谈TCP三次握手和四次挥手
    浅谈网络七层协议
    websocket实例
    浅谈websocket
    python的垃圾回收机制
    解释型语言和编译型语言的区别
    装饰器修复技术@wraps
    Django基础知识点
    项目再Windows上没有问题,但是在Linux上运行报错OSError: [Errno 8] Exec format error:
    在Centos 7 系统上部署flask 项目 pipenv+nginx+gunicorn
  • 原文地址:https://www.cnblogs.com/stj123/p/9787388.html
Copyright © 2011-2022 走看看