ajax制作表格,Ajax实现表格实时编辑(示例代码)
如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事(用起来炒鸡爽)!
用Ajax就可以实现这个功能啦。废话不多说,下面贴出我写的demo吧哈哈。我用的TP框架(3.2)比较习惯啦。
首先是HTML代码部分:
#####################################################################
AJAX实时编辑
TAB1 | TAB2 | TAB3 | TAB4 | 添加 |
---|---|---|---|---|
{$vv.tab1} | {$vv.tab2} | {$vv.tab3} | {$vv.tab4} | 删除修改 |
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("更新失败");
}
}
}
#####################################################################
数据库建表我就不贴啦,自己想咋建就咋建(你开心就好嘻嘻)
ajax制作表格,Ajax实现表格实时编辑(示例代码)相关推荐
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- ajax简单的验证,ajax初探--实现简单实时验证(示例代码)
学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证. 利用ajax技术和Sevlet技术来实现,使用原生的js. 什么是ajax Ajax 即"Asynchronous ...
- mysql到pg怎么高效_干货 | Debezium实现Mysql到Elasticsearch高效实时同步(示例代码)
题记 来自Elasticsearch中文社区的问题-- MySQL中表无唯一递增字段,也无唯一递增时间字段,该怎么使用logstash实现MySQL实时增量导数据到es中? logstash和kafk ...
- centos os u盘启动盘_Mac上制作Centos7系统U盘安装盘(示例代码)
Centos7 下载地址: 1. 挂载U盘 第一步,先插入U盘,打开终端使用下面的命令查看U盘是否已经mount到系统,这时在Finder下也能看到U盘. $ diskutil list 1 系统输出 ...
- PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
- ajax communication failed,AJAX没有收到错误
我是JSON,JS和AJAX的新手.我使用了一些示例代码来完成目标.我不明白的是,当JSON是一个错误对象时,成功部分仍在触发.控制台显示错误,其中对象d为空,或者当错误为真时显示非对象.我做错了什么 ...
- php ajax 表格编辑,php ajax表格实时编辑 PHP Ajax实现表格实时编辑
想了解PHP Ajax实现表格实时编辑的相关内容吗,佛祖的腿毛在本文为您仔细讲解php ajax表格实时编辑的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:php,ajax表格实时编辑,a ...
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击"确定"按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击& ...
- jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击"确定"按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击& ...
最新文章
- 关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出
- U3D笔记11:47 2016/11/30-15:15 2016/12/19
- 【教程】如何给Eclipse中添加库(jar包)
- 二维非稳态导热微分方程_室内湿度影响验证:非真空型稳态法导热仪的正确使用方式...
- XML Schema全接触 (这里主要介绍W3C的Schema标准语法)
- idea卸载不干净怎么办_家里拖地老是不干净怎么办,来跟我学!
- Python Flask Web 第十课 —— flask-wtf
- 凝思系统改时间_大众改原厂盲点监测系统,中山大众原厂改装,途观L改盲点监测...
- Flink 1.11 SQL 使用攻略
- 能力提升综合题单Part 8.2 最短路问题
- con 元器件符号_protues的元件符号名称
- 计算机动画设计论文,计算机动画设计论文.docx
- 计算机的基本组成和工作原理
- 后台管理导航菜单及模板
- 业务员如何听懂采购要吃回扣的暗语或者动作?
- 国外广告联盟,别被人当傻子割了
- 新构造运动名词解释_第十三章 新构造运动
- 软件测试人员所不知道的软件测试七项原则
- 第九周项目——穷举法之三色球
- Pandas+Pyecharts | 招聘信息数据可视化
热门文章
- mysql workbench建表时PK,NN,UQ,BIN,UN,ZF,AI
- Zabbix 2.4.5 自定义 key 监控 apache
- c#中SqlHelper类的编写(三)
- 酷炫Jquery收集
- WINCE的内存配置
- SQL语句对象化,先看示例代码.
- *33.硬中断和软中断是什么?区别?
- 工大附中、铁一太牛了,2019年高分段人数令人震惊!
- 当人工智能掌管城市,会带来怎样的巨变?
- 人工智能时代下的“烦恼”:美国国会探讨“深度伪造”风险及对策