联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
ztree树插件
类型:迅睿CMS 更新时间:2023-04-07 21:52:56

1、将\dayrui\Core\Views\index.html文件拷贝到\dayrui\My\View目录下,不拷贝直接在\dayrui\Core\Views\index.html上修改也可以

2、将ztree树插件拷贝到网站的static\assets目录下面 (没有该插件可联系本人QQ175140297发你。)

3、按照我下面发布的代码进行修改,由于改动比较多,觉得麻烦的人可联系上面的QQ直接要模板文件。

{template "head.html"}
<!--本文件有6处修改地方,比较麻烦一点-->
<!--第1: 将zTree拷贝到网站的assets目录 -->
<link rel="stylesheet" href="{THEME_PATH}assets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="{THEME_PATH}assets/ztree/js/jquery.ztree.core.js"></script> 
<script language="javascript">
	var previous_id=0;  //记录上一次所点栏目id,第一次默认为0
	var link_id; 
</script> 
<!--第2:读取栏目信息-->
<?php
$category_list=\Phpcmf\Service::M()->table(SITE_ID.'_share_category')->where('tid=1')->order_by('displayorder,id')->getAll();
?>
<!--读取结束-->

<body scroll="no" style="overflow: hidden;" class="page-sidebar-closed-hide-logo page-content-white page-header-fixed page-sidebar-fixed ">
<style>.page-content {padding:0px !important;} </style>
<div class="page-header navbar navbar-fixed-top">
    <div class="page-header-inner ">
        <div class="page-logo">
            <a href="{SITE_URL}" target="_block"><img src="{THEME_PATH}assets/logo.png" alt="logo" class="logo-default" /> </a>
        </div>
        <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
            <span></span>
        </a>
        <div class="top-menu my-top-left pull-left">
            <ul class="nav navbar-nav pull-left fc-all-menu-top ">
            
                {loop $top $t}
                <li id="dr_menu_top_{$t.id}" class="dropdown {if $t.id==$first}open{/if}">
                 <!--第3: 这里的新闻就是导航的名称,如果你的导航是其它名字,则把它改一下-->
                 {if $t.name=='新闻'}
       				<script language="javascript">
	   	 			link_id={$t.link_id};
         			function onClick(event, treeId, treeNode, clickFlag) {
						Mlink('{$t.id}', '{$t.left_id}','{$t.link_id}', '{dr_url("news/home/index")}&catid='+treeNode.id);
		 			}
					</script>	
                {/if}
                <!--结束-->
                    <a class="dropdown-toggle popovers" data-container="body" data-trigger="hover" data-placement="bottom" data-content="{dr_lang($t.name)}"  href="javascript:Mlink('{$t.id}', '{$t.left_id}', '{$t.link_id}', '{$t.url}');">
                        <i class="{$t.icon}"></i>
                        <br>
                        <i class="top-txt-menu">{dr_lang($t.name)}</i>
                    </a>
                </li>
                {/loop}
            </ul>
        </div>
        <div class="top-menu my-top-right">
            <ul class="nav navbar-nav pull-right">
                {if $is_mobile}
                <li class="dropdown fc-mini-menu-top">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="fa fa-bars"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-default fc_mini_menu_top">
                        {loop $top $t}
                        <li>
                            <a id="dr_mini_menu_top_{$t.id}" class="dr_mini_menu_top {if $t.id==$first}open{/if}" href="javascript:Mlink('{$t.id}', '{$t.left_id}', '{$t.link_id}', '{$t.url}');">
                                <i class="{$t.icon}"></i> {dr_lang($t.name)}
                            </a>
                        </li>
                        {/loop}
                    </ul>
                </li>
                {$mstring}
                {/if}
                {if count($ci->site_info) > 1}
                <li class="dropdown dropdown-extended dropdown-tasks">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="fa fa-share-alt"></i>
                        <span class="badge badge-default"> {count($ci->site_info)} </span>
                        <br>
                        <i class="top-txt-menu">{dr_lang('多站')}</i>
                    </a>
                    <ul class="dropdown-menu extended tasks">
                        <li>
                            <ul class="dropdown-menu-list scroller" style="height:300px;" data-handle-color="#637283">
                                {loop $ci->site_info $i $t}
                                {if \Phpcmf\Service::M('auth')->_check_site($i)}
                                <li>
                                    <a href="javascript:;" onClick="dr_select_site('{$i}')" title="{$t.SITE_NAME}" {if SITE_ID == $i}style="color:red"{/if}>
                                    <span class="task">
                                            <span class="desc"> {dr_strcut($t.SITE_NAME, 30)} </span>
                                        </span>
                                    </a>
                                </li>
                                {/if}
                                {/loop}
                            </ul>
                        </li>
                    </ul>
                </li>
                {/if}
                    {if $is_mobile}
                <li class="dropdown">
                    <a href="javascript:;"  class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="fa fa-wrench"></i>
                        <br>
                        <i class="top-txt-menu">{dr_lang('账号')}</i>
                    </a>
                    {else}
                <li class="dropdown dropdown-user">
                    <a style="margin-right: -10px;height: 70px;" href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <img alt="{$admin['username']}" class="img-circle" src="{dr_avatar($admin.uid)}" />
                        <span style="padding-top: 10px;" class="username username-hide-on-mobile"> {dr_strcut($admin['username'], 8)} </span>
                        <i class="fa fa-angle-down"></i>
                    </a>
                    {/if}
                    <ul class="dropdown-menu dropdown-menu-default">
                        <li><a href="{dr_url('api/alogin', ['id'=>$admin.uid])}" target="_blank"><i class="fa fa-user"></i> {dr_lang('用户中心')} </a></li>
                        <li><a href="{dr_url('api/my')}" target="right"><i class="fa fa-edit"></i> {dr_lang('修改资料')} </a></li>
                        <li><a href="javascript:;" onClick="dr_logout('{dr_url('login/out')}');"><i class="fa fa-user-times"></i> {dr_lang('退出系统')}</a></li>
                        <li class="divider"> </li>
                        {if $ci->_is_admin_auth('cache/index')}
                        <li><a href="{dr_url('cache/index')}" target="right"><i class="fa fa-cogs"></i> {dr_lang('系统更新')}</a></li>
                        {/if}
                        {if $ci->_is_admin_auth('check/index')}
                        <li><a href="{dr_url('check/index')}" target="right"><i class="fa fa-wrench"></i> {dr_lang('系统体检')}</a></li>
                        {/if}
                        <li><a href="javascript:dr_update_cache_all();" target="right"><i class="fa fa-refresh"></i> {dr_lang('更新缓存')}</a></li>
                        <li><a href="javascript:dr_update_cache_data();" target="right"><i class="fa fa-trash"></i> {dr_lang('更新数据')}</a></li>
                        {if $admin.adminid==1}
                        <li class="divider"> </li>
                        <li><a href="{dr_url('error_php/index')}" target="right"><i class="fa fa-bug"></i> {dr_lang('PHP错误')}</a></li>
                        <li><a href="{dr_url('error/index')}" target="right"><i class="fa fa-shield"></i> {dr_lang('系统错误')}</a></li>
                        <li><a href="{dr_url('content/index', ['p'=>1, 'page'=>1])}" target="right"><i class="fa fa-code"></i> {dr_lang('执行SQL')}</a></li>
                        {/if}
						{if $is_search_help}
                        <li><a href="http://help.xunruicms.com" target="_blank"><i class="fa fa-book"></i> {dr_lang('帮助手册')}</a></li>
                        {/if}
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="clearfix"> </div>

