主页 / 网络编程 /

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

网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇layui table单元格事件修改值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

事件中的 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."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10002"
        , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10003"
         , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10004"
        , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10005"
         , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10006"
        , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10007"
         , "username": "你好"
        , "email": "xianxin@layui."
        , "sex": "男"
        , "city": "西安"
        , "sign": "人生恰似一场修行"
        , "experience": "116"
        , "ip": "192.168.0.8"
        , "logins": "108"
        , "joinTime": "2016-10-14"
      }, {
        "id": "10008"
        , "username": "你好"
        , "email": "xianxin@layui."
        , "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单元格事件修改值的方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：vue.js实现图书管理功能 下一篇：Javascript Dom元素获取和添加详解

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by