《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)后台代碼:后台綁定第一個<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 = 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 }

運行就實現動態聯動效果了,效果如下:

希望對遇到此問題的朋友有所幫助。

 

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com