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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
php5 mysql分页实例代码
2008/04/10 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
微信小程序页面生命周期详解
2018/01/31 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python字典DICT类型合并详解
2017/08/17 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
计算机求职信
2013/12/01 职场文书
高一家长会邀请函
2014/01/12 职场文书
打架检讨书100字
2014/01/19 职场文书
社会公德演讲稿
2014/05/20 职场文书
百日安全生产活动总结
2014/07/05 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