zTree節點文字過多的處理方法

2019-11-19 14:52:03

字體：大中小

來源：轉載

供稿：網友

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

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