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实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
小程序实现五星点评效果
Nov 03 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
详解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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
js更优雅的兼容
2010/08/12 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
js实现无缝滚动图
2017/02/22 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
python中pass语句用法实例分析
2015/04/30 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python读写LMDB文件的方法
2018/07/02 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python with (as)语句实例详解
2020/02/04 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记