当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称。这样我们应该如何做呢?

首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示:

1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"},
2.{ id:234, pId:23, name:"叶子节点...",title:"叶子节点打工撒干撒嘎斯"},
3.{ id:3, pId:0, name:"父节点3 - 没有子节点",title:"卧槽", isParent:true}

其次需要设置setting内data旗下key的title关键属性对应的属性名称

官方API内是这样解释key内title的:

1.zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
2.如果设置为 "" ,则自动与 setting.data.key.name 保持一致,避免用户反复设置
3.默认值:""

看明白了把,默认情况下会和name属性一致。

为此,我们需要手动设置一下title对应的属性名称,设置代码如下所示:

01.var setting = {
02.data: {
03.simpleData: {
04.enable: true
05.},
06.showTitle:true//是否显示节点title信息提示 默认为true
07.key: {
08.title:"title" //设置title提示信息对应的属性名称 也就是节点相关的某个属性
09.}
10.}
11.};

这样一来,我们就可以达到我们想要的效果了。省略显示节点名称,鼠标移入时显示其节点的全称。效果图如下所示:

转:http://www.stepda.com/topic/?937

转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称的更多相关文章

  1. MFC之树控件

    树控件对应的类: CTreeControl 树控件属性设置: 启用复选框:Check Boxes = True 父节点显示+-按钮:Has Button = True ; Lines At Roots ...

  2. 转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置

    今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...

  3. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  4. 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  5. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  6. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  7. WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单M ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  9. 【转】WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式 ...

随机推荐

  1. C#远程执行Linux系统中Shell命令和SFTP上传文件

    一.工具:SSH.Net 网址:https://github.com/sshnet/SSH.NET 二.调用命令代码: Renci.SshNet.SshClient ssh = "); ss ...

  2. 016-Go Iris Restful测试

    1:data/data.go package data import( "fmt" "database/sql" _"github.com/lib/p ...

  3. CentOS下Crontab安装使用详细说明(转)

    来自:http://www.centoscn.com/CentOS/help/2014/1220/4346.html crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的 ...

  4. Spark分布式集群的搭建和运行

    集群共三台CentOS虚拟机,一个Matser,主机名为master:三个Worker,主机名分别为master.slave03.slave04.前提是Hadoop和Zookeeper已经安装并且开始 ...

  5. Python学习笔记_03:简单操作MongoDB数据库

    目录 1. 插入文档 2. 查询文档 3. 更新文档 4. 删除文档   1. 插入文档 # -*- coding: UTF-8 -*- import datetime from pymongo im ...

  6. js 树结构数据遍历条件判断

    代码: /** * 树结构数据条件过滤 * js 指定删除数组(树结构数据) */ function filter (data, id) { var newData = data.filter(x = ...

  7. vim note write

    Try: :vert sb N which will open a left vertical split (by default, unless you have modified some opt ...

  8. 各个版本VS编译好的GDAL库下载

    简单说明 自己编译GDAL比较繁琐且时间较长,而且很多 Driver 需要自己去编译.如果不是要学习怎么编译GDAL,可以直接使用已经编译好的库. OSGeo官方没有提供编译好的GDAL,但是它有给出 ...

  9. CentOS7 修改主机名

    命令: hostnamectl set-hostname [yourhostname] 不过这种方法,大写会自动变成小写. 还有一种方法,直接修改 /etc/hostname文件,这个可以保证大写不变 ...

  10. Android 蓝牙通信——AndroidBluetoothManager

    转载请说明出处! 作者:kqw攻城狮 出处:个人站 | CSDN To get a Git project into your build: Step 1. Add the JitPack repos ...