我想改变ztree的外观样式 怎么改啊？？求大神指教。。。。。

ztree bootstrap ztreebootstrap

解决方案 »

  1.   


    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <TITLE> ZTREE DEMO - noLine </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../../css/bootstrap.css" type="text/css"/>
    <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.core-3.5.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
    <SCRIPT type="text/javascript">
    <!--
    var setting = {
    view: {
    showLine: false
    },
    data: {
    simpleData: {
    enable: true
    }
    }
    }; var zNodes =[
    { id:1, pId:0, name:"pNode 1", open:false},
    { id:11, pId:1, name:"pNode 11"},
    { id:111, pId:11, name:"leaf node 111"},
    { id:112, pId:11, name:"leaf node 112"},
    { id:113, pId:11, name:"leaf node 113"},
    { id:114, pId:11, name:"leaf node 114"},
    { id:115, pId:11, name:"leaf node 115"},
    { id:12, pId:1, name:"pNode 12"},
    { id:121, pId:12, name:"leaf node 121"},
    { id:122, pId:12, name:"leaf node 122"},
    { id:123, pId:12, name:"leaf node 123"},
    { id:124, pId:12, name:"leaf node 124"},
    { id:13, pId:1, name:"pNode 13 - no child", isParent:true},
    { id:2, pId:0, name:"pNode 2"},
    { id:21, pId:2, name:"pNode 21", open:true},
    { id:211, pId:21, name:"leaf node 211"},
    { id:212, pId:21, name:"leaf node 212"},
    { id:213, pId:21, name:"leaf node 213"},
    { id:214, pId:21, name:"leaf node 214"},
    { id:22, pId:2, name:"pNode 22"},
    { id:221, pId:22, name:"leaf node 221"},
    { id:222, pId:22, name:"leaf node 222"},
    { id:223, pId:22, name:"leaf node 223"},
    { id:224, pId:22, name:"leaf node 224"},
    { id:23, pId:2, name:"pNode 23"},
    { id:231, pId:23, name:"leaf node 231"},
    { id:232, pId:23, name:"leaf node 232"},
    { id:233, pId:23, name:"leaf node 233"},
    { id:234, pId:23, name:"leaf node 234"},
    { id:3, pId:0, name:"pNode 3 - no child", isParent:true},
    { id:31, pId:3, name:"leaf node 321 - no child"}//isParent:true 在文件名前面加个文件夹图标
    ]; $(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
    </SCRIPT></HEAD><BODY>
    <div class="content_wrap">
    <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
    </div>

    </div>
    </BODY>
    </HTML>这是源码！
      

  2.   

    复制默认的css样式后重新写入自己想要的样式。或者直接在默认的样式上重写。