近期需要一个文本框下拉树，本着网上随便找个用用的想法，先是在网上一顿猛找，下载代码三四个，结果没一个好用的。
要么就是功能过于简单，要么就是实现太过复杂，没办法自己弄，因之前用过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>
相关文章
暂无评论...
致力于称为最好的程序员导航网站