layui监听单元格编辑前后交互的例子


Posted in Javascript onSeptember 16, 2019

我就废话不多说啦,大家直接看代码就行了!

如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>...</title>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body class="layui-layout-body">
 <div class="layui-layout layui-layout-admin">

  <div class="layui-body">
  <!-- 内容主体区域 -->
   <table id="demo" lay-filter="test"></table>
  </div>
 </div>
<script src="layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
 var element = layui.element;
 //一些事件监听
 element.on('tab(demo)', function(data){
  console.log(data);
 });
});

layui.use('table', function(){
 var table = layui.table;
 //监听单元格编辑
  table.render({
  elem: '#demo'
  ,height: 500
  ,url: 'data.php' //数据接口
  ,page: true //开启分页
  ,cols: [[ //表头
	  //全选
    {type:'checkbox'}
    //edit: 'text'为开启单元格编辑,sort:true开启排序
   ,{field:'id', title: 'ID', width:80, sort: true}
   ,{field:'uname', title: '用户名', width:120, sort: true, edit: 'text'}
   ,{field:'age',title: '年龄', width:80, sort: true, edit: 'text'}
  ]]
 });
 table.on('edit(test)', function(obj){
  var value = obj.value //得到修改后的值
  ,data = obj.data //得到所在行所有键值
  ,field = obj.field; //得到字段
  layui.use('jquery',function(){
   var $=layui.$;
   $.ajax({ 
     type: 'get', 
     url: "test.php", // ajax请求路径 
     data: { 
       id:data.id,
       field:field,
       value:value
     }, 
     success: function(data){ 
       layer.msg('修改成功');
     } 
   });   
  }); 
 });
});
</script>
</body>
</html>

以上这篇layui监听单元格编辑前后交互的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript数组去重小结
Mar 07 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue-router权限控制(简单方式)
Oct 29 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
js实现购物车商品数量加减
Sep 21 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
JavaScript实现显示和隐藏图片
Apr 29 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 #Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 #Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 #Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 #Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 #Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 #Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 #Javascript
You might like
静态的动态续篇之来点XML
2006/12/23 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python tkinter控件布局项目实例
2019/11/04 Python
python:动态路由的Flask程序代码
2019/11/22 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Python如何输出百分比
2020/07/31 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
实习销售业务员自我鉴定
2013/09/21 职场文书
保荐人的岗位职责
2013/11/19 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
道德之星事迹材料
2014/05/03 职场文书
公司租车协议书
2015/01/29 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技