欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 20:14:47
ztree setting.view.adddiydom 方法可以实现自定义控件,指定节点显示内容。因此需要自己实现adddiydom方法。 如果树节点不显示chec...

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

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

如果树节点不显示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节点文字过多的处理方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。