js树形菜单:Js table实现的树形导航菜单效 果源代码
- 格式:pdf
- 大小:93.52 KB
- 文档页数:16


一、效果图:
二、自定义标签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导航栏多项点击显⽰下拉菜单代码
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版本: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制作动态树型菜单
<%@ 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()) {
%>