前段时间项目中需要用树形结构,在选取的时候参考了很多插件,经过很多尝试,最后又回归到了ztree上。以前用的界面框架是EasyUI,但是它的树结构在实现起来有点复杂,并且功能不是特别完善。dtree在做demo的时候没什么问题,但是放到项目中,从数据库读取数据后还需要进行转换……码了n个demo后,还是觉得ztree最好用!

1.ztree图标

ztree功能强大,使用方便是一方面,但是若使用它自带的图标,在有些网页设计中就不太搭调了,或者还会出现样式冲突,使得图标显示凌乱的问题(在使用Bootstrap框架的时候,根节点的图标会变形)。如果我们能自定义它的图标,根据网页风格来设定样式,这样就会让我们的页面看起来更加美观了。我们先看一张,使用ztree原生态图标的树形结构。

在这棵树中,一共有3种图标,分别是“打开节点、关闭节点、叶子节点”三种类型的,它们都在ztree的css样式中进行了定义。

2.分析ztree图标的定义

从官网上可下载ztree文件 http://www.ztree.me/v3/main.php

它的样式定义在metro.css文件里(或者是zTreeStyle.css……),其中可加载单个的图片,也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png,在图片中每个小方格是5px,在css中加载时按照横纵坐标进行图标的获取。 

在ztree中,css主要用了两种方式来加载图标。第一种:根据背景图,图标大小,和坐标位置

第二种:直接加载图片

这两种方式,第二种比较常用,但是对于数据量大的情况,第一种方法貌似更好。对于我们想要修改的元素,可以先在网页中定位一下,找到它具体的class,然后来这里更改就可以了。

3.Bootstrap风格装饰ztree

以最近很流行的Bootstrap为例,给ztree装饰成Bootstrap的风格。上边我们已经分析过ztree是如何设定样式,这里我们只需要任选其一做更改就行了,鉴于它使用了大量以背景图片为基础的图标设定,我们最好还是设定成直接加载图片的比较方便,要不然改的数据太多了……
1)ztree也有黑白色的css、png成套的样式设置,为了更符合Bootstrap的图标样式,让它替换掉原有的css文件和彩色图标

如果页面框架是Bootstrap的,则在显示的时候根节点的图标是“破碎”的,经过查找发现,是根节点图标位置受到Bootstrap的影响,在css文件中找到设置它的位置,进行坐标更改

2)上边的步骤只能算是在ztree内部设定,还不算加上Boostrap的风格。不过,我们只需要再给它更换一个图标,看起来就有那么点味道了(为了展示方便,进行了换行处理)

/*.ztree li span.button.ico_docu{margin-right:2px; background-position: -147px -42px; vertical-align:top; *vertical-align:middle}*/

/*加载bootstrap的图标,使用它的叶子图标-2015-12-23*/
.ztree li span.button.ico_docu{
margin-right:2px;
background:url(./img/bootstrap.png) no-repeat scroll 0 0 transparent;
vertical-align:top;
background-position: -45px -117px;
vertical-align:top;
*vertical-align:middle
}

这样就是另一种风格了,如果你想要自定义其它风格,根据上边的demo来做,应该不算什么难事了。

小结:

ztree中有自定义图标的方法,但是在遇到图标显示不完整的时候还是没办法解决,最后更改了css文件才让图标显示完整。在解决这个问题的过程中了解了ztree图标的加载过程,所有顺便练练手,直接从CSS来给ztree换了个风格。

【ztree系列——图标的修改】Bootstrap风格的ztree的更多相关文章

  1. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  2. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  3. Netty4.x中文教程系列(六) 从头开始Bootstrap

    Netty4.x中文教程系列(六) 从头开始Bootstrap 其实自从中文教程系列(五)一直不知道自己到底想些什么.加上忙着工作上出现了一些问题.本来想就这么放弃维护了.没想到有朋友和我说百度搜索推 ...

  4. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  5. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  6. 【转】【WPF】 WPF 调用API修改窗体风格实现真正的无边框窗体

    WPF中设置无边框窗体似乎是要将WindowStyle设置为None,AllowTransparency=true,这样才能达到WinForm中无边框窗体的样式.但是AllowTransparency ...

  7. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  8. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  9. jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件

    一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...

随机推荐

  1. git放弃本地commit,未push

    如果不小心commit了一个不应该commit的修改,但是还没有push,想撤销那个commit. 步骤: a) git log:获取commit id: b) git reset --hard co ...

  2. 取Session数据语句在应放在哪里

    UsersModel loginUser = (UsersModel)Session["usersModel"]; 直接放在 public partial class PagesF ...

  3. maven的项目管理方面细节

    1.1    Maven 1.依赖管理.jar包.工程之间的依赖. 2.项目构建.实现项目的一步构建. 3.工程聚合.工程继承.工程依赖. 1.2    Maven的工程类型: 1.war包工程 2. ...

  4. ios iphone ipad上iframe的宽度会扩大的解决办法

    这个问题,我从网上查了下,好像是属于ios的bug,android,windows都没有问题. 解决办法,就是在iframe加载完成后,设置 iframe里面body的宽度为多少PX. $(" ...

  5. sqlserver中case when then用法

    sql语句判断方法之一,Case具有两种格式,简单Case函数和Case搜索函数. --简单Case函数 (CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' E ...

  6. hdu 5170(数学)

    GTY's math problem Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  7. [DB2]Linux下安装db2 v9.7

    https://www.cnblogs.com/cancer-sun/p/5168728.html

  8. 常用的WebService一览表

    天气预报Web服务,数据来源于中国气象局Endpoint :http://www.webxml.com.cn/WebServices/WeatherWebService.asmxDisco       ...

  9. 从dao层查出的数据到页面时数值都是零的异常

    异常问题: IllegalArgumentException: argument type mismatch at cn.tedu.utils.BeanListHandler.handle(BeanL ...

  10. Rescue The Princess

    Description Several days ago, a beast caught a beautiful princess and the princess was put in prison ...