关于layui数据表格如何该变单元格颜色的实践
2021/5/22 10:56:39
本文主要是介绍关于layui数据表格如何该变单元格颜色的实践，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
这学期大作业要求一个用户管理模块，现有一个需求要求我们能够通过颜色区分用户的状态
-
最终实现效果
-
解决过程
一开始看很多CSDN的老哥使用的是success回调函数进行处理，但是可能是我太菜了，整了半天没整明白，最后通过阅读layui官方文档，意外发现贤心大佬的一段话:
短短几句话貌似正好解决了我们的需求，最后看到官方演示力度示例:
再看源代码
贤心大佬在这使用的是layui使用的是layui的模板引擎laytpl，相当神奇且强大，那么要实现我们的功能，我们只需要在我们的表格字段属性里添加templet属性：
再去写模板代码就ok了:
这段代码可以写在任意位置，我就把它写在了原本lauyi js声明下,另附页面源码与各位共同学习:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户姓名</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户性别</label>
<div class="layui-input-inline">
<input type="text" name="sex" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户城市</label>
<div class="layui-input-inline">
<input type="text" name="city" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户职业</label>
<div class="layui-input-inline">
<input type="text" name="classify" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-module/layuitable/DataTableExtend.js}"></script>
<script>
layui.use(['form', 'table','jquery'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '/user/getUserlist',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[
{type: 'checkbox', fixed: 'left'}
, {field: 'userId', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
, {field: 'userName', title: '用户名', width: 120, edit: 'text'}
, {field: 'userAge', title: '用户年龄', width: 120}
, {field: 'userMail', title: '用户邮箱', width: 150}
, {field: 'userPhone', title: '用户手机号', width: 150}
, {field: 'userStatus', title: '用户状态', width: 120, templet: '#titleTpl'}
, {field: 'userSex', title: '用户性别', width: 120}
, {fixed: 'right', title: '操作', toolbar: '#currentTableBar', width: 150}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done: function (res, curr, count) {
for (var i; i < res.data.length; i++) { //遍历整个表格数据
var item = res.data[i]; //获取当前行数据
if (item.userStatus.value() === '正常') {
$("tr[data-index='" + i + "']").attr({"style": "background:#99ff99"}); //将当前行变成绿色
}
}
}}
)
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
layer.alert(result, {
title: '最终的搜索信息'
});
//执行搜索重载
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
searchParams: result
}
}, 'data');
return false;
});
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
// if (obj.event === 'add') { // 监听添加操作
// var index = layer.open({
// title: '添加用户',
// type: 2,
// shade: 0.2,
// maxmin:true,
// shadeClose: true,
// area: ['100%', '100%'],
// content: '../page/table/add.html',
// });
// $(window).on("resize", function () {
// layer.full(index);
// });
// } else if (obj.event === 'delete') { // 监听删除操作
// var checkStatus = userlist.checkStatus('currentTableId')
// , data = checkStatus.data;
// layer.alert(JSON.stringify(data));
// }
var checkStatus = table.checkStatus("currentTableId");
switch(obj.event) {
case 'delete':
var data = checkStatus.data;
//根据id删除数据
if (data.length > 0) {
layer.confirm('确定删除吗?', function (index) {
var params = [];
for(var i=0; i<checkStatus.data.length; i++){
params[i] = data[i].userId;
}
$.ajax({
url:'/user/delete',
data:{params:params},
method: 'post',
dataType:'json',
success:function (result) {
if (result.status) {
table.reload('currentTableId', {});
} else {
alert(result.message);
}
layer.close(index);
}
})
// for(var i=0; i<checkStatus.data.length; i++){
// params += checkStatus.data[i].userId;
//
// }
// $.ajax({
// url:'/user/delete',
// data:params,
// method:'post',
// success: function (result) {
// if (result.status) {
// table.reload('test', {});
// } else {
// alert(result.message);
// }
// layer.close(index);
// }
});
}
break;
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
// var data = obj.data;
// if (obj.event === 'edit') {
//
// var index = layer.open({
// title: '编辑用户',
// type: 2,
// shade: 0.2,
// maxmin:true,
// shadeClose: true,
// area: ['100%', '100%'],
// content: '../page/table/edit.html',
// });
// $(window).on("resize", function () {
// layer.full(index);
// });
// return false;
// } else if (obj.event === 'delete') {
// layer.confirm('真的删除行么', function (index) {
// obj.del();
// layer.close(index);
// });
// }
// });
//监听复选框
var checkStatus = table.checkStatus("currentTableId");
var data = checkStatus.data;
//console.log(obj)
if(obj.event === 'delete'){
if(checkStatus.data.length !== 1){
alert("请选择一行数据")
}else{
layer.confirm('真的删除行么', function(index){
var params = [];
for(var i=0; i<checkStatus.data.length; i++){
params[i] = data[i].userId;
}
$.ajax({
url:'/user/delete',
data:{params:params},
method: 'post',
dataType:'json',
success:function (result) {
if (result.status) {
table.reload('currentTableId', {});
} else {
alert(result.message);
}
layer.close(index);
}
})
});
}
} else if(obj.event === 'edit'){
if(checkStatus.data.length !== 1){
alert("请选择一行数据")
}else{
var param = data[0].userId;
window.location = "userEdit?id="+param;
}
}
});
});
</script>
<script type="text/html" id="titleTpl">
{{# if(d.userStatus == '正常'){ }}
<span style="color: #F581B1;">{{ d.userStatus }}</span>
{{# } else { }}
<span style="color: #33ffcc;">{{ d.userStatus }}</span>
{{# } }}
</script>
</body>
</html>
这篇关于关于layui数据表格如何该变单元格颜色的实践的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
