使用过layUI的小伙伴应该有同感,layUI的表格插件,非常实用,还可以进行行列锁定。项目中遇到一种情况是行根据数据去变色,因为项目是比较古老的ssh项目,查了下文档中发现并没有解决办法,遂手写jq指定行变色,这样子。
不多说,直接上码!
<!DOCTYPE html>
<html>
<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 href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test"></table>
<button class="btn btn-success" id="submit_btn">已选择</button>
<button class="btn btn-warning" id="change_color">变色</button>
<table lay-filter="tb2">
<thead>
<tr>
<th lay-data="{field:'index', type:'checkbox'}"></th>
<th lay-data="{field:'username'}">Name</th>
<th lay-data="{field:'sex'}">Sex</th>
<th lay-data="{field:'age'}">Age</th>
<th lay-data="{field:'address'}">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>张三</td>
<td>男</td>
<td>21</td>
<td>湖南</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td>男</td>
<td>28</td>
<td>河北</td>
</tr>
<tr>
<td></td>
<td>王武</td>
<td>男</td>
<td>40</td>
<td>山东</td>
</tr>
<tr>
<td></td>
<td>赵六</td>
<td>男</td>
<td>88</td>
<td>西藏</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//静态初始化
table.init('tb2', {
width: 500,
height: 200,
limit : 10
});
});
//001.jq拼接选中复选框索引
$('#submit_btn').click(function(){
var index = '';
//i为索引,obj为当前循环对象
$("input[name='layTableCheckbox']").each(function(i,obj){
if($(this).is(':checked')){
index += i + ",";
}
});
alert("已选:" + index);
});
//002.行变色
//其中有一个属性 data-index="0"就是当前
$('#change_color').click(function(){
$("input[name='layTableCheckbox']").each(function(i,obj){
if($(this).is(':checked')){
$("tr[data-index='" + (i - 1) + "']").attr({"style":"background:#5FB878"}); //被选中的行变色
}else{
$("tr[data-index='" + (i - 1) + "']").attr({"style":"background:#fff"}); //其他的置成白色
}
});
});
</script>
</body>
</html>
简单粗暴的方法是了!直接F12打开控制台,然后用jq选择器选中。
记个笔记,以防用到~