用showModalDialog弹出窗口和UltraWebTree树实现的行政区域(省,市,县)选择

行政区域的省,市,县选择一般多用DropDownlist的三级联动就可以了,技术经理说那个不是很好,对于当前的项目。
要做成showModalDialog弹出窗口根据树展开进行选择,然后返回行政区域的全名和地区代码。
实现过程:
新建一个用户控件DistrictSelect.ascx;cs没有代码的


 1<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DistrictSelect.ascx.cs"
 2    Inherits="Common_DistrictSelect" %>
 3
 4<script type="text/javascript" language="javascript">
 5function openwin()
 6{
 7   var str=window.showModalDialog('district.aspx','行政区域选择','dialogHeight:800px;dialogWidth:600px;status:yes;scroll:yes;help:no');
 8 //打开弹出窗口,str用来取district.aspx的返回值
 9   districtName=str.split(",");   
10   document.getElementById("<%=txt_district.ClientID%>").value=districtName[0];//行政区域全程
11   document.getElementById("<%=hf_district.ClientID%>").value=districtName[1];//行政区域代码
12}

13</script>
14
15<div>
16    <asp:TextBox ID="txt_district" runat="server"></asp:TextBox>
17    <asp:Button runat="server" ID="btn_select" Text="选择" OnClientClick="openwin()" />
18    <asp:HiddenField ID="hf_district" runat="server" />
19</div>
20
接下来是 district.aspx页面了,引入了Anthem

 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="district.aspx.cs" Inherits="district" %>
 2
 3<%@ Register Assembly="Infragistics2.WebUI.UltraWebNavigator.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
 4    Namespace="Infragistics.WebUI.UltraWebNavigator" TagPrefix="ignav" %>
 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 6<html xmlns="http://www.w3.org/1999/xhtml">
 7<head runat="server">
 8    <title>无标题页</title>
 9    <script type="text/javascript" language="javascript">
10    {
11      function getTreeNode()
12     {   
13     var name=document.getElementById('btn_search').value;  
14    
15     if(name=="查找")  //如果按钮的值 查找 查询下级节点
16     {
17    
18      Anthem_InvokePageMethod('findTreeNode',[document.getElementById('txt_condition').value],showResult);      
19      }
  
20      else   //判断txt_condition是否为空,不为空将值返回父窗口,关闭当前窗口
21      {
22    
23      var district=document.getElementById('txt_condition').value;
24      if(district.Length!=0)
25       //alert(district+document.getElementById('hf_districtCode').value)
26       //返回行政名称和代码window.returnValue   
27        window.returnValue=district+","+document.getElementById('hf_districtCode').value;
28        window.close();
29       }
       
30       else
31       {
32       alert('请选择行政区域');
33       }

34      }
    
35     }

36     
37     function showResult(result)
38     {
39     
40      var str=result.value.split(",");      
41      if(str[0]=="0")
42      
43       alert("找不到匹配的行政区,请重新输入!");
44      }

45     else
46      {
47       var txt=document.getElementById('txt_condition');
48       txt.value=str[0];            
49       txt.readonly=true;
50       document.getElementById("hf_districtCode").value=str[1];
51       document.getElementById('btn_search').value="确定";
52      }

53     }

54     
55   
56  }

