西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → Javascript樹型菜單(含源碼)

Javascript樹型菜單(含源碼)

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:cyan時間:2010/3/10 18:02:15字體大。A-A+

作者:cyan點擊:401次評論:0次標(biāo)簽: 樹型菜單

  • 類型:音頻處理大。1M語言:中文 評分:5.1
  • 標(biāo)簽:
立即下載

看到園友發(fā)表了一篇關(guān)于JS樹的文章,看了之后,覺得應(yīng)該可以精簡不少代碼,

想到了以前做的項目里面用到了一個JS樹,于是試著修改了一下,現(xiàn)把代碼貼出來與大家共享,還請大家多扔磚頭!

 

<!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也就連接一次服務(wù)器,對于小數(shù)據(jù)量性能也應(yīng)該蠻高的,代碼也在源碼包里面

在與客戶端交互上面,用服務(wù)器控件可以加上

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

數(shù)據(jù)庫結(jié)構(gòu)截圖:

FF下截圖:


點擊下載源碼

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)