Layui树形组件标题过长显示Title+点击改变背景颜色
今天在使用Layui树形组件的时候遇到了文字太长,div宽度不够,网上也没有找到合适的方法,查了一下源码也不会改,最后在想到在文字外面加一层span标签来显示
html
<div> <input type="hidden" id="tree_id" /> <div id="test13" class="demo-tree-more"></div> </div>
js
layui.use(['tree', 'util'], function () { var tree = layui.tree , layer = layui.layer , util = layui.util //模拟数据2 , data = [{ title: '<span title="早餐">早餐</span>' , id: 1 , children: [{ title: '油条' , id: 5 }, { title: '包子' , id: 6 }, { title: '豆浆' , id: 7 }] }, { title: '午餐' , id: 2 , checked: true , children: [{ title: '藜蒿炒腊肉' , id: 8 }, { title: '西湖醋鱼' , id: 9 }, { title: '小白菜' , id: 10 }, { title: '海带排骨汤' , id: 11 }] }, { title: '晚餐' , id: 3 , children: [{ title: '红烧肉' , id: 12 , fixed: true }, { title: '番茄炒蛋' , id: 13 }] }, { title: '夜宵' , id: 4 , children: [{ title: '小龙虾' , id: 14 , checked: true }, { title: '香辣蟹' , id: 15 , disabled: true }, { title: '烤鱿鱼' , id: 16 }] }]; //基本演示 tree.render({ elem: '#test13' , data: data , showCheckbox: true //是否显示复选框 , id: 'demoId1' , isJump: true //是否允许点击节点时弹出新窗口跳转 , click: function (obj) {//点击改变背景颜色 var currTreeId = obj.data.id; //当前点击的树节点 var beforeTreeId = $('#tree_id').val(); //上一次点击的树节点id //对比前后id,不相同时移除上一个节点的样式,并设置当前点击的节点样式 if (currTreeId != beforeTreeId) { $('div [data-id="' + currTreeId + '"] div').eq(0).last().css('background-color', '#EEEEEE'); $('div [data-id="' + beforeTreeId + '"] div').eq(0).last().css('background-color', ''); $('#tree_id').val(obj.data.id); } var data = obj.data; //获取当前点击的节点数据 layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data)); } , operate: function (obj) { console.log(obj); //return ('<span class="custom-tree-node"><span title={node.label}>{node.label}</span></span>'); }, }); });
标题过长显示Title
点击改变背景颜色
如果有解决标题过长更好的方法可以告诉我,谢谢