layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子
使用layui框架的時(shí)候,總會(huì)重復(fù)的寫(xiě)相關(guān)代碼,感覺(jué)很是苦惱,所以進(jìn)行分裝,只需要關(guān)注業(yè)務(wù)方面即可
如下圖,提供新增,編輯,查看等功能
js方法
/** * 頁(yè)面內(nèi)彈出編輯窗口 //需要引入 layui.js layui.css文件 * @param {} title 標(biāo)題 不顯示為false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只設(shè)置寬度 * @param {} path 彈出頁(yè)面路徑 * @param {} sucFunName 執(zhí)行保存操作后再?gòu)棾鲰?yè)面中的保存方法名稱 * @param {} callBack 執(zhí)行保存操作之后的其他操作 * @returns {} */ function openDetial(title, area, path, sucFunName, callBack) { layer.open({ type: 2, title: title, //不顯示標(biāo)題欄 closeBtn: 2, area: area, shade: 0.8, id: (new Date()).valueOf(), //設(shè)定一個(gè)id,防止重復(fù)彈出 時(shí)間戳1280977330748 btn: ['保存', '取消'], btnAlign: 'r', moveType: 1, //拖拽模式,0或者1 content: path, yes: function (index, layero) { var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0'); alert("-----"); try { var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow || btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow; var func = new Function('_ifr', "return _ifr." + sucFunName + "();"); var flg = func(_ifr); if (flg == false) { return false; } else { if (callBack != null) callBack(); window.location.reload(); } } catch (ex) { } }, btn2: function (index, layero) { } }); } // /** * 初始化表格及表格相關(guān)的簡(jiǎn)單操作 //需要引入 layui.js layui.css文件 * @param {} t table參數(shù)形如 {id:'test',indexName:'ID',heigt:'full-30',url:'Account?GetTableJson|&',page:true,cols:[ { field: 'ID', title: 'ID', width: 80 },]} * @param {} editor 編輯方法 * @param {} deltes 刪除方法 * @param {} read 查看方法 * @returns {} */ function createTable(t, editor, deltes, read) { var bodys = document.getElementsByTagName("body")[0]; bodys.innerHTML += '<table class="layui-hide" id="test" lay-filter="demo"></' + 'table>' + '<script type="text/html" id="barDemo">' + ' <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</' + 'a>' + ' <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</' + 'a>' + ' <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</' + 'a>' + '</' + 'script>'; layui.use(['laypage', 'table'], function () { var laypage = layui.laypage, //分頁(yè) table = layui.table; //表格 //執(zhí)行一個(gè) table 實(shí)例 table.render({ elem: '#' + (t.id || 'test'), id: t.indexName || ID, height: t.heigt || 'full-30', url: t.url, //數(shù)據(jù)接口 page: t.page, //開(kāi)啟分頁(yè) cols: [ t.cols ] }); table.on('tool(demo)', function (obj) { //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值" var data = obj.data, //獲得當(dāng)前行數(shù)據(jù) layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值 if (layEvent === 'detail') { if (read != null) read(obj); } else if (layEvent === 'del') { layer.confirm('真的刪除行么', function (index) { obj.del(obj); //刪除對(duì)應(yīng)行(tr)的DOM結(jié)構(gòu) layer.close(index); //向服務(wù)端發(fā)送刪除指令 if (deltes != null) deltes(obj); }); } else if (layEvent === 'edit') { editor(obj); } }); }); }
調(diào)用頁(yè)面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all"> <script type="text/javascript" src="../../../FunctionJs.js"></script> <style> body { margin: 10px; } .demo-carousel { height: 200px; line-height: 200px; text-align: center; } </style> </head> <body> <script src="../../../Publics/others/layui/layui.js"></script> <script src="../../../LayuiFunction.js"></script> <script> var addButton = '<button class=\"layui-btn layui-btn-xs\" οnclick=\'openDetial(\"新增編輯\", [\"600px\", \"550px\"], \"./editor.html\", \"ApplicationSave\", null)\'>新增</button>'; var tableObj = { id: 'test', indexName: 'ID', heigt: 'full-30', url: 'Account?action=GetTableJson', page: false, cols: [ { field: 'ID', title: 'ID' }, { field: 'Names', title: '名稱', width: 180 }, { field: 'TypeName', title: '消費(fèi)類型' }, { field: 'PRICE', title: '價(jià)格' }, { field: 'ISOUT', title: '賬目類型' }, { field: 'Dates', title: '日期' }, { field: 'Remark', title: '備注', width: 180 }, { fixed: 'right', title: addButton, width: 180, align: 'center', toolbar: '#barDemo' } ] }; createTable(tableObj, function (obj) { layer.alert('編輯行:<br>' + JSON.stringify(obj.data)); openDetial("賬單編輯", ['600px', '550px'], "./editor.html", "ApplicationSave", null); }, function (obj) { layer.alert('刪除行:<br>' + JSON.stringify(obj.data)); }, function(obj) { layer.alert('查看行:<br>' + JSON.stringify(obj.data)); } ); </script> </body> </html>
以上這篇layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
前端用echarts繪制含有多個(gè)分層的波形圖關(guān)鍵代碼
每次實(shí)現(xiàn)各種圖表時(shí),總會(huì)用到echarts,不得不說(shuō)確實(shí)是一個(gè)非常好用的開(kāi)源庫(kù),這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個(gè)分層的波形圖的相關(guān)資料,需要的朋友可以參考下2024-03-03JavaScript必看的10道面試題總結(jié)(推薦)
JavaScript 已經(jīng)成為全棧開(kāi)發(fā)技能的基石,在全棧開(kāi)發(fā)面試中都會(huì)不可避免地涉及到與 JavaScript 有關(guān)的問(wèn)題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05js通過(guò)地址欄給action傳值(中文亂碼全是問(wèn)號(hào))
我從js代碼中通過(guò)地址欄傳值給了action的相應(yīng)變量,但是,如果變量值為中文的時(shí)候,在action中測(cè)試輸出則為問(wèn)號(hào)2013-05-05javascript實(shí)現(xiàn)3D切換焦點(diǎn)圖
一款用JavaScript模仿3D立體切換效果的js焦點(diǎn)幻燈片特效,使用方法很簡(jiǎn)單:用鼠標(biāo)拖拽圖片向左右方向就好~2015-10-10利用javascript如何隨機(jī)生成一定位數(shù)的密碼
這篇文章主要給大家介紹了關(guān)于利用javascript如何隨機(jī)生成一定位數(shù)的密碼的相關(guān)資料,文中給出了詳細(xì)的示例代碼,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09js實(shí)現(xiàn)的修改div里img標(biāo)簽的src屬性
js實(shí)現(xiàn)的修改div里img標(biāo)簽的src屬性...2007-09-09JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(十六) javascript檢測(cè)瀏覽器和操作系統(tǒng)-detect.js
javascript檢測(cè)瀏覽器和操作系統(tǒng) detect.js使用介紹,需要的朋友可以參考下2012-08-08