`
y806839048
  • 浏览: 1129525 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

树形菜单tag框架 非树形的点击事件

tag 
阅读更多
//这种是平行的三级菜单,不是文件夹式树状菜单

<uitag-core:sidebar collapse="false">
<uitag-core-sidebar:navitems>
<uitag-core-sidebar:navitem icon="fa-desktop" dropdown="true" title="资源分类" current="open">
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" title="网络设备">
<utility:each ajaxurl="${basePath}/tbresource!getResourceTypeJson.json?isNetdevice=1">
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="false" title="${data.text}" url="wlsb/list.jsp?type=${data.value}"/>
</utility:each>
</uitag-core-sidebar:navitem>

<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" title="服务器及存储">
<utility:each ajaxurl="${basePath}/tbresource!getResourceTypeJson.json?isNetdevice=0">
<uitag-core-sidebar:navitem dropdown="false" title="${data.text}" url="fwqjcc/list.jsp?type=${data.value}"/>
</utility:each>
</uitag-core-sidebar:navitem>

<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" title="安全设备">
<utility:each ajaxurl="${basePath}/topsec-asset!queryAssetType.json">
<uitag-core-sidebar:navitem dropdown="false" title="${data.text}" url="aqsb/list.jsp?type=${data.value}"/>
</utility:each>
</uitag-core-sidebar:navitem>

<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" title="机房机柜">
<utility:each ajaxdata="[{value:'jf',text:'机房'},{value:'jg',text:'机柜'}]">
<uitag-core-sidebar:navitem dropdown="false" title="${data.text}" url="jfjg/list.jsp?type=${data.value}"/>
</utility:each>
</uitag-core-sidebar:navitem>

<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="false" title="光纤链路" url="gxll/list.jsp"/>
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="false" title="用户节点" url="yhjd/list.jsp"/>
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="false" title="工程师" url="gcs/list.jsp"/>
</uitag-core-sidebar:navitem>
</uitag-core-sidebar:navitems>
</uitag-core:sidebar>
<!-- 右侧内容区域 -->
<layout:panel id="main-content" floats="right" fixwidth="210">
<iframe id="ListFrame" src="#"></iframe>
</layout:panel>
</layout:panel>

<div id="javascript" class="display-hidden">
<!-- ace scripts -->
<script type="text/javascript" src="${basePath}/resources/styles/ui/ace/js/ace-elements.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/styles/ui/ace/js/ace.min.js"></script>


</div>


//这种是文件夹式树状菜单
<uitag-core:sidebar collapse="false">
<uitag-core-sidebar:navitems>
<uitag-core-sidebar:navitem icon="fa-desktop" dropdown="true" title="工单分类" current="open" root="true">
<system:auth resKey="zwww.gdgl.sjgd">
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" tree="true" title="事件工单" url="sjgd/list.jsp" onclick="onSidebarClick(this)">
<cui:tree id="tree1" data="treedata" onClick="onTreeNodeClick"></cui:tree>
</uitag-core-sidebar:navitem>
</system:auth>
<system:auth resKey="zwww.gdgl.gzgd">
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" tree="true" title="故障工单" url="gzgd/list.jsp" onclick="onSidebarClick(this)">
<cui:tree id="tree2" data="treedata" onClick="onTreeNodeClick"></cui:tree>
</uitag-core-sidebar:navitem>
</system:auth>
<system:auth resKey="zwww.gdgl.gjgd">
<uitag-core-sidebar:navitem icon="fa-caret-right" dropdown="true" tree="true" title="割接工单" url="gjgd/list.jsp" onclick="onSidebarClick(this)">
<cui:tree id="tree3" data="treedata" onClick="onTreeNodeClick"></cui:tree>
</uitag-core-sidebar:navitem>
</system:auth>
</uitag-core-sidebar:navitem>
</uitag-core-sidebar:navitems>
</uitag-core:sidebar>




//在sidebar.tag里面写了非树形的点击事件


<%
/**
* 描述:左侧导航栏
* 作用:
* 作者:chanlong(陈龙)
* 时间:2014-11-13 09:32
* 版本:1.0.2014.11.13
*/
%>
<%@ include file="/WEB-INF/tags/sui/common/include.jsp" %>
<%@ tag language="java" pageEncoding="UTF-8" body-content="scriptless"%>

<%@ attribute name="collapse" type="java.lang.Boolean" description="是否可以伸缩"%>

<jsp:doBody var="pageHTML"/>

<div id="sidebar" class="sidebar responsive">
<script type="text/javascript">
try{
ace.settings.check('sidebar', 'fixed');
ace.settings.sidebar_fixed(true);
}catch(e){}
</script>

${pageHTML}

<c:if test="${collapse}">
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</c:if>

<script type="text/javascript">
try{ace.settings.check('sidebar', 'collapsed')}catch(e){}
</script>

<script type="text/javascript">
// 左侧菜单的点击事件
$("div#sidebar ul.nav-list li a.no-dropdown").click(function(){
ace.sidebar.toggle(this);

var url = $(this).attr("url");
$("#ListFrame").attr("src",url);
});
</script>
</div>
分享到:
评论

相关推荐

    JavaScript 树形菜单

    在JavaScript中实现树形菜单,可以利用DOM操作、事件处理以及递归等编程技巧。 首先,创建树形菜单的基础是HTML结构。一个简单的树形菜单由`&lt;ul&gt;`和`&lt;li&gt;`元素构成,其中`&lt;li&gt;`元素代表菜单节点,而子节点则嵌套在...

    js+jsp树形菜单

    在树形菜单中,JavaScript通常用于创建和控制菜单的显示、折叠、展开等行为,以及处理用户的点击事件。例如,可以通过DOM(Document Object Model)操作来动态添加、删除或修改菜单项,通过AJAX(Asynchronous ...

    js 树形菜单(全)

    JavaScript(简称JS)树形菜单是一种常见的用户界面元素,它用于组织和展示具有层次结构的数据。在网页设计中,树形菜单通常用于导航,让用户能够快速浏览和访问多级目录或分类内容。在这个主题中,我们将深入探讨...

    非常实用的树形菜单,有数据库表

    在实现树形菜单时,Java提供了多种库和框架支持,如JavaFX、Swing(对于桌面应用)以及Struts、Spring MVC(对于Web应用)等。这些工具可以帮助开发者轻松构建和管理树形结构。 3. **数据库表**:数据库是存储和...

    java折叠树形菜单源码

    Java 折叠树形菜单源码是Web开发中常见的需求,尤其在构建具有层次结构的导航系统时。本文将深入探讨如何使用Java和JSP来实现这样的功能,并结合描述中的"加框架,可以隐藏在左侧",我们还将讨论如何将菜单嵌入到...

    基于JavaScript的树形菜单

    首先,我们需要获取到树形菜单的根节点,然后遍历每个节点,添加点击事件监听器以实现展开和折叠功能。例如: ```javascript var treeMenu = document.getElementById('treeMenu'); var listItems = treeMenu....

    JSP项目中JAVASCRIPT 树形菜单

    在树形菜单的实现中,JavaScript负责动态地创建、展开、折叠菜单项,以及处理用户点击事件。 1. **HTML结构**:创建树形菜单的基础是HTML结构,通常使用`&lt;ul&gt;`和`&lt;li&gt;`标签来构建层次结构。每个`&lt;li&gt;`代表一个菜单...

    解析数据库 形成树形结构菜单

    在构建树形菜单时,我们需要一个包含层次信息的数据表,比如一个`menu`表,可能包含`id`(唯一标识符)、`parent_id`(父节点ID)、`name`(菜单名称)等字段,来表示菜单项之间的层级关系。 接下来,我们讨论**树...

    C#WinFrom树形菜单数据绑定

    在C# WinForm开发中,树形菜单(TreeView)是一种常用的数据展示控件,它可以将层级结构的数据以直观的方式呈现给用户。本知识点主要聚焦于如何将数据从数据库读取并绑定到TreeView控件上,实现数据的动态加载和显示...

    树结构菜单

    在IT领域,尤其是在Web开发中,"树结构菜单"是一种常见的用户界面元素,它用于组织和展示层次...通过合理的设计和实现,我们可以构建出既实用又美观的树形菜单系统,帮助用户更有效地探索和操作Web应用中的多层次信息。

    Tree根据不同节点显示不同右键菜单

    "根据不同节点显示不同右键菜单"是指在用户右键点击树形控件的不同节点时,弹出的上下文菜单(即右键菜单)会根据所点击的节点内容而变化。这通常需要通过编程实现,具体步骤包括: 1. **事件监听**:首先,我们...

    动态菜单树

    - 可以使用递归方法,将菜单列表转化为树形结构,每个节点包含其子节点列表。 4. JSP前端展示: - 使用JavaScript库(如jQuery、Vue.js、React等)在前端解析接收到的树形数据,渲染成可交互的菜单树。 - 根据...

    Extjs,ExtTLD框架

    本文将深入探讨这两个概念,以及如何利用它们来创建具有树形结构的框架。 **ExtJS** ExtJS是一个开源的JavaScript库,主要用于构建富客户端Web应用程序。它提供了一套完整的组件模型、布局管理、数据绑定和丰富的...

    C#左侧导航菜单

    1. 使用TreeView控件:TreeView控件非常适合表示层次化的数据,可以方便地创建树形结构的菜单。每个TreeNode代表一个菜单项,TreeNode的子节点则表示子菜单项。我们可以通过编程添加TreeNode,设置其Text属性为菜单...

    .net菜单

    6. **事件处理**:为菜单项添加事件处理,例如点击事件。 ```csharp menuItem.NodeMouseClick += new TreeNodeMouseClickEventHandler(this.menuItem_NodeMouseClick); ``` 7. **数据驱动**:如果菜单基于数据库或...

    jquery_compent.zip

    TreeTag.htm可能是用于展示树形菜单或层级结构的实例,而TreeTag_files文件夹包含支持这一功能的相关文件,如CSS样式、JavaScript代码和其他辅助资源。jQuery的树形插件常用于网站导航、文件目录展示等场景,通过...

    C#_ TreeView树状列表使用示例.rar

    每个节点(TreeNode)可以包含子节点,形成树形结构。 2. **创建和添加节点** - `TreeNode`类代表TreeView中的一个节点,可以通过`TreeView.Nodes.Add()`方法添加顶级节点,然后通过`TreeNode.Nodes.Add()`方法...

    JSP与无限级分类树型菜单

    这里需要构建一个树形结构,通常用Map或者自定义的树节点类来存储。每个节点包含自身的属性(如ID、名称等)以及子节点列表。 4. 层级遍历:遍历树形结构,生成HTML结构。可以使用递归函数,每个节点生成一个li标签...

    jsp后台框架,含js tv20树状结构代码

    TV20是JavaWeb中的一款强大的树形视图组件,它可以方便地在网页上构建和管理多层的树状结构。TV20不仅支持基本的展开、折叠功能,还可能包括搜索、排序、拖拽重排等多种高级特性,极大地提高了用户体验。使用TV20,...

Global site tag (gtag.js) - Google Analytics