layui table单元格事件修改值的方法


Posted in Javascript onSeptember 24, 2019

事件中的 this相当于document.getElementById("id")

替代方法就是将原本

document.getElementById("id").InnerHTML = "填充代码";

替换成

$("#id").html("填充代码");
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="./layui/css/layui.css" rel="external nofollow" media="all">

</head>
<body>

<div class="form-group col-sm-12">
  <table class="layui-hide" id="jqGrid" lay-filter="jqGridFilter"></table>
  <div id="jqGridPager"></div>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>

<script>
  layui.use('table', function () {
    table = layui.table;
    table.render({
      elem: '#jqGrid'

      , cellMinWidth: 80
      , totalRow: true
      , cols: [[ 
        {type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID', width: 80, sort: true}
        , {field: 'username', title: '姓名', width: 120}
        , {field: 'email', title: '邮件', minWidth: 150}
        , {field: 'sign', title: '签名', minWidth: 160}
        , {field: 'sex', title: '性别', event: 'setSign',width: 80}
        , {field: 'city', title: '城市', width: 100}
        , {field: 'experience', title: '积分', width: 80, sort: true}
      ]]
      , data: [{
        "id": "10001"
        , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10002"
        , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10003"
         , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10004"
        , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10005"
         , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10006"
        , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10007"
         , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10008"
        , "username": "你好"
        , "email": "xianxin@layui.com"
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }]
      , page: true
      , limits: [10, 30, 50, 100],
      response: {
        statusName: 'code' 
        , statusCode: 0 
        , msgName: 'msg' 
        , countName: 'layuiCount' 
        , dataName: 'layuiData' 
      }
      , done: function (res, page, count) {
      
      }
    });
    //排序重新加载
    table.on('sort(jqGridFilter)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
      vm.layerUiSortObj = obj;
    });

    //监听复选框事件
    table.on('checkbox(jqGridFilter)', function (obj) {
      //选中改变颜色
      if (obj.checked == true) {
        obj.tr.css('background-color', '#8FBC8F');
      } else {
        //取消选中恢复白色
        obj.tr.css('background-color', 'white');
      }
    });
    //监听单元格事件
 table.on('tool(jqGridFilter)', function(obj){
  var data = obj.data;
  if(obj.event === 'setSign'){
  
  //this.innerHTML='<div id="aa">这是内容</div>';

  this.className+=data.sign;
  this.style.background = "red";
  
   
  
  };
 });
  });
</script>

</body>
</html>

以上这篇layui table单元格事件修改值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
Javascript Dom元素获取和添加详解
Sep 24 #Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 #Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 #Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 #Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 #Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 #Javascript
JavaScript RegExp 对象用法详解
Sep 24 #Javascript
You might like
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
Laravel实现表单提交
2017/05/07 PHP
javascript 继承实现方法
2009/08/26 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
React实践之Tree组件的使用方法
2017/09/30 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
python简单程序读取串口信息的方法
2015/03/13 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python列表解析配合if else的方法
2018/06/23 Python
浅析Python四种数据类型
2018/09/26 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
用Python实现数据的透视表的方法
2018/11/16 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
求职自荐信范文格式
2013/11/29 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
社区工作者思想汇报
2014/01/13 职场文书
学生手册评语
2014/05/05 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
寒山寺导游词
2015/02/03 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python