z-tree插件更换父节点的加减图标为小三角

海鸥别叫了~

已于 2023-03-24 11:04:00 修改

阅读量464

点赞数 2

文章标签： javascript css html jquery

于 2023-03-24 10:41:54 首次发布

本文链接：https://blog.csdn.net/qq_45164516/article/details/129745611

版权

z-tree插件更换父节点的加减图标为小三角

1.在项目中引入z-tree树形插件，根据官网给的代码

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.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>

2.要求更换原来的加减图标为小三角：
在setting里配置

  view: {
            showLine: false,//去掉节点之间的线
        },

重要的是zTreeStyle.css,通过伪元素的方式来更换加减图标
直接复制放在zTreeStyle.css最下面，同时要注释掉.ztree li span.button背景图

/*注释掉背景图和原来的加减号图片位置*/
/*.ztree li span.button.noline_open {*/
/*    background-position: -92px -72px*/
/*}*/

/*.ztree li span.button.noline_close {*/
/*    background-position: -74px -72px*/
/*}*/
/*更改最前面的加减号： */
.ztree li a span.ico_open, .ztree li a span.ico_close, .ztree li a span.ico_docu {
               background: none;
           }
.ztree li span.button.noline_open::after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 6px solid #fff;
    content: "";
    margin: 0;
    cursor: pointer;
    display: inline-block;
    position: relative;
    left: 0px;
    top: 6px;
    transform: rotate(90deg);
}

.ztree li span.button.noline_close::after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 6px solid #fff;
    content: "";
    margin: 0;
    cursor: pointer;
    display: inline-block;
    position: relative;
    left: 2px;
    top: 4px;
    transform: rotate(0deg);
}