layui
layui copied to clipboard
layui
[treeTable] treeTable通过obj.setRowChecked({ type: 'radio' })无法高亮当前行
议题条件
- [x] 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
- [x] 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
- [x] 我已仔细阅读： 🍀 Layui Issue 贡献指南
议题类型
功能请求
使用版本
V2.11.1
问题描述
使用treeTable无法像table一样，通过obj.setRowChecked({ type: 'radio' })选中行后，当前行有高亮显示，详见截图
业务代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-setRowChecked"></table>
<script type="text/html" id="demo-toolbar-setRowChecked">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
</div>
</script>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
<script>
layui.use('treeTable', function () {
var treeTable = layui.treeTable;
// 渲染
treeTable.render({
elem: '#ID-table-demo-setRowChecked',
data: [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"words": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"words": 64928690,
"classify": "词人",
"score": 70.5
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"words": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"words": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"words": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"words": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"words": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"words": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"words": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"words": 86801934,
"classify": "词人",
"score": 75
}
],
cols: [[
{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true },
{ field: 'username', title: '用户', width: 120 },
{ field: 'sex', title: '性别', width: 80 },
{ field: 'city', title: '城市', width: 100 },
{ field: 'sign', title: '签名' },
{ field: 'experience', title: '积分', width: 80, sort: true }
]],
toolbar: '#demo-toolbar-setRowChecked',
initSort: { // 设置初始排序
field: 'experience', // 字段名
type: 'desc' // 倒序
},
height: 366
});
// 行单击事件( 双击事件为: rowDouble )
treeTable.on('row(ID-table-demo-setRowChecked)', function (obj) {
var data = obj.data; // 获取当前行数据
// 显示 - 仅用于演示
layer.msg('当前行数据：<br>' + JSON.stringify(data), {
offset: '65px'
});
// 标注当前点击行的选中状态
obj.setRowChecked({
type: 'radio' // radio 单选模式；checkbox 复选模式
});
});
// 头工具栏事件
treeTable.on('toolbar(ID-table-demo-setRowChecked)', function (obj) {
var checkStatus = treeTable.checkStatus(obj.config.id); //获取选中行状态
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data; // 获取选中行数据
layer.alert(JSON.stringify(data)); // 显示 - 仅用于演示
break;
};
});
});
</script>
</body>
</html>
截图补充
浏览器
最新版本Chrome浏览器
演示地址
No response
友好承诺
- [x] 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。
treeTable 必须有选择框才可以行高亮，目前可以在 cols 选项中设置 {type: 'radio', hide: true} 来规避这个问题。
