《DWZ笔记一》动态联动菜单

       联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 

       在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref。 

       ref 属性则是为了做级联定义的,ref所指向的则是当前combox值改变成引起联动的下一级combox,ref用下一级combox的id属性来赋值。注意:一般combox没必要设置id属性,只要级联时需要设置子级id等于父级ref,不同navTab和dialog中combox组件id必须唯一

    以下是DWZ框架里面的示例代码:  

 1 <h2 class="contentTitle">下拉菜单h2>
 2 
 3 <div class="pageContent" layoutH="56">
 4     <select class="combox" name="province" ref="w_combox_city" refUrl="demo/combox/city_{value}.html">
 5         <option value="all">所有省市option>
 6         <option value="bj">北京option>
 7         <option value="sh">上海option>
 8     select>
 9     <select class="combox" name="city" id="w_combox_city" ref="w_combox_area" refUrl="demo/combox/area_{value}.html">
10         <option value="all">所有城市option>
11     select>
12     <select class="combox" name="area" id="w_combox_area">
13         <option value="all">所有区县option>
14     select>
15 div>

   服务器端返回格式:
 

1 [
2     ["all", "所有城市"],
3     ["bj", "北京市"]
4 ]

  根据以上可以看出,combox的工作模式是这样的,当一级菜单的某个选项选中时,就会执行相应的refUrl=“X.action",通过服务器返回json格式的页面后,并根据一级菜单中定义的ref="XXX"来寻找二级菜单中id=“XXX”,将返回的json页面放入二级菜单中,与此同时,如果还有三级菜单的话,由于二级菜单的数据的改变,二级菜单中也会执行其相应的refUrl,随后服务器同样返回json格式页面,寻找与ref匹配的id三级菜单进行联动..以此类推。

  下面我就简单写了个例子给大家演示以下一个二级动态联动效果:

  1)首先我新建了一个index.aspx页面,这是前台html代码:

  

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %>
 2 
 3 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <title>title>
 8     
 9 head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13     <select class="combox" id="province"  name="province" ref="w_combox_city" refUrl="SelectList.ashx?id={value}" runat="server">
14         <option value="all">所有类型option>
15     select>
16     <select class="combox" name="city" id="w_combox_city">
17 
18     select>
19     div>
20     form>
21 body>
22 html>

 2)后台代码:后台绑定第一个