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

2024-09-30 00:24:02

使用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加载表格,绑定新增,编辑删除,查看按钮事件的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

layui弹出层按钮提交iframe表单的方法

如下所示: layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 type: 2, title:'添加人员信息', area: ['600px','340px'], btn: ['保存','关闭'], yes: function(index, layero){ var inputForm = $(window.frames["layui-layer-iframe" + index].document).contents().find(&quo
layui使用button按钮点击出现弹层弹层中加载表单的实例

1.html代码片段 <div class="layui-input-inline"> <button type="button" οnclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button> </div> 注意:必须添加 type="button&qu
layui 优化button按钮和弹出框的方法

正常下的layui在3个button按钮压缩之后代码为 <button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button> <button data-id="{$acti
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能 js方法 /** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @param {} title 标题不显示为false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度 * @param {} path
layui table动态表头改变表格头部重新加载表格的方法

改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</tit
JavaScript动态加载重复绑定问题

前言在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,
layui加载数据显示loading加载完成loading消失的实例代码

项目中,向后台请求数据,经常会出现较长的等待时间,这时我们需要一个loading转圈圈,接收到后台的数据时,让loading消失这layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading <link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" /> <script type="text/javascr
js操作table元素实现表格行列新增、删除技巧总结

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************
javascript如何动态加载表格与动态添加表格行

一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句若在当前html文件中,则写在<script>标签内部,如复制代码代码如下: <script type="text/javascript" > document.getElement
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

onLoadSuccess : function(data) { if(!data.success){ //添加一个新数据行,第一列的值为你需要的提示信息,然后将其他列合并到第一列来,注意修改colspan参数为你columns配置的总列数 $(this).datagrid( 'appendRow', { portId : '<div style="text-align:center;color:red">'+data.msg+'</div>' }).datag
BootStrap给table表格的每一行添加一个按钮事件

1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate', title: '操作', width: '80px', events: operateEvents, formatter: operateFormatter } 2.写一个函数 function operateFormatter(value, row, index) { return [ '<input type="submit&qu
在layui框架中select下拉框监听更改事件的例子

在select 加入红框中的代码(看不到红框的往右拖动一点) 事件监听select(这里面是上面图中红框内容可自定义) 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
Android中webView加载H5绑定cookie实例

简介: 我最近在做项目的时候遇到了这种情况: 1.需要用WebView实现一个H5的登陆注册. 2.大赛报名,用H5实现.这些情况下,我需要把cookie传给服务器,让其判断当前账户是否登陆成功.查阅了一些资料后,终于搞定了. 1. 给一个加载的链接设置cookie private void syncCookie(String url) { try { CookieSyncManager.createInstance(mWvSignUp.getContext());//创建一个cookie管理器

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

相关推荐

随机推荐