特点:1、使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。
2、支持n级。
3、封装成了服务器控件,所以使用非常简单。
4、支持在回发的时候保持状态。
5、支持修改记录的时候设置默认选项。
6、页面设置比较灵活。
7、采用DataSet作为数据的容器。
缺点:1、由于是把需要的数据一次性写入页面交给客户端,所以在网速比较慢的时候,显示页面需要比较长的时间。
可以改进的地方:1、引入json,可以把需要的数据放到单独的js文件里面,这样可以减少带宽的压力。
2、Ajax,按需所取。每次只加载需要的数据。
在线演示:使用省、市、区县的数据库进行演示。由于服务器的网速很慢,所以需要等待一下,等页面完全下载完毕之后,才可以使用,否则会出现js脚本错误。页面完全下载完毕之后就没有js脚本错误了。
在线演示:/Nonline/other/default.aspx
1、二级联动的演示
以省、市联动为例演示。提交表单后可以保持状态,可以设置选项。
在线演示直通:/Nonline/other/UniteList02.aspx
protectedvoidPage_Load(objectsender,EventArgse)
{
DataAccessLibrarydal=DALFactory.CreateDAL();
stringsql=@"SELECTAreaIDASid,AreaNameAStxtFROMBase_AreaWHERE(AreaCodeLIKE'__0000')
SELECTParentID,AreaIDASid,AreaNameAStxtFROMBase_AreaWHERE(AreaCodeLIKE'____00')AND(AreaCodeNOTLIKE'__0000')";
DataSetds=dal.ExecuteFillDataSet(sql);
this.lst_Area.DataSource=ds;
this.lst_Area.DataBind();
}
protectedvoidbtn_Save_Click(objectsender,EventArgse)
{
//提交表单后,获取联动下拉列表框的选项值
//获取ID
stringitemID=this.lst_Area.SelectedValue;
this.txt_Value.Text=itemID;
//获取text
stringitemText=this.lst_Area.SelectedText;
this.txt_Value.Text=itemID;
}
protectedvoidbtn_SetItemSelect_Click(objectsender,EventArgse)
{
//设置下拉列表框的选项
stringitemID=this.txt_SetID.TextTrimNone;
this.lst_Area.SetSelectedValue(itemID);
}
2、三级联动的演示
以省、市、区县联动为例演示。提交表单后可以保持状态,可以设置选项。
演示直通:/Nonline/other/UniteList03.aspx
(服务器的网速有点慢,网页又有点大,所以需要一点时间下载。)
protectedvoidPage_Load(objectsender,EventArgse)
{
DataAccessLibrarydal=DALFactory.CreateDAL();
stringsql=@"SELECTAreaIDASid,AreaNameAStxtFROMBase_AreaWHERE(AreaCodeLIKE'__0000')
SELECTParentID,AreaIDASid,AreaNameAStxtFROMBase_AreaWHERE(AreaCodeLIKE'____00')AND(AreaCodeNOTLIKE'__0000')
SELECTParentID,AreaIDASid,AreaNameAStxtFROMBase_AreaWHERE(AreaCodeNOTLIKE'__0000')AND(AreaCodeNOTLIKE'____00')";
DataSetds=dal.ExecuteFillDataSet(sql);
this.lst_Area.DataSource=ds;
this.lst_Area.DataBind();
}
与二级联动的代码相对比,只是SQL语句的地方不同,即多了一条SQL语句。其他的都是一样的。同理,如果是四级的,那么就在多一条SQL语句。
n级联动,那么就需要n条SQL语句。
3、修改记录演示
一般在修改记录的时候,需要根据记录里的信息设置列表框的选项,这里演示了这种功能。
演示直通:/Nonline/other/UniteListUpdate.aspx
增加下面这样的代码即可。
if(!Page.IsPostBack)
{
//6,568,572是“辽宁省,抚顺市,望花区”对于的ID
//实际项目中,是从数据库里获取,然后设置,这里只是一个实例
this.lst_Area.SetSelectedValue("6,568,572");
}
4、页面修饰演示
您看了上面的演示,可呢会觉得几个下拉列表框挨在一起太难看了,这里演示如何来做修饰。这个可以在下拉列表框的前面,加上一些修饰。
演示直通:/Nonline/other/UniteListHTML.aspx
protectedvirtualvoidSetHTML()
{
//一行里,下拉列表框前面加说明的方法
string[]html=newstring[6];
html[0]="省份:";
html[2]="城市:";
html[4]="区/县:";
this.lst_Area.ListHTML=html;
}
5、Table形式的表单
在表单里,如果是table形式的话,一行里只想显示一个列表框,那么要如何设置呢?
演示直通:/Nonline/other/UniteListHTML_table.aspx
省份、城市、区县各占一行的形式。
protectedoverridevoidSetHTML()
{
//多行表格的方法
string[]html=newstring[6];
html[0]="";
html[1]="</td></tr>";
html[2]="<tr><tdalign=\"right\">城市:</td><td>";
html[3]="</td></tr>";
html[4]="<tr><tdalign=\"right\">区/县:</td><td>";
this.lst_Area.ListHTML=html;
}
6、Div形式的表单
在表单里,如果是div形式,一行里只想显示一个列表框,那么又要如何设置呢?
演示直通:/Nonline/other/UniteListHTML_div.aspx
省份、城市、区县各占一行的形式。
protectedoverridevoidSetHTML()
{
//多行表格的方法
string[]html=newstring[6];
html[0]="";
html[1]="</div>";
html[2]="<divclass=\"formLeft\">城市:</div><divclass=\"formRight\">";
html[3]="</div>";
html[4]="<divclass=\"formLeft\">区/县:</div><divclass=\"formRight\">";
this.lst_Area.ListHTML=html;
}
注意:
由于控件自身并没有保存数据,所以每次访问的时候,都需要设置DataSource 属性,并且需要绑定(DataBind)。这一点和一般的服务器控件不一样。
设置选项的时候,需要在 if (!Page.IsPostBack) 内设置,否则无法得到用户的选择。
源码下载:/down/List1.aspx