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

最新推荐文章于 2022-07-18 16:48:01 发布

iteye_11002

最新推荐文章于 2022-07-18 16:48:01 发布

阅读量159

点赞数

文章标签： javascript xhtml c# ViewUI

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

HTMLCode
1

<%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="DistrictSelect.ascx.cs"
2

Inherits="Common_DistrictSelect"%>
3

<scripttype="text/javascript"language="javascript">
5

functionopenwin()
6

{
7

varstr=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

<div>
16

<asp:TextBoxID="txt_district"runat="server"></asp:TextBox>
17

<asp:Buttonrunat="server"ID="btn_select"Text="选择"OnClientClick="openwin()"/>
18

<asp:HiddenFieldID="hf_district"runat="server"/>
19

</div>
20

接下来是 district.aspx页面了，引入了Anthem

HTMLCode
1

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="district.aspx.cs"Inherits="district"%>
2

<%@RegisterAssembly="Infragistics2.WebUI.UltraWebNavigator.v7.1,Version=7.1.20071.40,Culture=neutral,PublicKeyToken=7dd5c3163f2cd0cb"
4

Namespace="Infragistics.WebUI.UltraWebNavigator"TagPrefix="ignav"%>
5

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6

<htmlxmlns="http://www.w3.org/1999/xhtml">
7

<headrunat="server">
8

<title>无标题页</title>
9

<scripttype="text/javascript"language="javascript">
10

{
11

functiongetTreeNode()
12

{
13

varname=document.getElementById('btn_search').value;
14

if(name=="查找")//如果按钮的值查找查询下级节点
16

{
17

Anthem_InvokePageMethod('findTreeNode',[document.getElementById('txt_condition').value],showResult);
19

}
20

else//判断txt_condition是否为空，不为空将值返回父窗口，关闭当前窗口
21

{
22

vardistrict=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

functionshowResult(result)
38

{
39

varstr=result.value.split(",");
41

if(str[0]=="0")
42

{
43

alert("找不到匹配的行政区,请重新输入!");
44

}
45

else
46

{
47

vartxt=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

}
57

</script>
58

</head>
60

<body>
61

<formid="form1"runat="server">
62

<div>
63

<spanstyle="font-size:12pt">请选择行政区域</span>
64

<divstyle="width:420px;height:40px;"align="center">
65

<inputid="txt_condition"type="text"runat="server"style="width:300px"/>
66

<inputid="btn_search"type="button"value="查找"onclick="getTreeNode()"runat="server"/>
67

<asp:HiddenFieldID="hf_districtCode"runat="server"/>
68

</div>
69

</div>
71

<divstyle="width:150px;font-size:10pt"id="province">
72

<ignav:UltraWebTreeID="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里面

csCode
1

publicpartialclassdistrict:System.Web.UI.Page
2

{
3

protectedvoidPage_Load(objectsender,EventArgse)
4

{
5

Anthem.Manager.Register(this);//anthemManager注册
6

if(!Page.IsPostBack)
7

{
8

District[]dis=BaseDistrictMng.GetAllProvinces();
9

foreach(Districtprovinceindis)//加载省级行政单位
10

{
11

NoderootNode=newNode();
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("<basetarget=_self/>");
23

}
25

protectedvoidtreeDistrict_OnNodeClicked(objectsender,WebTreeNodeEventArgse)
27

{
28

stringdistrictcode=SelectedNode.DataKey.ToString();;
29

stringdistrictname=SelectedNode.Text;
30

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

Districtdd=BaseDistrictMng.GetDistrictById(districtcode);
40

stringallName=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

}
46

}
47

//填充子节点
48

protectedvoidfillTreeNode(NoderootNode,District[]dis)
49

{
50

foreach(Districtvarindis)
51

{
52

Nodenode=newNode();
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

publicstringfindTreeNode(stringdistrictName)
64

{
65

District[]disList=BaseDistrictMng.GetDistrictList();
66

Districtdis=newDistrict();
67

boolisFind=false;
68

foreach(DistrictvarindisList)
69

{
70

if(var.DistrictName==districtName)
71

{
72

isFind=true;
73

dis=var;
74

}
75

}
76

if(isFind)
77

{
78

stringallName=dis.ParentDistrict.ParentDistrict.DistrictName+dis.ParentDistrict.DistrictName+dis.DistrictName;
79

returnallName+","+dis.DistrictCode;
80

}
81

elsereturn"0";
82

}
83

/**////<summary>
85

///选中节点
86

///</summary>
87

publicNodeSelectedNode
88

{
89

get

{returntreeDistrict.SelectedNode;}
90

}
91

}

然后将 DistrictSelect.ascx注册新建一个页面即可。效果如图

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