<div class="page-container">
    <div class="page-sidebar-wrapper" id="bbbb">

        <div class="page-sidebar navbar-collapse collapse">
        <!--第4: 树型导航开始-->
        <div id="divtree" style="overflow: auto; display:none; padding-bottom:6px; background-color:#FFF; border-right-style:solid; border-right-width:1px; border-right-color:#CCC">
        <ul id="treecategory" class="ztree" ></ul>
        </div>
        <SCRIPT type="text/javascript">
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: onClick
			}
		};
		var zNodes =[
		{ id:0, pId:-1, name:"全部栏目",open:true},
		{loop $category_list $t}
		{ id:{$t.id}, pId:{$t.pid}, name:"{$t.name}"},
		{/loop}
		];
		var zTree;
		$(document).ready(function(){
			zTree = $.fn.zTree.init($("#treecategory"), setting, zNodes);
			//
			$("#divtree").css("height", $(".page-container").height());//通过设置CSS属性来设置元素的高,使左侧栏目导航的高度与屏幕同高
		});
		</SCRIPT>
        <!--树型导航结束-->
        
            <ul class="page-sidebar-menu  page-header-fixed  page-sidebar-menu-light" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
                <li class="sidebar-toggler-wrapper hide">
                    <div class="sidebar-toggler">
                        <span></span>
                    </div>
                </li>

                <li class="sidebar-search-wrapper hidden-xs hidden-sm">
                    <form class="sidebar-search" id="mysearchform">
                        <a href="javascript:;" class="remove">
                            <i class="fa fa-close"></i>
                        </a>
                        <div class="input-group">
							{if $is_search_help}
                            <input type="text" id="mysearchform_kw" class="form-control" placeholder="{dr_lang('搜索帮助...')}">
                            <span class="input-group-btn">
                                <a href="javascript:;" class="btn submit">
                                    <i class="fa fa-search"></i>
                                </a>
                            </span>
							{/if}
                        </div>
                    </form>
                </li>

                {$string}

            </ul>
        </div>
    </div>
    <div class="page-content-wrapper">
        <div class="page-content index-content">

            <div class="theme-panel hidden-xs hidden-sm">
                <div class="toggler"> </div>
                <div class="toggler-close"> </div>
                <div class="theme-options" style="">
                    <div class="theme-option" style="text-align: center;    margin-top: 30px;">
                        <button type="button" onClick="dr_add_menu()" class="btn blue-madison"> <i class="fa fa-plus"></i> {dr_lang('将此页面加入到快捷菜单')} </button>
                    </div>
                    <div style="text-align: center; margin-bottom: 20px">
                        <button type="button" onClick="$('.theme-panel').remove()" class="btn red"> <i class="fa fa-times"></i> {dr_lang('隐藏')} </button>
                    </div>

                </div>
            </div>

            <div class="page-toolbar fc-mb-left-menu">

            </div>

            <iframe name="right" id="right_page" src="{dr_url('home/main')}&cache={SYS_TIME}" url="{dr_url('home/main')}&cache={SYS_TIME}" frameborder="false" scrolling="auto" style="border:none; margin-bottom:0px;" width="100%" height="auto" allowtransparency="true"></iframe>

        </div>
    </div>

