转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称...

最新推荐文章于 2022-10-25 15:27:59 发布

weixin_34150830

最新推荐文章于 2022-10-25 15:27:59 发布

阅读量377

点赞数

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

首先，我们要在树的节点内多增加一个属性用于设置该节点的全称，这里我们以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. 
    };