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.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单元格事件修改值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)