思路分析:

将 table中的表格 改变成为 input表格框获得值 ajax配合修改 删除

<?php
use yii\helpers\Url; $web = Url::base();
?>
<style>
.btn-save-data {
display: none;
} .btn-cancel-data {
display: none;
}
</style>
<script type="text/javascript"> //添加 页面 尾部追加 td input 框跟值
$("#onAddBaseDataCategory").click(function () { var trtd = $('<tr>' +
"<td class='code_one'><input name='code' type='text' value=''></td>" +
"<td class='name_one'><input name='name' type='text' value=''></td>" +
"<td class='tag_one'><input name='tag' type='text' value=''></td>" +
"<td class='table-text-align-left'>" +
"<a href=javascript:void(0) onclick='onSaveBaseDataCategory(this)' data-id= '' class='btn btn-link'>保存</a>" +
"<a href=javascript:void(0) onclick='cancelBaseDataCategory(this)' data-id= '' class='btn btn-link'>取消</a>" +
"</td>" +
"</tr>");
trtd.prependTo("#baseDataCategoryTable"); }); //编辑页面
function onEditData(obj) { var id = $(obj).attr('data-id');
var object = $(obj).parent().parent(); object.find('.btn-edit-data').hide();
object.find('.btn-delete-data').hide();
object.find('.btn-save-data').show();
object.find('.btn-cancel-data').show(); var code = object.find(".code_one").text();
var name = object.find(".name_one").text();
var tag = object.find(".tag_one").text(); object.find(".code_one").html("<input data-base-title='" + code + "' name='code' type='text' value='" + code + "'>");
object.find(".name_one").html("<input data-base-title='" + name + "' name='name' type='text' value='" + name + "'>");
object.find(".tag_one").html("<input data-base-title='" + tag + "' name='tag' type='text' value='" + tag + "'>"); } // 数据保存
function onSaveBaseDataCategory(obj) { var object = $(obj).parent().parent();
object.find('.btn-save-data').show();
var id = $(obj).attr('data-id');
var is_enabled = 1; var data = {};
var code = object.find('input[name="code"]').val();
var name = object.find('input[name="name"]').val();
var tag = object.find('input[name="tag"]').val(); if (id == '') {
id = null;
} data.code = code;
data.name = name;
data.tag = tag;
data.is_enabled = is_enabled;
data.id = id; requestJson("base-data-category-save-handler", data, true, function (response) {
if (response.status == 0) {
id = response.data.id;  //ajax 添加|修改 成功后 读取数据库的id
replace(object, id, code, name, tag);
} else {
errorDialog(response.message);
}
}); } //取消
function cancelBaseDataCategory(obj) { var object = $(obj).parent().parent();
var id = $(obj).attr('data-id'); if (id == '') {
object.remove();
return;
} var code = object.find('input[name="code"]').attr('data-base-title');
var name = object.find('input[name="name"]').attr('data-base-title');
var tag = object.find('input[name="tag"]').attr('data-base-title'); // //替换
object.find('.code_one').html("<td class='code_one'>" + code + "</td>");
object.find('.name_one').html("<td class='name_one'>" + name + "</td>");
object.find('.tag_one').html("<td class='tag_one'>" + tag + "</td>"); object.find('.btn-edit-data').show();
object.find('.btn-delete-data').show();
object.find('.btn-save-data').hide();
object.find('.btn-cancel-data').hide();
} //input 框 替换 表格
function replace(object, id, code, name, tag) {
var tr = '<tr>' +
"<td class='code_one'>" + code + "</td>" +
"<td class='name_one'>" + name + "</td>" +
"<td class='tag_one'>" + tag + "</td>" +
"<td class='table-text-align-left'>" +
"<a href=javascript:void(0) onclick='onEditData(this)' data-id='" + id + "' " +
"class='btn btn-link btn-edit-data'>编辑</a>" + "<a href=javascript:void(0) onclick='deleteBaseDataCategory(this)' data-id='" + id + "'" +
"class='btn btn-link btn-delete-data'>删除</a>" + "<a href=javascript:void(0) onclick='onSaveBaseDataCategory(this)' data-id='" + id + "'" +
"class='btn btn-link btn-save-data'>保存</a>" + "<a href=javascript:void(0) onclick='cancelBaseDataCategory(this)' data-id='" + id + "'" +
" class='btn btn-link btn-cancel-data'>取消</a>" +
"</td>" +
"</tr>";
object.replaceWith(tr);
return true;
} //删除基础分类
function deleteBaseDataCategory(obj) {
var object = $(obj).parent().parent();
var id = $(obj).attr('data-id');var data = {};
data.id = id;
requestJson('base-data-category-delete-handler', data, true, function (response) {
if (response.status == 0) {
object.remove();
} else {
errorDialog(response.message); //这是错误提示 自己封装的
}
}) } </script>
<div class="form-horizontal" id="base_data_category_submit_form">
<div class="panel panel-frame panel-operat">
<div class="panel-body">
<div class="panel-content">
<a type="button" class="btn btn-primary putaway-icon ">
<div class="btn-icon"></div>
<div id="onAddBaseDataCategory" class="btn-text">添加</div>
</a>
</div>
</div>
</div> <div class="panel panel-frame">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="baseDataCategoryTable">
<thead>
<tr id="th">
<th>编码</th>
<th>名称</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php
foreach ($items as $item) {
?>
<tr>
<td class='code_one'><?= $item['code'] ?></td>
<td class='name_one'><?= $item['name'] ?></td>
<td class='tag_one'><?= $item['tag'] ?></td>
<td class='table-text-align-left'>
<a href="javascript:void(0);" onclick="onEditData(this)" data-id="<?= $item['id'] ?>"
class='btn btn-link btn-edit-data'>编辑</a>
<a href="javascript:void(0);" onclick="deleteBaseDataCategory(this)"
data-id="<?= $item['id'] ?>"
class='btn btn-link btn-delete-data'>删除</a>
<a href="javascript:void(0);" onclick="onSaveBaseDataCategory(this)"
data-id="<?= $item['id'] ?>"
class='btn btn-link btn-save-data'>保存</a>
<a href=javascript:void(0) onclick='cancelBaseDataCategory(this)'
data-id="<?= $item['id'] ?>"
class='btn btn-link btn-cancel-data'>取消</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="table-pagination">
</div>
</div>
</div>

ps: requestJson 是我自己封装的ajax请求 : 配合 yii框架使用的 我给大家分享一下

/**
* ajax获取json数据
* @param url
* @param data
* @param async
* @param successFun
* @param errorFun
* @returns {{}}
*/
requestJson = function (url, data, async, successFun, errorFun) {
if (!(typeof loading === 'undefined')) {
loading.show();
} var responseData = {};
responseData.status = -100;
responseData.message = '网络不给力!';
responseData.data = null; // data._csrf = $('meta[name="csrf-token"]').attr("content"); $.ajax({
async: async || false,
type: "POST",
url: url,
data: data,
dataType: "json",
success: function (data) {
responseData = data; if (successFun) {
successFun(data);
} if (!(typeof loading === 'undefined')) {
loading.hide();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (!(typeof loading === 'undefined')) {
loading.hide();
} responseData.status = -101;
responseData.message = XMLHttpRequest.responseText; // errorMessage(responseData.message); if (errorFun) {
errorFun(responseData);
}
}
}); return responseData;
};

