zTree节点文字过多的处理方法

2019/6/27 20:32:52

编程Tag： ztree 节点

本文主要是介绍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
 }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持找一找教程网。

这篇关于zTree节点文字过多的处理方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

zTree节点文字过多的处理方法

相关编程文章