溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用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是一款采用自身模塊規范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發，能夠作為PC網頁端后臺系統與前臺界面的速成開發方案。
以上就是使用layui怎么修改table單元格事件的值，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
