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


Posted in Javascript onSeptember 06, 2019

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

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

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

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

js方法

/**
 * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
 * @param {} title 标题 不显示为false
 * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
 * @param {} path 弹出页面路径
 * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称
 * @param {} callBack 执行保存操作之后的其他操作
 * @returns {} 
 */
function openDetial(title, area, path, sucFunName, callBack) {
 layer.open({
  type: 2,
  title: title, //不显示标题栏
  closeBtn: 2,
  area: area,
  shade: 0.8,
  id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳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) {
  }
 });
}
//
 
 
/**
 * 初始化表格及表格相关的简单操作 //需要引入 layui.js layui.css文件
 * @param {} t table参数形如 {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, //分页
   table = layui.table; //表格
  //执行一个 table 实例
  table.render({
   elem: '#' + (t.id || 'test'),
   id: t.indexName || ID,
   height: t.heigt || 'full-30',
   url: t.url, //数据接口
   page: t.page, //开启分页
   cols: [
    t.cols
   ]
  });
 
  table.on('tool(demo)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
   var data = obj.data, //获得当前行数据
 layEvent = obj.event; //获得 lay-event 对应的值
   if (layEvent === 'detail') {
    if (read != null) read(obj);
   } else if (layEvent === 'del') {
    layer.confirm('真的删除行么', function (index) {
     obj.del(obj); //删除对应行(tr)的DOM结构
     layer.close(index);
     //向服务端发送删除指令
     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="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: '消费类型' },
   { field: 'PRICE', title: '价格' },
   { 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加载表格,绑定新增,编辑删除,查看按钮事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 #Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 #Javascript
layui 弹出删除确认界面的实例
Sep 06 #Javascript
vue-cli3跨域配置的简单方法
Sep 06 #Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js身份证验证超强脚本
2008/10/26 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
js星星评分效果
2014/07/24 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
JS实现图片切换效果
2018/11/17 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python分支结构(switch)操作简介
2018/01/17 Python
Python编程求质数实例代码
2018/01/31 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
给海归自荐信的建议
2013/12/13 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
Apache自带的ab压力测试工具的实现
2022/07/23 Servers