57    </script>
58
59</head>
60<body>
61    <form id="form1" runat="server">
62        <div>
63          <span style=" font-size:12pt ">请选择行政区域</span>  
64            <div style="width: 420px; height: 40px;" align="center">
65                <input id="txt_condition" type="text" runat="server" style="width:300px" />
66                <input id="btn_search" type="button" value="查找" onclick="getTreeNode()" runat="server" />
67                <asp:HiddenField ID="hf_districtCode" runat="server" />
68            </div>
69            
70        </div>
71        <div style="width: 150px; font-size: 10pt" id="province">
72            <ignav:UltraWebTree ID="treeDistrict" runat="server" DefaultImage="" HoverClass=""
73                Indentation="20" Height="100%" Width="100%" OnNodeClicked="treeDistrict_OnNodeClicked">
74            </ignav:UltraWebTree>
75        </div>
76    </form>
77</body>
78</html>
79
Cs里面

 1public partial class district : System.Web.UI.Page
 2{
 3    protected void Page_Load(object sender, EventArgs e)
 4    {
 5        Anthem.Manager.Register(this);//anthemManager注册
 6        if (!Page.IsPostBack)
 7        {
 8            District[] dis = BaseDistrictMng.GetAllProvinces();
 9            foreach (District province in dis)//加载省级行政单位
10            {
11                Node rootNode = new Node();
12                rootNode.DataKey = province.DistrictCode;
13                rootNode.Text = province.DistrictName;
14                rootNode.ToolTip = province.DistrictName;
15                rootNode.ImageUrl = "~/images/Grade.gif";
16                rootNode.ShowExpand = true;
17                rootNode.SelectedImageUrl = "~/images/icon_ok.gif";                         
18                treeDistrict.Nodes.Add(rootNode);
19            }

20        }

21        //不重新弹出,这个很重要,否则点击树结点会在showModalDialog上弹出一个district.aspx页面
22        Response.Write("<base   target=_self   />");
23
24    }

25   
26    protected void treeDistrict_OnNodeClicked(object sender, WebTreeNodeEventArgs e)
27    {
28        string districtcode = SelectedNode.DataKey.ToString(); ;
29        string districtname = SelectedNode.Text;
30
31        District[] dis = BaseDistrictMng.GetLowerDistricts(districtcode);
32        if (dis != null && dis.Length != 0)//有下级填充节点
33        {
34            fillTreeNode(SelectedNode, dis);
35            this.treeDistrict.SelectedNode.Expand(true);
36        }

37        else//没有下级,取值
38        {
39            District dd=BaseDistrictMng.GetDistrictById(districtcode);
40            string allName = dd.ParentDistrict.ParentDistrict.DistrictName  + dd.ParentDistrict.DistrictName +dd.DistrictName;
41            this.txt_condition.Value = allName;
42            this.btn_search.Value = "确定";
43            this.hf_districtCode.Value = districtcode;
44          
45        }

46    }

47    //填充子节点
48    protected void fillTreeNode(Node rootNode, District[] dis)
49    {
50        foreach (District var in dis)
51        {
52            Node node = new Node();
53            node.DataKey = var.DistrictCode;
54            node.Text = var.DistrictName;
55            node.ToolTip = var.DistrictName;
56            node.ImageUrl = "~/images/Grade.gif";
57            node.SelectedImageUrl = "~/images/icon_ok.gif";
58            rootNode.Nodes.Add(node);
59        }

60        rootNode.ShowExpand = true;
61    }

62    [Anthem.Method]//寻找子节点,实现查询功能
63    public string findTreeNode(string districtName)
64    {
65        District[] disList = BaseDistrictMng.GetDistrictList();
66        District dis = new District();
67        bool isFind = false;
68        foreach (District var in disList)
69        {
70            if (var.DistrictName == districtName)
71            {
72                isFind = true;
73                dis = var;
74            }

75        }

76        if (isFind)
77        {
78            string allName = dis.ParentDistrict.ParentDistrict.DistrictName + dis.ParentDistrict.DistrictName + dis.DistrictName; 
79            return allName+","+dis.DistrictCode;
80        }

81        else return "0";
82    }

83  
84    /// <summary>
85    /// 选中节点
86    /// </summary>

87    public Node SelectedNode
88    {
89        get return treeDistrict.SelectedNode; }
90    }

91  
92}
然后将 DistrictSelect.ascx注册新建一个页面即可。效果如图
用showModalDialog弹出窗口和UltraWebTree树实现的行政区域(省,市,县)选择_第1张图片

用showModalDialog弹出窗口和UltraWebTree树实现的行政区域(省,市,县)选择_第2张图片确定之后关闭 showModalDialog窗口将选择值返回到DistrictSelect.ascx用户控件,对于上面完成的 distric.aspx 中 UltraWebTree加载市县级节点时时会刷新的,对于点击县级节点返回行政区域全称和查询功能是不会刷新的,这里感觉就是Anthem的一个不太好的地方,一定要由客户端发起事件,对于UltraWebTree找不到客户端nodeclick也不知如何注册。不过技术经理是很推崇的,呵呵,因为《Ajax与.Net2.0高级程序设计》这本书是他翻译的,里面主要讲的就是Anthem。

你可能感兴趣的:(JavaScript,server,C#,search,asp,textbox)