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 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
Node.js实现断点续传
Jun 23 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
PHP调用三种数据库的方法(1)
2006/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
ajax php 实现写入数据库
2009/09/02 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python定时器实例代码
2017/11/01 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python最小二乘法矩阵
2019/01/02 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python 5个实用的技巧
2020/09/27 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
database面试题
2013/03/28 面试题
四年级数学教学反思
2014/02/02 职场文书
电钳工人个人求职信
2014/05/10 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
公安学专业求职信
2014/07/27 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python