当前位置： 移动技术网 > IT编程>开发语言>JavaScript > zTree节点文字过多的处理方法

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

2017年12月08日  | 移动技术网IT编程  | 我要评论

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网