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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
javascript常用方法总结
May 14 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
利用js实现简单开关灯代码
Nov 23 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
JS input 数字验证代码
2009/07/30 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python中的包和模块实例
2014/11/22 Python
Python的函数的一些高阶特性
2015/04/27 Python
python通过post提交数据的方法
2015/05/06 Python
python批量修改文件编码格式的方法
2018/05/31 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Python实现动态循环输出文字功能
2020/05/07 Python
keras 权重保存和权重载入方式
2020/05/21 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
Java基础类库面试题
2013/09/04 面试题
土木工程应届生自荐信
2013/09/24 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android