zoukankan      html  css  js  c++  java
  • Ajax实现表格实时编辑

    如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事(用起来炒鸡爽)!

    用Ajax就可以实现这个功能啦。废话不多说,下面贴出我写的demo吧哈哈。我用的TP框架(3.2)比较习惯啦。

    首先是HTML代码部分:

    #####################################################################

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>AJAX实时编辑</title>
    <script src="__PUBLIC__/jquery-1.7.2.min.js"></script>
    </head>
    <body>
    <center>
    <table border="1" width="1000" id="g_table">
    <tr>
    <!-- <th>ID</th> -->
    <th>TAB1</th>
    <th>TAB2</th>
    <th>TAB3</th>
    <th>TAB4</th>
    <th><span onclick="add()">添加</span></th>
    </tr>
    <foreach name="tablist" item="vv">
    <tr>
    <!-- <td>{$vv.id}</td> -->
    <input type="hidden" name="id" value="{$vv.id}">
    <td>{$vv.tab1}</td>
    <td>{$vv.tab2}</td>
    <td>{$vv.tab3}</td>
    <td>{$vv.tab4}</td>
    <td><span onclick="del(this)" id="del">删除</span><span onclick="edit(this)" id="edit">修改</span></td>
    </tr>
    </foreach>
    </table>
    </center>
    </body>
    <script>
    var g_table = $("#g_table");
    function add(){
    var addRow = $("<tr></tr>");

    g_table.append(addRow);
    for(var i = 0;i < 4;i++){
    var col_td = $("<td><input type='text' /></td>");
    addRow.append(col_td);
    }
    var col_opt = $("<td></td>");
    var confirmBtn = $("<a href='javascript:;'>确认</a>");
    var cancelBtn = $("<a href='javascript:;'>取消</a>");
    cancelBtn.click(function(){
    window.location.reload();
    });
    confirmBtn.click(function(){
    var currentRow = $(this).parent().parent();
    var input_files = currentRow.find("input");
    var post_files = {};
    for(var i = 0 , j = input_files.length;i < j;i++){
    post_files['clo_' + i] = input_files[i].value;
    }
    // $.post("{:U('ajax/add')}",post_files,function(msg){
    // debugger;
    // })
    $.ajax({
    type: 'post',
    url : "{:U('ajax/add')}",
    data: {post_files},
    success:function(msg){
    alert(msg);
    window.location.reload();
    }
    })
    });
    col_opt.append(confirmBtn);
    col_opt.append(cancelBtn);
    addRow.append(col_opt);
    }
    function del(obj){
    var id = $(obj).parent().prev().prev().prev().prev().prev().val();
    $.ajax({
    type: 'post',
    url: "{:U('ajax/del')}",
    data: {id:id},
    success:function(msg){
    alert(msg);
    }
    })
    $(obj).parent().parent().remove();
    }
    function edit(obj){
    var id = $(obj).parent().prev().prev().prev().prev().prev().val();
    for(var i = 1;i < 5;i++){
    var temp = "<td><input type='text' value='" + $(obj).parent().parent().children().eq(i).html() + "'/></td>";
    $(obj).parent().parent().children().eq(i).replaceWith(temp);
    }
    var confirmBtn1 = $("<span id='confirm'>确认</span>");
    var cancelBtn1 = $("<span onclick='back()'>取消</span>");
    confirmBtn1.click(function(){
    var currentRow = $(this).parent().parent();
    var input_files = currentRow.find("input");
    var post_files = {};
    for(var i = 0 , j = input_files.length;i < j;i++){
    post_files['clo_' + i] = input_files[i].value;
    }
    $.ajax({
    type: 'post',
    url : "{:U('ajax/edit')}",
    data: {post_files:post_files,id:id},
    success:function(msg){
    alert(msg);
    window.location.reload();
    }
    })
    });
    $(obj).prev().replaceWith(confirmBtn1);
    $(obj).replaceWith(cancelBtn1);



    }

    function back(){
    location.reload();
    }
    </script>
    </html>

    #####################################################################

    下面是控制器中的代码:

    <?php  

    namespace HomeController;
    use ThinkController;
    class AjaxController extends Controller{
    public function index(){
    $tab = M('table');
    $tablist = $tab->select();
    $this->assign('tablist',$tablist);
    $this->display();
    }
    public function del(){
    $map['id'] = $_POST['id'];
    $tab = M('table');
    $info = $tab->where($map)->delete();
    if($info){
    $this->ajaxReturn("删除成功");
    }else{
    $this->ajaxReturn("删除失败");
    }

    }
    public function add(){

    $map['tab1'] = $_POST['post_files']['clo_0'];
    $map['tab2'] = $_POST['post_files']['clo_1'];
    $map['tab3'] = $_POST['post_files']['clo_2'];
    $map['tab4'] = $_POST['post_files']['clo_3'];
    $tab = M('table');
    $res = $tab->add($map);
    if($res){
    $this->ajaxReturn("添加成功");
    }else{
    $this->ajaxReturn("添加失败");
    }

    }
    public function edit(){
    $id = $_POST['id'];
    $map['tab1'] = $_POST['post_files']['clo_1'];
    $map['tab2'] = $_POST['post_files']['clo_2'];
    $map['tab3'] = $_POST['post_files']['clo_3'];
    $map['tab4'] = $_POST['post_files']['clo_4'];
    // dump($map);exit;
    $tab = M('table');
    $res = $tab->where('id='.$id)->save($map);
    if($res){
    $this->ajaxReturn("更新成功");
    }else{
    $this->ajaxReturn("更新失败");
    }
    }
    }

    #####################################################################

    数据库建表我就不贴啦,自己想咋建就咋建(你开心就好嘻嘻)

  • 相关阅读:
    257. Binary Tree Paths
    324. Wiggle Sort II
    315. Count of Smaller Numbers After Self
    350. Intersection of Two Arrays II
    295. Find Median from Data Stream
    289. Game of Life
    287. Find the Duplicate Number
    279. Perfect Squares
    384. Shuffle an Array
    E
  • 原文地址:https://www.cnblogs.com/xionghao/p/6811372.html
Copyright © 2011-2022 走看看