zTree变异篇:如何让同级树节点平铺而非垂直显示
昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:
通过在浏览器调试模式下观察其同级节点的css为:
这个display属性就注定了其节点都会像item一样垂直显示的。我们知道了这一点所以问题解决方案就出来了。
解决思路:
1、彻底修改zTree树所配备的zTreeStyle.css文件;
2、打开文件主要修改前第二、三行;
1)、需要给zTree设定一个固定宽度且能够支持超出宽度值自动换行,于是我们修改后的zTree类的样式为:
2)、需要设置节点的display属性为平铺模式
display:inline;这个就是表示平铺模式了的。
具体display属性值的特性请参考下面的表格:
值 |
描述 |
none |
此元素不会被显示。 |
block |
此元素将显示为块级元素,此元素前后会带有换行符。 |
inline |
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block |
行内块元素。(CSS2.1 新增的值) |
list-item |
此元素会作为列表显示。 |
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
compact |
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker |
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group |
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group |
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group |
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row |
此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group |
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column |
此元素会作为一个单元格列显示(类似 <col>) |
table-cell |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption |
此元素会作为一个表格标题显示(类似 <caption>) |
inherit |
规定应该从父元素继承 display 属性的值。 |
通过上面的设置就可以让同级节点平铺显示了的!具体的样式可以自己调整宽度和节点的固定宽度值来加以控制!
zTree变异篇:如何让同级树节点平铺而非垂直显示的更多相关文章
- 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...
- 转:zTree高级入门:如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标(按钮)
当我们在使用ztree树组件的节点编辑功能时,只要我们引入了ztree相关节点编辑的js脚本文件: <script type="text/javascript" src=”/ ...
- 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...
- 使用zTree和json构建简单树节点
我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...
- zTree实现删除树节点
zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...
- ztree异步加载树节点
参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...
- 【zTree】zTree展开树节点
今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...
- 如何自定义修改ztree树节点的图标
1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...
- 【ztree】zTree取消树节点选中的背景色
点击树节点的时候是ztree给树加了个class: curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedN ...
随机推荐
- 局域网内主机ssh访问服务器宿主下VMWare 虚拟机(Ubuntu 12.04.1)并且实现虚拟机能上网的那点事
(1)首先虚拟机已安装ssh服务 1) 自动安装 ssh 服务 apt-get install openssh-server 安装完成后,将自动开启 ssh 服务. 2) 查看 ssh 服务是否已开启 ...
- javac编译时找不到文件的问题和运行项目找不到指定类问题
问题描述: 刚刚安装完JDK,打开Eclipse创建一个新项目,写了一个测试类进行输出打印语句时,报无法找到相应类. 然后,我跑到CMD中进行javac Test.java运行测试时,报找不到对应文件 ...
- Nginx 与Tomcat 实现动静态分离、负载均衡
Nginx 与Tomcat 实现动静态分离.负载均衡 一.Nginx简介: Nginx一个高性能的HTTP和反向代理服务器, 具有很高的稳定性和支持热部署.模块扩展也很容易.当遇到访问的峰值,或者有人 ...
- unity的 Social API
孙广东 2015.12.23 Social API Social API 是訪问的Unity 的point 社会功能.如:• 用户配置文件• 好友列表• 成就• 统计 / 排行榜 它提供了 ...
- eclipse debug模式下总是自动跳到ThreadPoolExecutor.java类
1.情景展示 使用eclipse,debug模式运行项目时,总是会调用这个ThreadPoolExecutor.java类,明明没有打断点却自动停止运行. 2.原因分析 在eclipse中,默认是 ...
- mysql改变字符串的大小写
INITCAP:转换每个字的第一个字符为大写LOWER:转换所有字符为小写UPPER:转换所有字符为人写 eg: LOWER(phone)
- memcache使用方法测试
<?php //php操作memcache的使用测试总结--学习 //1 Memcache::connect; //$memcache = new Memcache; //$memcache-& ...
- 如何在eclipse中创建.properties文件
打开file--new--other 选择general--file--next 选择要建在哪个文件名下,然后在底部的file name后输入properities文件名,finish即可
- c++ remove_if
#include <algorithm> 函数remove_if()移除序列[start, end)中所有应用于谓词p返回true的元素. 此函数返回一个指向被修剪的序列的最后一个元素迭代 ...
- socket.io简介
websocket是一种比较简单的协议,各种语言中都有很多实现版本,实际上它们差别不大,都是在websocket的基础上做些封装,随便选一个即可. socket.io就是众多websocket库中的一 ...