jquery 配合 ajax 完成 在线编辑 你值得拥有
思路分析:
将 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; };
男儿立志出乡关 学不成名誓不还