如何给ztree树叶子节点添加多个不同icon

最近项目的树要添加不同的icons,我百度了查了,没找到具体怎么写的,就自己看了Api文档,根据Api文档的例子改改,发现Api文档是父节点都加了button,就各种摸索,皇天不负有心人,终于弄出来了。

   //树上显示三种不同的icon(安防、车辆、人员)
    function textDom(treeId, treeNode){
        var aObj = $("#" + treeNode.tId + "_a");
        if ($("#diyBtn_"+treeNode.id).length>0) return;
        var childrens=treeNode.children;
        if(childrens){
            return;
        }else{
        //treeNode.icon获取到后台数据的icons(我这个icons是一个字符串里放了三个图片的URL)
            if(treeNode.icons){
            var arrys=treeNode.icons.split(','); //将字符串转换数组
            if(arrys.length>0){
                var editStr='';
                editStr += "<span id='diyBtn_space_" +treeNode.tId+ "' >";
                for(var i=0; i<arrys.length-1;i++){ //由于后台传的字符串里的URL后面多个逗号转换数组后多了一个空元素,所以减1(例如:icons:"url,url,")
                    editStr+="<img src="+arrys[i]+" style='vertical-align: text-bottom;' alt=''/>";         
                };
                editStr+="</span>";
                aObj.append(editStr);
            }
        }
        }
        
    };

  var setting = me.setting = {
        data: {
            key: {
                name: "text"
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: 'root'
            }
        },
        async: {
            enable: true,
            type: 'post',
            url: ' ',
            autoParam: ["id"]
        },
        callback: {
            //绑定事件
        },
        view: {
            fontCss: getFont,
            showTitle: false,
            selectedMulti: false,
            expandSpeed: "",
            showLine:false,
            addDiyDom : textDom
        }
    };

效果图:


QQ图片20181222150540.png

由于项目传过来的数据都是一个icons,相互学习,仅供参考,转载请注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容