ajax树型菜单(源代码) 在线

[nunchakus111111]

我现在有三个表,一张单位表,部门表,员工表,如何动态实现,点其中一个,就是该结点的单位部门,点部门,只显示这个单位部门的员工,

用AJAX如何实现,JAVA编程

[xiaoyu4215]

先用sql写好一个树形式的语句,然后AJAX到后台拿数据,最后一个js文件解析从后台得到的xml形式的数据展示就好

[孙思邈]

LS正解

[mextb1860]

问题是怎么实现点击节点.右边局部刷新啊

[hu_zy]

可以使用YUI，就是yahoo提供的一个javascript ui解决方案。
使用的代码：


<link rel="stylesheet" type="text/css" href="build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="build/menu/assets/menu.css">
<link rel="stylesheet" type="text/css" href="css/folders/tree.css">

<script type="text/javascript" src="build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="build/event/event.js"></script>
<script type="text/javascript" src="build/dom/dom.js"></script>
<script type="text/javascript" src="build/treeview/treeview.js"></script>
<script type="text/javascript" src="build/animation/animation.js"></script>
<script type="text/javascript" src="build/container/container_core.js"></script>
<script type="text/javascript" src="build/menu/menu.js"></script>

<script>

var g_iUin= 0;
var tree;

/*create namespace for foderTreeViews:*/
YAHOO.namespace("foderTreeView");

function get_folder_list(sFolderName)
{
top._mainfrm.location= "/cgi-bin/get_file_list?path="+sFolderName;
return ;
}


// "render" event handler for the ewe context menu
function onContextMenuRender(p_sType, p_aArgs, p_oMenu) {
// Add a "click" event handler to the ewe context menu
this.clickEvent.subscribe(onFolderContextMenuClick, p_oMenu, true);
}


// "click" event handler for each item in the ewe context menu
function onFolderContextMenuClick(p_sType, p_aArgs, p_oMenu)
{
var oItem = p_aArgs[1];

if (oItem)
{
switch(oItem.index) {
case 0: // new sub-directory
//alert("new dir:" + oItem.value);
var sName= window.prompt("输入新目录名称：");
var sUrl = "/cgi-bin/new_dir.cgi?path=" + oItem.value + "&name=" + sName;
alert(sUrl);
top._mainfrm.location= sUrl;
break;

case 1: // delete directory

var sUrl = "/cgi-bin/delete_dir.cgi?path=" + oItem.value;
alert(sUrl);
top._mainfrm.location= sUrl;

break;
}
}
}


function addNewContextMenu(elID, subPath)
{
var aMenuItems = [
{ text: "新建子目录", value: subPath },
{ text: "删除子目录", value: subPath }
];

var sMenuName = "fcm_"+elID;
var oFolderMenu = new YAHOO.widget.ContextMenu(
sMenuName,
{
trigger: elID,
itemdata: aMenuItems,
lazyload: true,
effect:{
effect:YAHOO.widget.ContainerEffect.FADE,
duration:0.25
}
}
);


oFolderMenu.renderEvent.subscribe(onContextMenuRender, oFolderMenu, true);
}

YAHOO.foderTreeView.foderTree = function() {


function createHttpLoader()
{
var d;
try {
d= new ActiveXObject("microsoft.XMLDOM");
}
catch (e) {
return null;
}
d.async= true;
return d;
}

function loadNodeData(node, fnLoadComplete)
{

var xmlDom= createHttpLoader();

var p = node;
var path = "";
while (p.depth > 0) {
path = "/" + p.label + path;
p = p.parent;
}
//var sUrl = "/cgi-bin/cgi_get_sub_folders.cgi?uin="+g_iUin+"&path=" + path;
var sUrl = "/folder.xml";

xmlDom.onreadystatechange = function ()
{
if (xmlDom.readyState != 4) return;
if (xmlDom.parseError.errorCode != 0) {
alert(xmlDom.parseError.reason);
return;
}

var rootNode = xmlDom.selectSingleNode("data");

var Nodes = xmlDom.selectNodes("/data/folder");

for (i=0; i< Nodes.length; i++)
{
var subPath = path + "/" + Nodes[i].getAttribute("name");
var data = {
"label": Nodes[i].getAttribute("name"),
"href": "javascript:get_folder_list('" + subPath + "')"
};
var newNode = new YAHOO.widget.TextNode(data, node, false);
addNewContextMenu(newNode.labelElId, subPath);
}
fnLoadComplete();
};
xmlDom.load(sUrl);
}

function buildTree() {
//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");

//turn dynamic loading on for entire tree:
tree.setDynamicLoad(loadNodeData, 0);

//get root node for tree:
var root = tree.getRoot();

//add child nodes for tree:
var newNode = new YAHOO.widget.TextNode("/", root, true);

//render tree with these five nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();
}


return {
init: function() {
buildTree();
}
}
} ();

function refresh_menu()
{
tree.refresh();
}


YAHOO.util.Event.addListener(window, "load", YAHOO.foderTreeView.foderTree.init, YAHOO.foderTreeView.foderTree, true);

</script>
<title>Dynamic TreeView foderTreeView</title>
</head>
<body id="yahoo">

<div id="treeContainer"></div>
<br>

[hu_zy]

可以实现动态的菜单加载，类似 csdn的菜单。

[hu_zy]

yui的下载给你个链接吧：

http://bbs.showq.net/bbs/viewthread.php?tid=1472&extra=page%3D1
YAHOO javascript UI开发工具包。

[xiaoyu4215]

点击节点.右边局部刷新

--------------------------------------------------------
这个是框架实现啊 ,左框架和右框架
左框架放树,右框架放点击树后连接的页面