jquery 配合 ajax 完成 在线编辑 你值得拥有的更多相关文章

  1. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  2. python 全栈开发,Day56(jQuery的ajax)

    昨日内容回顾 事件流: 1.事件捕获 从最外层到最内层 2.事件目标阶段 3.事件冒泡 从最内层到最外层 每个事件都会事件对象 event 属性和方法 属性: event.target 目标节点(冒泡 ...

  3. 补充:jQuery的ajax

    一.jQuery的ajax 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJA ...

  4. 【原创经验分享】JQuery(Ajax)调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  5. jQuery与ajax 基础运用

    jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...

  6. 关于Jquery中ajax介绍

    jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...

  7. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  8. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  9. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

随机推荐

  1. hdu 4276 树形m时间1进n出

    http://acm.hdu.edu.cn/showproblem.php?pid=4276 一般题目是求回到原地,而这道题规定从1进n出.所以1-n这条路是必走,其他走不走无所谓. 这样很自然通过d ...

  2. vue复习

    vue 复习   options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象   对象中的key, 可以直接在页面中 ...

  3. iDempiere 使用指南 BOM及工单流程

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  4. java之Socket多线程传递对象

    服务器端利用线程池回复客户端: public class Server implements Runnable { private final ServerSocket server; private ...

  5. Java线程堆栈分析

    不知觉间工作已有一年了,闲下来的时候总会思考下,作为一名Java程序员,不能一直停留在开发业务使用框架上面.老话说得好,机会是留给有准备的人的,因此,开始计划看一些Java底层一点的东西,尝试开始在学 ...

  6. 微信小程序实现获得用户手机号

    具体操作方法如下: 使用方法 需要将 <button> 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumb ...

  7. PHP:如果正确加载js、css、images等静态文件

    日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈 这里有几个注意项: 1.路径 ...

  8. MySQL入门很简单: 12 MYSQL 用户管理

    1. 权限表 安装MySQL会自动安装一个名为mysql的数据库,存储权限表: user表, db表,host表,table_priv表,columns_priv表,proc_priv表等. 1)us ...

  9. C#自定义规则对比两个集合的对象是否相等

    IList<获取的类> ret = 类的结果集; return ret.Except(另一个相同类型的对象列表集, new AClassComPare()): public class A ...

  10. A. Round House_数学问题

    A. Round House time limit per test 1 second memory limit per test 256 megabytes input standard input ...