随笔- 57 文章- 0 评论- 311 阅读- 19万

下拉树的简易实现

近期需要一个文本框下拉树，本着网上随便找个用用的想法，先是在网上一顿猛找，下载代码三四个，结果没一个好用的。

要么就是功能过于简单，要么就是实现太过复杂，没办法自己弄，因之前用过zTree，这里把zTree稍微改造一下，花费了一点时间，基本也能用了。

实现后效果图：

主要思路：

点击文本框时，显示隐藏的Div层，Div层里包含一个树型控件，点击页面其他部位时，Div层隐藏，同时将选取的值写入文本框。

页面代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebApp.Views.OrderManage.Test" %>

<!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">
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="../../Content/themes/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/ztree/jquery.ztree.core-3.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/ztree/jquery.ztree.excheck-3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
        <!--
    var setting = {
        view: {
            showIcon: false
        },
        data: {         
            simpleData: {
                enable: true
            }
        },
        callback: {            
            onClick: onClick
        }
    };
    
    function onClick(e, treeId, treeNode) {        
        $('#txtTreeSelect').val(treeNode.name);
    }

    function showMenu() {
        var cityObj = $('#txtTreeSelect'); 
        var cityOffset = cityObj.offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    $(document).ready(function () {
        var zNodes = [
            { name: "全部", open: true,
                children: [
                    { name: "未审核",
                        children: [
                            { name: "叶子节点111" },
                            { name: "叶子节点112" },
                            { name: "叶子节点113" },
                            { name: "叶子节点114" }
                        ]
                    },
                    { name: "已审核",
                        children: [
                            { name: "叶子节点121" },
                            { name: "叶子节点122" },
                            { name: "叶子节点123" },
                            { name: "叶子节点124" }
                        ]
                    }
                ]
            }
        ];
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);        
    });
        //-->
</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txtTreeSelect" type="text" onclick="showMenu(); return false;"/>
    </div>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 120px; height:80px;">
    </ul>
</div>
    </form>
</body>
</html>