zoukankan      html  css  js  c++  java
  • zTree 节点文字过多处理方法

    zTree setting.view.addDiyDom 方法可以实现自定义控件,指定节点显示内容。因此需要自己实现addDiyDom方法。

    如果树节点不显示checkbox ,处理方法为:

    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
        icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.parent().before(switchObj);
        var spantxt = $("#" + treeNode.tId + "_span").html();
        if (spantxt.length > 19) {
            spantxt = spantxt.substring(0, 29) + "...";
            $("#" + treeNode.tId + "_span").html(spantxt);
        }
    }

    如果树节点有checkbox,处理方法为:

    function addDiyDomWithCheck(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
        checkObj = $("#" + treeNode.tId + "_check"),
        icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        checkObj.remove();
        icoObj.parent().before(switchObj);
        icoObj.parent().before(checkObj);
    
        var spantxt = $("#" + treeNode.tId + "_span").html();
        $("#" + treeNode.tId + "_span").css({"fontSize":13});
        $("#" + treeNode.tId + "_span").attr("data-toggle","tooltip");
        $("#" + treeNode.tId + "_span").attr("data-placement","top");
        if (spantxt.length > 19) {
            spantxt = spantxt.substring(0, 19) + "...";
            $("#" + treeNode.tId + "_span").html(spantxt);
        }
    
    }

    zTree view 相关定义如下:

     //树属性的定义  
     var setting = {  
        //页面上的显示效果  
        view: {  
            addHoverDom: addHoverDom, //当鼠标移动到节点上时,显示用户自定义控件  
            removeHoverDom: removeHoverDom, //离开节点时的操作  
            selectedMulti: false,
            txtSelectedEnable: true,
            showLine: true,
            addDiyDom: addDiyDomWithCheck
        }
    }

    实现效果如下,超长部分将显示为省略号...

  • 相关阅读:
    Git 码云操作
    多线程基础必要知识点!看了学习多线程事半功倍(转)
    Spring技术内幕:设计理念和整体架构概述(转)
    单例模式你会几种写法?(转)
    Linux-看完这篇Linux基本的操作就会了(转)
    每天一个linux命令9之crontab 定时任务
    在linux下给grep命令添加颜色
    springmvc使用StringHttpMessageConverter需要配置编码
    MySQL 中的 base64 函数
    spirng整合rmi
  • 原文地址:https://www.cnblogs.com/mymelody/p/7889104.html
Copyright © 2011-2022 走看看