zTree -- jQuery 树插件

Posted 2020-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zTree -- jQuery 树插件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - noIcon </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">
    <style>
    .select{position:relative;width:228px;}
    .select input{width:218px;padding-left:10px;height:26px;}
    .select span{position:absolute;right:0;top:13px;width:0;height:0;border-width:8px;border-color: #6B4CE6 transparent transparent transparent;border-style:solid;cursor:pointer;}

    </style>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                showLine: false,//不显示连接线
                showIcon: showIconForTree //图标不显示
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick
    }
        };

        var zNodes =[
            { id:1, pId:0, name:"精油疗方", open:true},
                { id:11, pId:1, name:"精油疗方工具"},
                    { id:111, pId:11, name:"精油瓶"},
                    { id:112, pId:11, name:"精油量杯"},
                    { id:113, pId:11, name:"香薰灯"},
                    { id:114, pId:11, name:"皂盒"},
                { id:13, pId:1, name:"单方精油", isParent:true},
            { id:2, pId:0, name:"身体护理"},
                { id:21, pId:2, name:"纤体", open:true},
                    { id:211, pId:21, name:"纤体绷带"},
                    { id:212, pId:21, name:"纤体霜"},
                    { id:213, pId:21, name:"纤体贴"},
                    
                { id:22, pId:2, name:"沐浴露",isParent:true},
                { id:23, pId:2, name:"身体乳",isParent:true},
            { id:3, pId:0, name:"卸妆", isParent:true}
        ];

        function showIconForTree(treeId, treeNode) {
            return !treeNode.isParent;
        };



        function zTreeOnClick(event, treeId, treeNode) {
            if(!treeNode.isParent){
                var selval=$("#sel");
                $(selval).val(treeNode.name);
            }
        };

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>

</HEAD>

<BODY>
<h1>不显示节点图标和线的树</h1>

    <div class="wrapbox" style="margin-left:50px">
        <div class="select">
             <input type="text" id="sel"><span class="close"></span>
        </div>
        <ul id="treeDemo" class="ztree" style="height:120px;margin-top:0;display:none"></ul>
    
    </div>
<script>

$(".select span").click(function(){
    if($(this).hasClass(‘close‘)){$("#treeDemo").slideDown();$(this).removeClass(‘close‘)}
    else{$("#treeDemo").slideUp();$(this).addClass(‘close‘)}
    

})


</script>
</BODY>
</HTML>

zTree -- jQuery 树插件：http://www.treejs.cn/v3/main.php#_zTreeInfo

以上是关于zTree -- jQuery 树插件的主要内容，如果未能解决你的问题，请参考以下文章

zTree -- jQuery 树插件

JQuery Ztree 树插件配置与应用小结