jquery 配合 ajax 完成 線上編輯 你值得擁有

標籤：parent   object   can   items   class   set   ems   enable   編碼   

 

思路分析:

將 table中的表格 改變成為 input表格框獲得值 ajax配合修改 刪除

 

<?phpuse 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 完成 線上編輯 你值得擁有