zTree节点文字过多的处理方法
程序员文章站
2022-07-06 20:14:47
ztree setting.view.adddiydom 方法可以实现自定义控件,指定节点显示内容。因此需要自己实现adddiydom方法。
如果树节点不显示chec...
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 } }
实现效果如下,超长部分将显示为省略号...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。