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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
vuejs如何配置less
Apr 25 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
详解JSON.stringify()的5个秘密特性
May 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
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP 微信支付类 demo
2015/11/30 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
使用python实现rsa算法代码
2016/02/17 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
高中自我评价范文
2014/01/27 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
诚实守信主题班会
2015/08/13 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript