博客

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

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

首先是HTML代码部分：

AJAX实时编辑

var g_table = $(“#g_table”);

function add(){

var addRow = $(”

“);

g_table.append(addRow);

for(var i = 0;i < 4;i++){

var col_td = $(”

“);

addRow.append(col_td);

}

var col_opt = $(”

“);

var confirmBtn = $(“确认”);

var cancelBtn = $(“取消”);

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 = ”

“;

$(obj).parent().parent().children().eq(i).replaceWith(temp);

}

var confirmBtn1 = $(”

确认

“);

var cancelBtn1 = $(“取消”);

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();

}

下面是控制器中的代码：

namespace Home\Controller;

use Think\Controller;

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(“更新失败”);

}

}

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程圈！