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;

};

巴特西

jquery 配合 ajax 完成在线编辑你值得拥有

最新文章

热门文章

巴特西

jquery 配合 ajax 完成 在线编辑 你值得拥有

最新文章

热门文章

jquery 配合 ajax 完成在线编辑你值得拥有