JQuery的树型菜单 求救！！

[zthsn]

我用想JQuery做一个树型的动态菜单，点击某一个大项 如果数据库中该大项下面有子项就展示出来
有哪位仁兄可以提供源码或者提供相应的文章啊？

[Manonloki]

 <script type="text/javascript">
            //设置初始值
            var tree = null;
            var root = new TreeNode('系统菜单');
            //录入客户资料
            var fun1 = new TreeNode('录入客户资料');
            var fun2 = new TreeNode('录入客户资料', '', 'tree_node.gif', null, 'tree_node.gif', null,"aInputCustomerInformation");
            var fun3=new TreeNode('查看客户资料','', 'tree_node.gif', null, 'tree_node.gif', null,"aSelectCustomersInformation");
            fun1.add(fun2);
            fun1.add(fun3);
            root.add(fun1);

            //录入回访记录
            fun1 = new TreeNode('录入回访记录');
            fun2 = new TreeNode('录入回访记录', '', 'tree_node.gif', null, 'tree_node.gif', null, "aInputFollowRecordInformation");
            fun3 = new TreeNode('查询回访记录', '', 'tree_node.gif', null, 'tree_node.gif', null, "aSelectFollowRecordInformation");
            fun1.add(fun2);
            fun1.add(fun3);
            root.add(fun1);
            //显示DOM
            tree = new Tree(root);
            
            tree.show('menuTree');
            
        </script>

基本这么个格式，记得是要TREENODE.JS插件的

[Manonloki]

需要HEAD里引入TREE.JS 和TREENODE.JS

顺手解释下

"aInputCustomerInformation"这个是插件在页面上自动生成的节点

function LoadJavaScript()
{
    $(document).ready(function() {
        //录入客户信息
    $("#aInputCustomerInformation").click(function() {
            $.getScript("JavaScript/InputCustomerInformation.js");

            $("#inputHidden").val("Null");
            return false;
        }).css("cursor", "pointer");
        //查询客户信息
        $("#aSelectCustomersInformation").click(function() {
            $.getScript("JavaScript/SelectCustomersInformation.js");

            return false;
        }).css("cursor", "pointer");
        //录入回访记录
        $("#aInputFollowRecordInformation").click(function() {
            $.getScript("JavaScript/InputFollowRecordInfomation.js");
            return false;
        }).css("cursor", "pointer");
        //查看回访记录
        $("#aSelectFollowRecordInformation").click(function() {
            $.getScript("JavaScript/SelectFollowRecordInfomation.js");
        }).css("cursor", "pointer");
    });
}

LoadJavaScript();

附赠另一JS文件 这个是页面载入时给刚刚生成的节点添加CLICK事件的

[IHandler]

这个参考下吧，可以用里面的API，再借助JQuery
参考

[kaukiyou]

为什么不用微软的TreeView？

[wwfgu00ing]

http://www.open-open.com/ajax/Tree.htm

[zthsn]

[Quote=引用 1 楼 lcrlb1988 的回复:]

JScript code

<script type="text/javascript">
//设置初始值
var tree = null;
var root = new TreeNode('系统菜单');
//录入客户资料
var fun1 = new TreeNode(……
[/Quote]

我是想点击某一个大项后他会到我写的方法里面去查，如果有就显示 没有就不显示

[Manonloki]

首先你服务器得先有个项目列表 对吧
其次向Click事件里添加方法 通过JQUERY向服务器查询你刚刚的那个大项的名称
FOREACH返回对象
{

var fun = new TreeNode(服务器返回的项目名称, '', 'tree_node.gif', null, 'tree_node.gif', null,"这里你动态的自定义吧");

root.add(fun)
}

你是不是想这样动态加载？

[Manonloki]

= =刚刚经理在边上 笔误了 是在数据库中单独建个项目列表

然后通过单击你大项的时候向服务器发请求，去数据库下边查询大项对应的小项……

然后再动态的把返回的列表添加到页面