layui數據表格新增一行

方案一

layui的數據表格集成了查看編輯刪除等功能，但新增功能官方文檔卻沒有提及，當業務需求需要點擊新增一行時，可用如下方式實現

實現的思路是：當點擊新增一行時，把之前的數據保存下來，並在數據尾部增加一行空數據
然后將新數據重新載入表格

var dataBak = [];   //定義一個空數組,用來存儲之前編輯過的數據已經存放新數據

var tableBak = table.cache.stock_add_table; 
//獲取之前編輯過的全部數據，前提是編輯數據是要更新緩存，stock_add_table 為表格的id

for (var i = 0; i < tableBak.length; i++) {
    dataBak.push(tableBak[i]);      //將之前的數組備份
}

在尾部新增一行空數據，實現增行效果
dataBak.push({   
    "stockInCargo": ""
    ,"stockInNum": ""
    ,"stockInPrice": ""
    ,"stockCargoTime": ""
    ,"stockInCompany": ""
});

table.reload("stock_add_table",{
    data:dataBak   // 將新數據重新載入表格
})

原文：https://blog.csdn.net/rj_han/article/details/80664068 

 

方案二

https://blog.csdn.net/sj0613xz/article/details/78963971

• 解決方案：將table改寫成靜態的方式即可，即第二部分代碼
• 此時出現新問題：每點擊一次會出現兩條數據，應做如下修改：

  $(".layui-table-body .layui-table").append(tr);

  最后即可實現點擊按鈕新增一條數據的效果。