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


Posted in Javascript onNovember 24, 2017

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节点文字过多的处理方法

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

Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
js简单倒计时实现代码
Apr 30 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 #Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 #Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 #Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 #Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 #Javascript
vue 文件目录结构详解
Nov 24 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
解决GD中文乱码问题
2007/02/14 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php 数据结构之链表队列
2017/10/17 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
2013/05/15 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
详解python3中的真值测试
2018/08/13 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python实现简单日期工具类
2019/04/24 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
吨的认识教学反思
2014/04/27 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python