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
    }
}

實現效果如下，超長部分將顯示為省略號...