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 相关文章推荐
js实现小窗口拖拽效果
Dec 03 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
js+html制作简单验证码
Feb 16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
Element PageHeader页头的使用方法
Jul 26 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生成缩略图的类代码
2008/10/02 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
webpack打包js的方法
2018/03/12 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
微信小程序实现日历签到
2020/09/21 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
PHP面试题大全
2015/10/16 面试题
优秀员工自荐信范文
2013/10/05 职场文书
信息管理专业推荐信
2013/10/29 职场文书
租房协议书怎么写
2014/04/10 职场文书
公司节能减排方案
2014/05/16 职场文书
小学母亲节活动总结
2015/02/10 职场文书
资料员岗位职责
2015/02/10 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书