首页 > 代码库 > Dwz下拉菜单的二级联动

Dwz下拉菜单的二级联动

2024-07-29 08:40:26   221人阅读

       在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）后台代码：后台绑定第一个<select>下拉框代码如下：
 

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Data; 8 using System.Data.SqlClient; 9 10 public partial class main : System.Web.UI.Page {11 protected void Page_Load(object sender, EventArgs e) {12  bind();13  }14 ///<summary>15 ///绑定select下拉列表16 ///</summary>17 private void bind() {18 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";19 SqlConnection conn = new SqlConnection(sql);20 string selectStr = "select * from ProBiginfo";21  conn.Open();22 SqlCommand cmd = new SqlCommand(selectStr, conn);23 SqlDataAdapter da = new SqlDataAdapter(cmd);24 DataTable dt = new DataTable();25  da.Fill(dt);26 for (int i = 0; i < dt.Rows.Count; i++) {27 ListItem li = new ListItem();28 li.Text = dt.Rows[i]["BigClass"].ToString();29 li.Value = http://www.mamicode.com/dt.Rows[i]["ProInfoID"].ToString();30 this.province.Items.Add(li);31  }32 33  }34 }

3）最后就是选择第一个下拉框里面任何一个值会执行refUrl变量，根据上面分析combox工作模式，服务器段会返回一个json格式，我通过建了一般处理程序页面SelectList.ashx实现的。如下：
 

 1 <%@ WebHandler Language="C#" Class="SelectList" %> 2  3 using System; 4 using System.Collections; 5 using System.Configuration; 6 using System.Data; 7 using System.Linq; 8 using System.Web; 9 using System.Web.Security;10 using System.Web.UI;11 using System.Web.UI.HtmlControls;12 using System.Web.UI.WebControls;13 using System.Web.UI.WebControls.WebParts;14 using System.Xml.Linq;15 using System.Data.SqlClient;16 using System.Text;17 18 public class SelectList : IHttpHandler {19 public string bigid;20 public void ProcessRequest(HttpContext context) {21 context.Response.ContentType = "application/octet-stream";22 bigid = context.Request["id"];23  context.Response.Write(GetGoodsName(bigid));24  }25 /// <summary>26 /// 二级联动27 /// </summary>28 /// <returns></returns>29 private string GetGoodsName(string BigID) {30 31 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";32 SqlConnection conn = new SqlConnection(sql);33 string selectStr = "select * from ProSinfo where BigClassID=‘" + BigID + "‘";34 SqlCommand cmd = new SqlCommand(selectStr, conn);35 StringBuilder sbGoodsName = new StringBuilder();36 sbGoodsName.Append("[[\"-1\",\"==请选择类型==\"]");37  conn.Open();38 SqlDataReader dr = cmd.ExecuteReader();39 while (dr.Read()) {40 sbGoodsName.Append(",[");41 sbGoodsName.Append("\"" + dr["SmallID"].ToString() + "\",");42 sbGoodsName.Append("\"" + dr["ClassName"].ToString() + "\"");43 sbGoodsName.Append("]");44  }45  dr.Close();46  conn.Close();47 sbGoodsName.Append("]");48 return sbGoodsName.ToString();49  }50 public bool IsReusable {51 get {52 return false;53  }54  }55 56 }

运行就实现动态联动效果了，效果如下：

 

 

 

Dwz下拉菜单的二级联动


联系
我们