zTree節(jié)點文字過多怎么辦

這篇文章主要介紹了zTree節(jié)點文字過多怎么辦，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

zTree setting.view.addDiyDom 方法可以實現(xiàn)自定義控件，指定節(jié)點顯示內容。因此需要自己實現(xiàn)addDiyDom方法。

如果樹節(jié)點不顯示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);
 }
}

如果樹節(jié)點有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, //當鼠標移動到節(jié)點上時，顯示用戶自定義控件 
  removeHoverDom: removeHoverDom, //離開節(jié)點時的操作 
  selectedMulti: false,
  txtSelectedEnable: true,
  showLine: true,
  addDiyDom: addDiyDomWithCheck
 }
}

實現(xiàn)效果如下，超長部分將顯示為省略號...

感謝你能夠認真閱讀完這篇文章，希望小編分享的“zTree節(jié)點文字過多怎么辦”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!