当前位置:首页 > 日记 > 正文

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

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

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

相关文章

excel折线图坐标改变刻度的教程exc

excel折线图坐标改变刻度的教程exc

折线图,教程,刻度,坐标,电脑软件,  Excel中经常需要使用到改变折线图刻度的技巧,折线图坐标具体该如何改变刻度呢?下面是由小编分享的excel折线图坐标改变刻度的教程,以供大家阅读和学习。excel折线图坐标改变刻度的教程改变刻度步骤1:下面…

excel2007怎么只复制筛选部分excel

excel2007怎么只复制筛选部分excel

筛选,方法,电脑软件,strong,  很多时候我们只需要从数据表里筛选部分数据,然后用于其他表格里面,但是有时候设置不对,导致粘贴过去的时候,不仅出现了筛选部分,其他部分数据也出现了,怎么办,下面小编教你如何只复制筛选部分的方法。希望对你有帮…

简单谈谈js的数据类型

简单谈谈js的数据类型

数据类型,简单,电脑软件,js,近期做一些项目的时候发现,自己的js基础还是不够扎实,再看一遍犀牛书,加深自己的理解和印象。所以从这篇文章开始,后面都是关于原生js的一些内容。这篇文章,我们具体介绍一下js的数据类型其中一种。一、javaScript(以…

详解vue 中使用 AJAX获取数据的方

详解vue 中使用 AJAX获取数据的方

方法,获取数据,详解,电脑软件,AJAX,在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。看下例:<script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, …

JavaScript 函数的定义-调用、注意

JavaScript 函数的定义-调用、注意

调用,函数,注意事项,定义,电脑软件,函数定义函数语句定义function(a,b){ return a+b; }表达式定义var add = function(a,b){return a+b};//函数表达式可以包含名称,这在递归时很有用 var f = function fact(x){ if(x<=1) {return 1; }else {…

excel 公式数值化的图文教程详解

excel 公式数值化的图文教程详解

图文教程,方法,数值,公式,详解,  Excel中怎么把公式给数值化呢?excel表格中遇到大量数据要整理的时候,很多人会选择运用公式来处理,这时候我们就要将公式数值化,本文介绍了excel 公式数值化的方法,希望阅读过后对你有所启发!excel 公式数值化…

浅谈Javascript事件对象

浅谈Javascript事件对象

事件对象,浅谈,电脑软件,Javascript,如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象。document.onclick = function() { alert(arguments.length); //1}因为arguments[0]这样使用这个参数比较麻烦,所以我们可…

微信小程序微信支付接入开发实例详

微信小程序微信支付接入开发实例详

微信支付,详解,实例,程序,电脑软件,本文主要讲述微信小程序接入微信支付开发过程中遇到的坑,分为两大块,小程序端和后台接口封装。本文主要内容如下:一、后台接口封装;二、小程序端整合;三、总结一、后台接口封装本文介绍基于ThinkPHP5进行接口…

Excel中表格进行设置分页预览的操

Excel中表格进行设置分页预览的操

设置,分页,操作技巧,表格,操作步骤,  Excel中如何进行分页预览,跟着一步步操作吧。今天,小编就教大家在Excel中表格进行设置分页预览的操作技巧。希望对你有帮助!Excel中表格进行设置分页预览的操作步骤如何设置成分页预览分页预览方式一:打…

怎么查看好友是否换QQ号?

怎么查看好友是否换QQ号?

好友,电脑软件,QQ,  今天小编打开QQ,发现有好多没见过的QQ好友灰色的躺在列表里,跟他们聊天他们也不回复,为了不让它影响我以后加好友,我只能删除它了,下面小编分享怎么查看好友是否换QQ号?的方法,欢迎大家前来阅读怎么查看好友是否换QQ号?  …

wps文字技巧怎么放大缩小工作表格

wps文字技巧怎么放大缩小工作表格

放大缩小,文字,方法,表格,工作,  放大和缩小excel表主要是方便我们预览,其实放大和缩小excel表有好几种方法,那么具体要怎么做呢?接下来下面小编告诉你wps放大缩小工作表格的方法,欢迎大家来到学习。wps放大缩小工作表格的方法wps放大缩小工…

word打开文件转换怎么样控制文件还

word打开文件转换怎么样控制文件还

控制文件,样式,文件转换,库中,电脑软件,  用户需要启用&ldquo;打开时确认文件格式转换&rdquo;功能,以在打开并恢复文件时出现文件格式转换对话框,从而更灵活地控制文件格式转换过程。以下是小编为您带来的关于word打开文件转换控制文件还原…