Layui表格行內(nèi)動(dòng)態(tài)編輯數(shù)據(jù)

更新時(shí)間：2021年08月31日 16:38:12 作者：HUALEI

本文主要介紹經(jīng)典前端框架 layui 中的動(dòng)態(tài)表格數(shù)據(jù)操作，結(jié)合 JQuery 動(dòng)態(tài)編輯單元格中的數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的可以了解一下

前言

今天向大家分享一些關(guān)于經(jīng)典前端框架 layui 中的動(dòng)態(tài)表格數(shù)據(jù)操作，結(jié)合 JQuery 動(dòng)態(tài)編輯單元格中的數(shù)據(jù)，希望能幫助到有需要的人，加油，共勉！

樣式功能說明

初始化代碼

根據(jù) Layui 開發(fā)文檔，我們能很容易寫出如下代碼，加載內(nèi)置組件，動(dòng)態(tài)表格數(shù)據(jù)填充：

layui.use(function () {
    let layer = layui.layer,
        element = layui.element,
        table = layui.table,
        form = layui.form;
    // 指定編輯字段
    const field = ['typeName'];
    // 表格加載數(shù)據(jù)
    table.render({
        elem: "#newsTypeTable",
        height: 522,
        url: serverBase + "newsType/all",
        parseData: function (res) {
            return {
                "code": res.code,
                "data": res.data.types,
                "count": res.data.count
            };
        },
        // 開啟分頁
        page: true,
        request: {
            pageName: 'offset',
            limitName: 'pageSize'
        },
        toolbar: `
            <div>
                {{# if(checkPermission(1, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add">
                        <i class="layui-icon layui-icon-addition"></i>
                    </button>
                {{# } }}
                {{# if(checkPermission(3, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="batchDel">
                        <i class="layui-icon layui-icon-subtraction"></i>
                    </button>
                {{# } }}
            </div>
        `,
        defaultToolbar: [],
        cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', sort: true, align: 'center'},
                    {field: 'typeName', title: '新聞?lì)悇e', align: 'center'},
                    {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#myBar'}
                ]
        ],
        text: {
            none: '顯示個(gè)寂寞哦~'
        }
    });
});

說明

首先通過請(qǐng)求后臺(tái)數(shù)據(jù)，將請(qǐng)求到的數(shù)據(jù)通過數(shù)據(jù)解析賦值，注意：如果開啟了分頁，需要后端傳遞顯示的總條數(shù)，當(dāng)打開頁面默認(rèn)發(fā)送的分頁請(qǐng)求是 ...?page=1&limit=10 ，通過 request 屬性改變傳遞的參數(shù)名，例如我的分頁請(qǐng)求就被改為 ...all?offset=1&pageSize=10 。

開啟了 toolbar 之后，右邊默認(rèn)的頭工具欄就會(huì)開啟，不需要?jiǎng)t需要將 defaultToolbar 屬性值置空，而且當(dāng)你自定義 toobar 時(shí)，HTML 標(biāo)簽元素需放到 div 標(biāo)簽之中方能生效，這個(gè)一個(gè)規(guī)定。

toobar 中使用 Layui 模版語法對(duì)當(dāng)前管理員權(quán)限進(jìn)行驗(yàn)證，如果沒有該權(quán)限則不予以顯示。

通過 {type: 'checkbox', fixed: 'left'} 開啟復(fù)選框，并將其固定到表格中的最左側(cè)。

操作欄中，通過 id 引入外部自定義 toolbar

<script type="text/html" id="myBar">
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

添加監(jiān)聽事件

監(jiān)聽頭工具欄

table.on('toolbar(newsTypeList)', function(obj) {
    let checkStatus = table.checkStatus(obj.config.id);
    // 選中行數(shù)據(jù)
    let selectedData = checkStatus.data;
    if(obj.event === 'add') {
        // 跳轉(zhuǎn)到新聞?lì)愋吞砑禹撁?
        window.open('addNewsType.html', 'mainFrame');
    }else if(obj.event === 'batchDel') {
        if(selectedData.length > 0) {
            let ids = [];
            selectedData.forEach((targetRow) => {
                ids.push(targetRow.id)
            });
            layer.confirm(`確認(rèn)刪除 ID[${ids}] 嗎？`, {title: '警告', icon: 0},
                function (index) {
                    $.ajax({
                        type: "DELETE",
                        contentType: "application/json;charset=UTF-8",
                        url: serverBase + "newsType/del",
                        data: JSON.stringify(ids),
                        dataType: 'json',
                        success: function (res) {
                            if (handleResponseData(res, layer)) {
                                // 成功刪除后，重新加載頁面
                                setTimeout(function () {
                                    location.href = 'newsTypeList.html';
                                }, delayTime);
                            }
                        }
                    });
                    layer.close(index);
                }
            );
        }else {
            layer.msg('請(qǐng)至少選擇一行', {icon: 3});
        }
    }
});

公用 js 文件中定義了 serverBase（請(qǐng)求后端基址）、delayTime（消息彈層延遲時(shí)間）以及封裝了對(duì)返回?cái)?shù)據(jù)進(jìn)行處理的函數(shù) handleResponseData 。

