layui中table监听单元格_layui table单元格事件修改值的方法

事件中的 this相当于document.getElementById("id")

替代方法就是将原本

document.getElementById("id").InnerHTML = "填充代码";

替换成

$("#id").html("填充代码");

layui

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='

这是内容

';

this.className+=data.sign;

this.style.background = "red";

};

});

});

以上这篇layui table单元格事件修改值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持w3xue。