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

 

 

 

 

 点击改变背景颜色

 

 

 

 如果有解决标题过长更好的方法可以告诉我,谢谢

 

posted @ 2022-07-19 20:39  创世星开心的佛手  阅读(1268)  评论(0)    收藏  举报