ztree怎么通过修改css改变字体和图标大小

html-css036

ztree怎么通过修改css改变字体和图标大小,第1张

1、首先在zTreeStyle/img 中添加你想修改样式的图片，下面是处理好的图tree.png片，给大家使用下。

2、在zTree_v3/css/ zTreeStyle/zTreeStyle.css把背景图路径换成自己的图片。

3、最后就是找位置，找到你想用图标的位置。如下面表示当修改不点击时复选框样式。

用z-tree插件

①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{"id":1, "name":"test1", "nodes":[

3.{"id":11, "name":"test11", "nodes":[

4.{"id":111, "name":"test111"}

5."id":12, "name":"test12"}

②带有父子关系的简单

Array

格式

(isSimpleData)的zTreeNodes

举例：

Js代码

1.var treeNodes = [

2. {"id":1, "pId":0, "name":"test1"},

3.{"id":11, "pId":1, "name":"test11"},

4. {"id":12, "pId":1, "name":"test12"},

5. {"id":111, "pId":11, "name":"test111"},

例子：

(Java代码)

①在页面引用

zTree的js和css：

Html代码

1.

<!-- ZTree树形插件 -->

2.<link

rel="stylesheet"

href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type

="text/css">

3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->

4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"

></script>

根据 UI 的出图 来，主要是 内部基本使用的 是 elementUI 的框架，所以设计的样式就与其类似和靠近

主要介绍 js 部分的修改，css 相对要修改比较简单。

在 jquery.ztree.core-3.5.js 文件中进行修改。先了解一下渲染的步骤，以及关键需要修改的地方：

将 ul 的 padding 取消掉

配合 css ：

如果有帮助到你，可以给我一个赞嘛 * !!!