Javascript樹型菜單的方法_JavaScript綜合知識

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript樹型菜單的方法

Javascript樹型菜單的方法

編輯：JavaScript綜合知識

看到園友發表了一篇關於JS樹的文章，看了之後，覺得應該可以精簡不少代碼，

想到了以前做的項目裡面用到了一個JS樹，於是試著修改了一下，現把代碼貼出來與大家共享，還請大家多扔磚頭！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title></title>

    <script src="JS/Tree.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

<%--    <asp:TreeView ID="TreeView1" runat="server" ShowLines="True">

    </asp:TreeView>--%>

    <div id="treeOrgan"></div>

    </div>

    </form>

    <script type="text/javascript" language="javascript">

        var tree;

        window.onload = function()

        {

            if (tree != "") {

                tree = new treeview("treeview", "../images/Tree", false, false);

                var parNode = new node("人員列表", "人員列表", "", "0", "F", false, "");

                //caption, title, url, target, tag,check,callback

                tree.add(parNode);

                tree.create(document.getElementById("treeOrgan"));

                InitNode(0, parNode);

                parNode.expand();

            }

        }

        function InitNode(id, parNode) {

            if (parNode.nodes.length > 0) {

                parNode.toggle();

            }

            else {

                //parNode.DeleteChildren();

                var result = WebApplicationJsTree._Default.GetJson(id).value;

                if (result != null && result != "") {

                    var data = eval('(' + result + ')');

                    for (var i = 0; i < data.length; i++) {

                        var pn = new node(data[i].NAME, data[i].NAME, "", "P", data[i].id, true, "");

                        parNode.add(pn);

                    }

                }

            }

        }

        treeview.prototype.onnodeclick = function(sender) {

            InitNode(sender.tag, sender);

            sender.select();

            sender.expand();

            return false;

        }

</script>

</body>

</html>

其實個人覺得用TreeView+linq to list也就連接一次服務器，對於小數據量性能也應該蠻高的，代碼也在源碼包裡面

在與客戶端交互上面，用服務器控件可以加上

tn.Text = "<span onclick="treeNodeClick(" + tn.ID + ")">" + tn.Name;

數據庫結構截圖：

FF下截圖：

JavaScript綜合知識

在javascript中執行任意html代碼的方法: 關於javascript的eval（）函數無法執行html代碼的問題，下面為大家介紹下一種在java
jquery插件cluetip關鍵詞注釋: 這個可以用jquery的一個插件cluetip　　地址下載是:plugins.learningjqu
JQuery中extend的用法實例分析: 這篇文章主要介紹了JQuery中extend的用法,實例分析了extend的功能、定義及

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

小編推薦

JS中的Replace方法使用經驗分享 JQuery中屬性過濾選擇器用法 JS Jquery 遍歷,篩選頁面元素自動完成解析js原生方法創建表格效率測試 jquery設置按鈕停頓3秒不可用 js判斷為空Null與字符串為空簡寫方法 javascript獲取隱藏dom的寬高具體實現 ExtJS判斷IE浏覽器類型的方法點擊顯示指定元素並隱藏其他同輩元素 jQuery通過Ajax返回JSON數據

DIV CSS 佈局教程網

相關文章