到此，頭工具欄的兩個(gè)功能就實(shí)現(xiàn)了，還是比較簡(jiǎn)單的，對(duì)吧？

監(jiān)聽表格行工具欄

table.on('tool(newsTypeList)', function (obj) {
    // 獲得 lay-event 對(duì)應(yīng)的值（也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值）
    var layEvent = obj.event;
    // 獲取該行數(shù)據(jù)對(duì)象
    var data = obj.data;
    switch (layEvent) {
        case 'edit':
            const row = obj.tr;
            const field_td = row.find(`[data-field$=${field[0]}]`);
            field_td.data('edit', true);
            row[0].onclick = function() {
                setTimeout(function () {
                    field_td[0].lastChild.onblur = function () {
                        row.find('[data-field$=typeName]').data('edit', false);
                    }
                }, 10);
            };
            break;
        case 'del':
            let ids = [];
            ids.push(data.id);
            layer.confirm(`真的刪除 ID => ${ids[0]} 所在行嗎？`, function(index) {
                //向服務(wù)端發(fā)送刪除指令
                $.ajax({
                    type: "DELETE",
                    contentType: "application/json;charset=UTF-8",
                    url: serverBase + "newsType/del",
                    data: JSON.stringify(ids),
                    dataType: 'json',
                    success: function (res) {
                        if (handleResponseData(res, layer)) {
                            setTimeout(function () {
                                // 刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
                                obj.del();
                            }, delayTime);
                        }
                    }
                });
                layer.close(index);
            });
            break;
    }
});

行刪除很簡(jiǎn)單，就是通過點(diǎn)擊所在行拿到刪除對(duì)象的 id ，向后端傳遞即可完成對(duì)應(yīng)行的數(shù)據(jù)刪除。

行內(nèi)實(shí)現(xiàn)點(diǎn)擊編輯按鈕進(jìn)行編輯可謂有點(diǎn)難度了，首先你點(diǎn)擊按鈕后，要開啟約定字段的編輯，即點(diǎn)擊后就會(huì)出現(xiàn)一個(gè)輸入框，你可以對(duì)其進(jìn)行修改更新操作，當(dāng)輸入框失去焦點(diǎn)時(shí)，又要將剛剛的編輯入口關(guān)閉，也就是再一次點(diǎn)擊時(shí)不會(huì)二次出現(xiàn)輸入框。

// 開啟指定字段的編輯，關(guān)閉同理，參數(shù)傳入 false 即可
obj.tr.find(`[data-field$=${field[0]}]`).data('edit', true);

其中，field 規(guī)定編輯字段名，和 cols 屬性中 field 屬性值一致。

// 指定編輯字段
const field = ['typeName'];

通過 JQuery 中 find 函數(shù)找到單元格對(duì)應(yīng)的標(biāo)簽，再通過 data 函數(shù)增添 edit 屬性，并將其初始化為 true 值，相當(dāng)于：{field: 'typeName', title: '新聞?lì)悇e', align: 'center', edit: true}

由于輸入框是在點(diǎn)擊對(duì)應(yīng)的單元格后出現(xiàn)的，所以給單元格注冊(cè)一個(gè)點(diǎn)擊事件，點(diǎn)擊事件后不能立馬獲取到 input 輸入框，需要 DOM 結(jié)構(gòu)更新存在延遲，需要給點(diǎn)延遲獲取的時(shí)間。

通過瀏覽器調(diào)試發(fā)現(xiàn)，該單元格 td 父元素中最后一個(gè)子元素就是 input ，添加失焦事件，當(dāng)觸發(fā)時(shí)，關(guān)閉編輯入口，需重新按下按鈕開啟。

row[0].onclick = function() {
    setTimeout(function () {
        field_td[0].lastChild.onblur = function () {
            row.find('[data-field$=typeName]').data('edit', false);
        }
    }, 10);
};

監(jiān)聽單元格

table.on('edit(newsTypeList)', function(obj) {
    let value = obj.value // 得到修改后的值
        , data = obj.data // 得到所在行所有鍵值
        , field = obj.field; //得到修改的字段
    let modifiedData = {id: data.id};
    modifiedData[field] = value;
    $.ajax({
        type: "POST",
        contentType: "application/json;charset=UTF-8",
        url: serverBase + 'newsType/update',
        data: JSON.stringify(modifiedData),
        dataType: 'json',
        success: function(res) {
            if(!handleResponseData(res, layer)) {
                setTimeout(function () {
                    location.href = 'newsTypeList.html';
                }, delayTime);
            }
        }
    });
});

最后，將修改后的對(duì)象傳入并發(fā)送更新請(qǐng)求，對(duì)于修改的值可于后臺(tái)進(jìn)行校驗(yàn)，修改失敗則刷新當(dāng)前頁面。

結(jié)尾

到此這篇關(guān)于Layui表格行內(nèi)動(dòng)態(tài)編輯數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Layui表格動(dòng)態(tài)編輯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: