<!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"> <link href="https://www.jb51.net/article/layui/css/layui.css" media="all"> </head> <body> <div> <table lay-filter="jqGridFilter"></table> <div></div> </div> <script src="https://www.jb51.net/article/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>这是内容</div>'; this.className+=data.sign; this.style.background = "red"; }; }); }); </script> </body> </html>
layui table单元格事件修改值的方法
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/7a87217f38da9732fd3d197417d48b6d.html