Dwz下拉菜单的二级联动

时间:2023-11-24 14:49:56

在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框架里面的示例代码:

Dwz下拉菜单的二级联动
 <h2 class="contentTitle">下拉菜单</h2>

 <div class="pageContent" layoutH="56">
<select class="combox" name="province" ref="w_combox_city" refUrl="demo/combox/city_{value}.html">
<option value="all">所有省市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select class="combox" name="city" id="w_combox_city" ref="w_combox_area" refUrl="demo/combox/area_{value}.html">
<option value="all">所有城市</option>
</select>
<select class="combox" name="area" id="w_combox_area">
<option value="all">所有区县</option>
</select>
</div>
Dwz下拉菜单的二级联动

服务器端返回格式:

 [
["all", "所有城市"],
["bj", "北京市"]
]

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

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

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

Dwz下拉菜单的二级联动
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title> </head>
<body>
<form id="form1" runat="server">
<div>
<select class="combox" id="province" name="province" ref="w_combox_city" refUrl="SelectList.ashx?id={value}" runat="server">
<option value="all">所有类型</option>
</select>
<select class="combox" name="city" id="w_combox_city"> </select>
</div>
</form>
</body>
</html>
Dwz下拉菜单的二级联动

2)后台代码:后台绑定第一个<select>下拉框代码如下:

Dwz下拉菜单的二级联动
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient; public partial class main : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
bind();
}
///<summary>
///绑定select下拉列表
///</summary>
private void bind() {
string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";
SqlConnection conn = new SqlConnection(sql);
string selectStr = "select * from ProBiginfo";
conn.Open();
SqlCommand cmd = new SqlCommand(selectStr, conn);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
for (int i = ; i < dt.Rows.Count; i++) {
ListItem li = new ListItem();
li.Text = dt.Rows[i]["BigClass"].ToString();
li.Value = dt.Rows[i]["ProInfoID"].ToString();
this.province.Items.Add(li);
} }
}
Dwz下拉菜单的二级联动

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

Dwz下拉菜单的二级联动
 <%@ WebHandler Language="C#" Class="SelectList" %>

 using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text; public class SelectList : IHttpHandler {
public string bigid;
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "application/octet-stream";
bigid = context.Request["id"];
context.Response.Write(GetGoodsName(bigid));
}
/// <summary>
/// 二级联动
/// </summary>
/// <returns></returns>
private string GetGoodsName(string BigID) { string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";
SqlConnection conn = new SqlConnection(sql);
string selectStr = "select * from ProSinfo where BigClassID='" + BigID + "'";
SqlCommand cmd = new SqlCommand(selectStr, conn);
StringBuilder sbGoodsName = new StringBuilder();
sbGoodsName.Append("[[\"-1\",\"==请选择类型==\"]");
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read()) {
sbGoodsName.Append(",[");
sbGoodsName.Append("\"" + dr["SmallID"].ToString() + "\",");
sbGoodsName.Append("\"" + dr["ClassName"].ToString() + "\"");
sbGoodsName.Append("]");
}
dr.Close();
conn.Close();
sbGoodsName.Append("]");
return sbGoodsName.ToString();
}
public bool IsReusable {
get {
return false;
}
} }
Dwz下拉菜单的二级联动

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

Dwz下拉菜单的二级联动