目錄

• 前言
• 樣式功能說明
• 初始化程式碼
  
• 新增監聽事件
  
• 監聽頭工具欄
  
• 監聽表格行工具欄
  
• 監聽單元格
  
• 結尾

前言

今天向大家分享一些關於經典前端框架 layui 中的動態表格資料操作，結合 動態編輯單元格中的資料，希望能幫助到有需要的人，加油，共勉！

樣式功能說明

初始化程式碼

根據 Layui 開發文件，我們能很容易寫出如下程式碼，載入內建元件，動態表格資料填充：

layui.use(function () {
    let layer = layui.layer,element = layui.element,table = layui.table,form = layui.form;
    // 指定編輯欄位
    const field = ['typeName'];
    // 表格載入資料
    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
            };
        },www.cppcns.com
 
// 開啟分頁
        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(checkPerm
 
ission(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: '新聞類別',{title: '操作',fixed: 'right',width: 200,align: 'center',toolbar: '#myBar'}
                ]
        ],text: {
            none: '顯示個寂寞哦~'
        }
    });
});

說明

首先通過請求後臺資料，將請求到的資料通過資料解析賦值，注意：如果開啟了分頁，需要後端傳遞顯示的總條數，當開啟頁面預設傳送的分頁請求是 ...?page=1&limit=10 ，通過 request 屬性改變傳遞的引數名，例如我的分頁請求就被改為 ...all?offset=1&pageSize=10 。

開啟了 toolbar 之後，右邊預設的頭工具欄就會開啟，不需要則需要將 defaultToolbar 屬性值置空，而且當你自定義 toobar 時，HTML 標籤元素需放到 div 標籤之中方能生效，這個一個規定。

toobar 中使用 Layui 模版語法對當前管理員許可權進行驗證，如果沒有該許可權則不予以顯示。

通過 {type: 'checkbox',fixed: 'left'} 開啟複選框，並將其固定到表格中的最左側。

操作欄中，通過 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>

新增監聽事件

監聽頭工具欄

table.on('toolbar(newsTypeList)',function(obj) {
    let checkStatus = table.checkStatus(obj.config.id);
    // 選中行資料
    let selectedData = checkStatus.data;
    if(obj.event === 'add') {
        // 跳轉到新聞型別新增頁面
        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(`確認刪除 ID[${ids}] 嗎？`,{title: '警告',icon: 0},function (index) {
                    $.ajax({
                        type: "DELETE",contentType: "application/on;charset=UTF-8",url: serverBase + "newsType/del",data: JSON.stringify(ids),www.cppcns.com   dataType: 'json',success: function (res) {
                            if (handleResponseData(res,layer)) {
                                // 成功刪除後，重新載入頁面
                                setTimeout(function () {
                                    location.href = 'newsTypeList.html';
                                },delayTime);
                            }
                        }
                    });
                    layer.close(index);
                }
            );
        }else {
            layer.msg('請至少選擇一行',{icon: 3});
        }
    }
});

公用 js 檔案中定義了 serverBase（請求後端基址）、delayTime（訊息彈層延遲時間）以及封裝了對返回資料進行處理的函式 handleResponseData 。

到此，頭工具欄的兩個功能就實現了，還是比較簡單的，對吧？

監聽表格行工具欄

table.on('tool(newsTypeList)',function (obj) {
    // 獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值）
    var layEvent = obj.event;
    // 獲取該行資料物件
    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) {
                //向服務端傳送刪除指令
                $.ajax({
                    type: "DELETE",contentType: "application/json;charset=UTF-8",dataType: 'json',success: function (res) {
                        if (handleResponseData(res,layer)) {
                            setTimeout(function () {
                                // 刪除對應行（tr）的DOM結構，並更新快取
                                obj.del();
                            },delayTime);
                        }
                    }
                });
                layer.close(index);
            });
            break;
    }
});

行刪除很簡單，就是通過點選所在行拿到刪除物件的 id ，向後端傳遞即可完成對應行的資料刪除。

行內實現點選編輯按鈕進行編輯可謂有點難度了，首先你點選按鈕後，要開啟約定欄位的編輯，即點選後就會出現一個輸入框，你可以對其進行修改更新操作，當輸入框失去焦點時，又要將剛剛的編輯入口關閉，也就是再一次點選時不會二次出現輸入框。

// 開啟指定欄位的編輯，關閉同理，引數傳入 false 即可
obj.tr.find(`[data-field$=${field[0]}]`).data('edit',true);

其中，field 規定編輯欄位名，和 cols 屬性中 field 屬性值一致。

// 指定編輯欄位
const field = ['typeName'];

通過 JQuery 中 find 函式找到單元格對應的標籤，再通過 data 函式增添 edit 屬性，並將其初始化為 true 值，相當於：{field: 'typeName',edit: true}

由於輸入框是在點選對應的單元格後出現的，所以給單元格註冊一個點選事件，點選事件後不能立馬獲取到 input 輸入框，需要 DOM 結構更新存在延遲，需要給點延遲獲取的時間。

通過瀏覽器除錯發現，該單元格 td 父元素中最後一個子元素就是 input ，新增失焦事件，當觸發時，關閉編輯入口，需重新按下按鈕開啟。

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

監聽單元格

table.on('edit(newsTypeList)',function(obj) {
    let value = obj.value // 得到修改後的值,data = obj.data // 得到所在行所http://www.cppcns.com有鍵值,field = obj.field; //得到修改的欄位
    let modifiedData = {id: data.id};
    modifiedData[field] = vahDbPgNcjnslue;
    $.ajax({
        type: "POST",url: serverBase + 'newsType/update',data: JSON.stringify(modifiedData),success: function(res) {
            if(!handleResponseData(res,layer)) {
                setTimeout(function () {
                    location.href = 'newsTypeList.html';
                },delayTime);
            }
        }
    });
});

最後，將修改後的物件傳入併發送更新請求，對於修改的值可於後臺進行校驗，修改失敗則重新整理當前頁面。

結尾

到此這篇關於Layui表格行內動態編輯資料的文章就介紹到這了,更多相關Layui表格動態編輯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！