zTree 样式 修改 成 elementui 树 类似样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zTree 样式 修改 成 elementui 树 类似样式相关的知识，希望对你有一定的参考价值。
参考技术A根据 UI 的出图 来，主要是 内部基本使用的 是 elementUI 的框架，所以设计的样式就与其类似和靠近
主要介绍 js 部分的修改，css 相对要修改比较简单。
在 jquery.ztree.core-3.5.js 文件中进行修改。先了解一下渲染的步骤，以及关键需要修改的地方：
将 ul 的 padding 取消掉
配合 css ：
如果有帮助到你，可以给我一个赞嘛 * !!!
zTree 菜单树js控件见习
今天学习一个zTree菜单树的js编写的菜单控件，官网已经提供了完整的演示demo和API文档以及源码的github地址，官方网址
首先从官网的下载地址下载控件，解压后的目录是这样的：
从目录可以看出，给出了完整的demo，以及源码js和样式css文件，api文档页面。
简单入门尝试，其实就是把控件js文件和css样式导出页面中，简单运行一个小demo，偷懒拿了官网的一个演示入门页面代码，将文件导入后运行页面，代码如下：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.all.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = ;
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
name:"test1", open:true, children:[
name:"test1_1", name:"test1_2"],
name:"test2", open:true, children:[
name:"test2_1", name:"test2_2"]
];
$(document).ready(function()
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
);
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>其中js文件路径和css样式文件都是我本地相对路径，导入到项目中一定要对应好
好了运行一下页面展示出来：
很简单的一个小demo，这样就算入门了，接下来就可以根据项目需求自行研究官网api满足我们的开发需求了。
以上是关于zTree 样式 修改 成 elementui 树 类似样式的主要内容，如果未能解决你的问题，请参考以下文章