</div>
<script type="text/javascript">
    // 退出
    function dr_logout(url) {
        var r=confirm(lang['logout']);
        if (r==true) {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                success: function(json) {
                    if (json.code == 1) {
                        setTimeout("window.location.href='{dr_url("login/index")}'", 1000);
                    }
                    dr_tips(json.code, json.msg);
                },
                error: function(HttpRequest, ajaxOptions, thrownError) {
                    dr_ajax_alert_error(HttpRequest, ajaxOptions, thrownError)
                }
            });
        }
    }
    function dr_select_site(id) {
        var r=confirm('{dr_lang("你确定要切换到选中站点吗?")}')
        if (r==true) {
            window.location.href='{dr_url("api/site")}&id='+id
        }
    }

    function Mlink(top, left, link, url) {

        // 延迟提示
        /*
        var admin_loading = layer.load(2, {
            time: 1000
        });*/

        $('.dr_menu_item').hide();
		/* 第5: 这个地方也要修改一起,显示或者隐藏树型导航*/
		 if (link==link_id) {
		   if (previous_id!=link) {
		     zTree.selectNode(zTree.getNodes()[0]); //默认选定第一个节点
			 $('#divtree').show(); 
			 $('.sidebar-search-wrapper').hide();
		   }
		}   
		else { 
		  $('#divtree').hide();
		  $('.dr_menu_'+top).show();
		   $('.sidebar-search-wrapper').show();
		}
		/**/
        /*$('.dr_menu_'+top).show(); 把原来这句屏蔽掉*/
		
        $('.dr_menu_'+top+' .sub-menu').hide();

        $('#dr_m_top_'+top+' li').removeClass('active open');
        $('.dr_menu_'+top+' li').removeClass('active open');

        $('#dr_menu_link_'+link).addClass('active open');
        $('#dr_menu_m_link_'+link).addClass('active open');

        // 顶级菜单选择
        $('.top-menu .navbar-nav li').removeClass('open');
        $('.dr_mini_menu_top').removeClass('open');
        $('#dr_menu_top_'+top).addClass('open');
        $('#dr_mini_menu_top_'+top).addClass('open');

        // 移动端选择
        $('.fc-mb-sum-menu').hide();
        $('#dr_m_top_'+top).show();

        // 分组菜单选择
        $('.dr_menu_'+top+'').removeClass('active open');
        $('.dr_menu_'+top+' .selected').hide();
        $('.dr_menu_'+top+' .arrow').removeClass('open');

        $('#dr_menu_left_'+left).addClass('active open');
        $('#dr_menu_left_'+left+' .selected').show();
        $('#dr_menu_left_'+left+' .arrow').addClass('open');
        $('#dr_menu_left_'+left+' .sub-menu').show();

        $("#right_page").attr('src', url);
        $("#right_page").attr("url", url);
		//第6 记录link的值
		previous_id=link;
		
    }
    function wSize(){
        var str=getWindowSize();
        var strs= new Array(); //定义一数组
        strs=str.toString().split(","); //字符分割
        var heights = strs[0]-70,Body = $('body');
        $('#right_page').height(heights);
    }
    if(!Array.prototype.map)
        Array.prototype.map = function(fn,scope) {
            var result = [],ri = 0;
            for (var i = 0,n = this.length; i < n; i++){
                if(i in this){
                    result[ri++]  = fn.call(scope ,this[i],i,this);
                }
            }
            return result;
        };

    var getWindowSize = function(){
        return ["Height","Width"].map(function(name){
            return window["inner"+name] ||
                    document.compatMode === "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ]
        });
    }
 
    
        window.onresize=wSize;
        wSize();
        // 宽度小时
        if ($(document).width() < 900) {
            $('.page-sidebar .sidebar-toggler').click();
        }
    });
</script>
</body>
</html>


回帖
  • chengjp
    #1楼    chengjp
    2020-03-14 22:09:51
    Chrome 0
    效果图如下:
    微信图片_20200314215223
  • chengjp
    #2楼    chengjp
    2020-03-14 22:14:34
    Chrome 0
    实际项目中使用效果:
    微信图片_20200314221417
  • 湘西北的风
    #3楼    湘西北的风
    2023-03-14 21:59:57
    Chrome 0
    正需要属性结构
  • tugoy
    #4楼    tugoy
    2023-03-14 23:35:19
    华为手机 0
    厉害了哥们😄
  • 自牧
    #5楼    自牧
    2023-04-07 21:52:56
    Chrome 0

    正需要的结构