js树形菜单：Js table实现的树形导航菜单效 果源代码
JSP自定义标签(一) 树形下拉选择菜单
一、效果图：
二、自定义标签JAVA代码：
package com.moonNigh.tagSupport;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
/**
*
* @author HHB
*
* 树形下拉选择控件
*
*/
public class SelectorTag extends TagSupport {
private static final long serialVersionUID = 9878861374414215L;
//标签name属性
private String name;
//所需图片的路径 private String imgPath;
//所需javascript文件的路径
private String scriptPaht;
//所需css文件的路径
private String cssPath;
//项目的根路径
private String rootPath;
//标签的value属性
private String value;
private String text;
private String path;
/*
* 标签的actionUrl属性
* 联想查询结果数据通过向actionUrl属性指定的url请求得到
*/
private String actionUrl;
js导航栏多项点击显示下拉菜单代码
js导航栏多项点击显⽰下拉菜单代码
Dropdown
标题 A
下拉 1
下拉 2
下拉 3
标题 B
下拉 1
下拉 2
下拉 3
实现效果
这⾥要实现的效果是，点击id为a的元素弹出dropdown-a的div元素，点击id为b的元素弹出dropdown-b的div元素。
实现思路 （showList⽅法的实现过程）
注意事项：这⾥有个设计点，每⼀个弹出的下拉div（有dropdown-*类的div）同时有id和class。class是为了⽅便使⽤for循环对他们操作，
⽐如这⾥将他们进⾏隐藏。第⼆个是为了写css，每个下拉列表的css都是⼀样的。
1.思路是使⽤js，获得所有的有dropdown-content类的元素。
2.第⼆步有2种做法，如果没有强迫症的话就随便选⼀种就可以了。个⼈⽐较喜欢第⼆种。强迫症对于这2种如果不是很明⽩的话，可以使⽤
上⾯的注释调的alert函数调试⼀下。选择第⼀种hidelist（“”），你会发现在执⾏第3步之前，所对应的dropdown-content永远是隐藏的，由
隐藏切换到显⽰。所以你点击的时候，永远都是alert显⽰。这就是这2种做法的区别。
2-1.先把所有的弹出层（dropdown-content）隐藏。函数hideList('');
2-2.第⼆种就是，判断是否是点击的a链接所对应的那个dropdown-content，其余的全部隐藏。函数hideList("dropdown-" + o.id);
3.最后⼀步就是使⽤toggle⽅法切换所对应dropdown-content元素的显⽰或隐藏状态。
4.还有⼀个就是当下拉菜单展开的时候，点击窗体其他地⽅会把它隐藏的效果。跟模态框是⼀样的。代码在最后那⼏⾏。
这⾥举个不⽣动的例⼦，假如是动物园的个体表演。有猴⼦，狮⼦，灰熊...，每次出来⼀个表演。便于理解showlist（“”）⽅法。这⾥举例的
树形菜单jsTree使用方法
树形菜单jsTree使⽤⽅法
jsTree版本：3.0.4
在 MVC中使⽤jsTree
Model：
public class Department
{
public int Id { get; set; }
public string Name { get; set; }
public int PId { get; set; }
}
数据库：
Controller：
jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。对于⼩的菜单可以⼀次性加载
完，如果节点很多，可以按需加载（lazy loading）。
1、 ⼀次性加载完所有节点
public JsonResult GetTreeData(int clickId = 0)
{
// use database
var db=new Salary.Models.EntityContext();
/* ⼀次性加载完所有节点.
* 前端只需配置 'data': {
'url': '/Home/GetTreeData',
'dataType': 'json'
* } 不⽤给服务端传值
* 服务端不需写where
*/
var items=from item in db.Department
select new
{
id = item.Id,
parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！
text =
};
return Json(items, JsonRequestBehavior.AllowGet);
}
2、按需加载节点（lazy loading）
public JsonResult GetTreeData(int clickId = 0)
{
// use database
var db=new Salary.Models.EntityContext();
jsp制作动态树型菜单
jsp制作动态树型菜单
<%@ page contentType="text/html;charset=GBK" %>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*" %>
<%@ page session="true" %>
连接数据库
ERP-OA??
<% String main_id,aaa,aaaa,aaaaa;
String sql="select * from main_menu "; //第一层菜单表
ResultSet rs=db.execQuery(sql);
if(rs!=null)
{
int i=1;
while(rs.next())
{
main_id=rs.getString("id");
aaa="KB"+i+"Parent";
aaaa="'KB"+i+"'";
aaaaa="KB"+i+"Child";
%>
height=18 src="images/xtarrow.gif" width=20>
<%=rs.getString("menu_name")%>
<%
String sqlchild="select * from sub_menu where main_menu_id='"+main_id+"'"; //第二层菜单表
ResultSet rschild=db.execQuery(sqlchild);
if(rschild!=null)
{
int j=1;
while(rschild.next()) {
%>
JavaScript实现滑动导航栏效果
JavaScript实现滑动导航栏效果
本⽂实例为⼤家分享了js实现滑动导航栏效果的具体代码，供⼤家参考，具体内容如下
item1
item2
item3
item4
item5
item6
item7
item8
item9
item10
item11
导航栏可滑动
下拉点击会相应的改变导航栏
Jsp实现树形结构
Jsp实现树形结构
1。原理简介
dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。下载目录：/javascripts/tree/
以下是dtree的用法示例：
1）初始化菜单
2）调用函数
显然，如果用动态的脚本来初始化菜单数组（asp,jsp均可），那就可以很方便的实现动态的树型菜单了。
2。jsp动态实现
分以下步骤实现动态的树型菜单：
1）在数据库建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四个字段，来存储节点信息。
2）编写java类，用于从数据库找出节点信息，并且生成javascript脚本。
3）编写tag类。用于封装逻辑，简化jsp的开发。
4）建一个web程序进行测试。
3。详细过程
1）在数据库建表，脚本如下：
CREATE TABLE `test`.`tree_info` (
`node_id` INTEGER UNSIGNED NOT NULL DEFAULT -1, `parent_id` INTEGER UNSIGNED NOT NULL DEFAULT -1,
`node_name` VARCHAR(45) NOT NULL,
`ref_url` VARCHAR(45) NOT NULL,
PRIMARY KEY(`node_id`)
)
我使用mysql数据库，如果脚本细节有出入，请自行修改
按照上面的dTree示例插入数据
2）编写TreeInfo.java，这个类用于封装节点信息
package com.diegoyun.web.tree;
/**
* @author Diegoyun
* @version 1.0
js-插件封装-树形折叠菜单
js-插件封装-树形折叠菜单
(function () {
// 插件核⼼:OOP的模式，可以创建单独的实例，这样实现私有属性和公有⽅法的有效管理
class zTree {
constructor(element, options) {
// init params
let self = this,
len = arguments.length,
config = {
element: null,
data: null,
callback: function () {}
};
if (len === 0) throw new Error(`element or options are required!`);
if (len === 1) options = element;
if (!options || typeof options !== "object") throw new TypeError(`options must be an object!`);
if (len === 2) options.element = element;
config = Object.assign(config, options);
// verify the format of the transmitted information
let {
element: element2,
data,
callback
} = config;
if (!element2 || element2.nodeType !== 1) throw new TypeError(`element must be a DOM element object`);
if (!Array.isArray(data)) throw new TypeError(`data must be an array!`);
if (typeof callback !== "function") throw new TypeError(`callback must be an function!`);
java、js中实现无限层级的树形结构（类似递归）
java、js中实现无限层级的树形结构（类似递归）
js中：
var zNodes=[
{id:0,pId:-1,name:"Aaaa"},
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"},
{id:37,pId:36,name:"z1123"} ,
{id:38,pId:37,name:"z123123123"}
];
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group(); return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
bootstrap-table+treegrid实现树形表格
bootstrap-table+treegrid实现树形表格
实现⼀个树形表格的时候有多种⽅法：⽐如把 ztree 的树形直接拼接成表格，或者⽤强⼤的 jqgrid 实现，今天介绍⼀个⽐较轻量级的
实现：使⽤bootstrap-table + treegrid 。
1、引⼊ jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css ⽂件：bootstrap.css、
bootstrap-table.css、jquery.treegrid.css；
2、后台传到前台的 json 必须含有 id、pid字段，有 id pid 才能形成树结构（这⾥为了演⽰，把 json 写成固定的了，实际中要从后台
获取）；
3、在使⽤过程中可以参考 bootstrap-table 的设置参数，通过不同的设置以达到⾃⼰想要的效果；
完整代码⽰例：
系统管理
选择
Vue.js递归组件实现树形菜单
Vue.js递归组件实现树形菜单
最近看了 Vue.js 的递归组件，实现了⼀个最基本的树形菜单。
main.js 作为⼊⼝：
import Vue from 'vue'
import main from './components/main.vue'
new Vue({
el: '#app',
render: h => h(main)
})
它引⼊了⼀个组件 main.vue：
subMenuData1, subMenuData2 存放⼦菜单数据，可以从服务器获取，以实现动态加载。
该⽂件引⼊了树形组件 treeMenu.vue：
{{ item[name] || item.menuName }}