分享经验
版主：论坛审计组
ztree树插件
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>
正需要的结构