zoukankan      html  css  js  c++  java
  • 《DWZ笔记一》<select>动态联动菜单

           联动菜单,即组合框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 }

    运行就实现动态联动效果了,效果如下:

    希望对遇到此问题的朋友有所帮助。

  • 相关阅读:
    Linux下判断字符串长度
    Linux下使用xargs得到字符串作为参数进行输出、awk得到字符串作为参数进行输出
    Linux下使用xargs将多行文本转换成一行并用tr实现逗号隔开
    Linux下使用split按行数进行切割
    Maven设置snapshot无法在远程仓库下载的问题解决
    Intellij IDEA自动生成serialVersionUID
    Spring中@Value用法收集
    Http报头Accept与Content-Type的区别(转)
    Linux下Shell的for循环语句
    Shell脚本中的分号使用
  • 原文地址:https://www.cnblogs.com/dyhdream/p/3443472.html
Copyright © 2011-2022 走看看