layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

使用获得框架的时候，总会重复的写相关代码，感觉很是苦恼，所以进行分装，只需要关注业务方面即可

如下图，提供新增，编辑，查看等功能

射流研究…方法

/** * 页面内弹出编辑窗口//需要引入layui.js layui.css文件* @param {}标题标题不显示为false * @param {}区域大小[' 400像素',' 500像素]或者400像素只设置宽度* @param {}路径弹出页面路径* @param {} sucFunName执行保存操作后再弹出页面中的保存方法名称* @param {}回调执行保存操作之后的其他操作* @返回{ } */函数openDetial(标题、区域、路径、sucFunName、回调){ layer.open({ type: 2，title: title，//不显示标题栏closeBtn: 2，area: area，shade: 0.8，id:(新日期())。valueOf()，//设定一个id，防止重复弹出时间戳1280977330748 btn: ['保存', '取消]，btnAlign: 'r '，moveType: 1，//拖拽模式，0或者1内容：路径，是：函数(index，layero) { var btn=layero.find ' .拉伊-层-BTN ' .查找('。layui-layer-BTN 0’；alert('-')；请尝试{ var _ IFR=BTN[0]。父节点。父节点。getelementsbyclassname(' layui-layer-content ')[0].儿童[0]。内容窗口| | BTN[0]。父节点。父节点。getelementsbyclassname(' layui-layer-content ')[0].儿童[0]。儿童[0]。contentWindowvar函数=新函数(' _ifr '，' return _ IFR ' succfunname ')；');var flg=func(_ IFR)；if(flg==false){ return false；} else { if(CALl！=null)回调();窗户。位置。重载()；} } catch (ex) { }，btn2:函数(index，layero){ } })；}///** * 初始化表格及表格相关的简单操作//需要引入layui.js layui.css文件* @param {} t表参数形如{id:'test '，indexName:'ID '，heigt:'full-30 '，url:'Account？GetTableJson| '，page:true，cols:[ { field: 'ID '，title: 'ID '，width: 80 }，]} * @param {}编辑器编辑方法* @param {} deltes删除方法* @param {}已读查看方法* @返回{ } */函数createTable(t，editor，deltes，read){ var bodys=document。getelementsbytagname(' body ')[0]；身体。innerhtml=' table class=' layui-hide ' id=' test ' lay-filter=' demo '/' table ' '脚本类型=' text/html ' id=' barDemo ' ' ' a class=' layui-BTNlayui-BTN-primary layui-BTN-xs ' lay-event=' detail '查看/"a"a类=" layui-BTNlayui-BTN-xs " lay-event=" edit "编辑/' a ' a ' class=' layui-BTN layui-BTN-danger layui-BTN-xs ' lay-event=' del '删除/""一个"/"脚本；layui.use(['laypage '，' table']，function(){ var lay page=layui。放置页面，//分页表=layui.table//表格//执行一个桌子实例桌子。render({ elem : ' # '(t . ID | | ' test ')，id: t.indexName || ID，height: t.heigt || 'full-30 '，url: t.url，//数据接口第：页，第/开启分页cols :[t . cols]})；table.on('tool(demo)'，function (obj) { //注：工具是工具条事件名，测试是桌子原始容器的属性lay-filter='对应的值var data=obj.data，//获得当前行数据obj.event//获得外行事件对应的值if(layEvent==' detail '){ if(read！=null)读取(obj)；} else if(layEvent==' del '){ layer。确认('真的删除行么，函数（索引){ obj。德尔(obj)；//删除对应行(tr)的数字正射影像图结构layer.close(索引);//向服务端发送删除指令if (deltes！=null)deltes(obj)；});} else if(layEvent===' edit '){ editor(obj)；} });});}调用页面

！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='样式表href='./././Publics/others/layui/CSS/layui。CSS ' rel='外部无跟随' media=' all '脚本类型=' text/JavaScript ' src=' http :/././functionjs。js /脚本样式正文{ margin: 10px}。演示转盘{高： 200像素线高： 200像素；文本对齐：中心；}/样式/床头柜脚本src='http:/././Publics/others/layui/layui。js '/script脚本src=' http :/././layuifunction。js/script脚本var addButton=' button class=\ ' layui-BTN layui-BTN-xs ' n click=\ ' 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: '名称，宽度： 180 }，{ field: 'TypeName '，title: '消费类型}，{ field: 'PRICE '，title: '价格}，{ field: 'ISOUT '，title: '账目类型}，{ field: ' Dates '，title: '日期}，{ field: '备注，标题： '备注，宽度：180 }，{固定： '右，标题：添加按钮，宽度： 180，对齐： '中，工具栏： ' # BarDemo ' }]}；createTable(tableObj)，function (obj) { layer.alert('编辑行：br ' JSON。字符串。数据))；openDetial('账单编辑，['600px '，' 550px']，/editor.html '，' ApplicationSave '，null)；},函数{ layer.alert('删除行：br ' JSON。字符串。数据))；},函数{ layer.alert('查看行：br ' JSON。字符串。数据))；} );/脚本/正文/html以上这篇获得加载表格，绑定新增，编辑删除，查看按钮事件的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。