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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
vue-router 学习快速入门
Mar 01 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 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
建立动态的WML站点(一)
2006/10/09 PHP
Banner程序
2006/10/09 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
sina的lightbox效果。
2007/01/09 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
node使用request请求的方法
2019/12/20 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python入门学习指南分享
2018/04/11 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
Python中如何定义一个函数
2016/09/06 面试题
前台接待员岗位职责
2014/01/02 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python