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

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

如下所示：

<!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监听单元格编辑前后交互的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    最近,在项目中使用到了layer.layer的弹层组件可以说是非常好用,layer 至今仍作为 layui 的代表作.在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互. 其实,官方文档都说的很清楚了. layui官方文档:http://layer.layui.com/ 使用版本:2.3.0 只是,需要我们耐心的读懂文档内容,然后根据自己的业务情况,实现自己想要的效果. 一.子页面获取父页面数据 子

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

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

  • Layui 带多选框表格监听事件以及按钮自动点击写法实例

    不话不多说了,直接上代码吧: <div class="layui-btn-group demoTable" style="margin: 10px;">   <button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button>   <button class="layui

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

    我就废话不多说啦,大家直接看代码就行了! 如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>...</title>

  • Layui数据表格之单元格编辑方式

    开发工具与关键技术:VS.layui数据表格之单元格编辑 layui是我们常用的一个插件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,其中有很多模快,而每个模板又包括很多模板,下面我要讲解的是数据表格中的单元格编辑. 1.在使用layui之前首先确保已经引入了layui的css和js脚本文件. 2.初始化layui模块. layui.use(['table'], function () { //声明一个layuiTable变量作为全局变量.

  • bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    前言 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等. 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化. 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以

  • DevExpress实现GridControl单元格编辑验证的方法

    本文实例演示了DevExpress实现GridControl单元格编辑验证的方法,比较实用的功能,具体方法如下: 主要功能代码如下: /// <summary> /// 自定义单元格验证 /// </summary> /// <param name="view">GridView</param> /// <param name="e">BaseContainerValidateEditorEventArgs

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • layui监听工具栏的实例(操作列表按钮)

    废话不多说,直接上代码吧! <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a> </scr

  • layui switch 开关监听 弹出确定状态转换的例子

    不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"

  • layui监听select变化,以及设置radio选中的方法

    一.select监听 1.首先,要给select加一个layui提供的属性 lay-filter="level" 这里面的level自己定义,下面会用到 2.导入form layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.on('select(level)'),function() { //内容 }); form.render();//注意如果是动态添加的select

  • layui 监听select选择 获取当前select的ID名称方法

    监听select选择 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); 获取自定义属性 data.elem.getAttribute("data-id") 例子:取得ID名称 form.on('select', fu

  • layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

    因为本身layui是有一套自身的监听方式,form.on   当然你是先将select放入<div class="layui-form">中,不然都显示不出select 里面也有监听普通下拉选框选中值发生改变的方式,直接复制即可 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

随机推荐