下拉列表也是Web开发中常用的控件之一，用来从一组可选项中选取一项。FineUI中的下拉列表不仅可以通过ASPX标签声明，也可以绑定到各种数据源。FineUI还根据实际项目的需要，扩展了一种模拟树的下拉列表。
标签声明的下拉列表
1:
2:
3:
4:
5:
6:
绑定到字符串列表的下拉列表
1:
2:
1: protected void Page_Load(object sender, EventArgs e)
2: { 3: if (!IsPostBack)
4: { 5: ListstrList = new List ();
6: strList.Add("选项 1"); 7: strList.Add("选项 2"); 8: strList.Add("选项 3"); 9: strList.Add("选项 4"); 10:
11: DropDownList1.DataSource = strList;
12: DropDownList1.DataBind();
13: }
14: }
绑定到自定义类列表的下拉列表
1: protected void Page_Load(object sender, EventArgs e)
2: { 3: if (!IsPostBack)
4: { 5: ListmyList = new List ();
6: myList.Add(new CustomClass("1", "选项 1")); 7: myList.Add(new CustomClass("2", "选项 2")); 8: myList.Add(new CustomClass("3", "选项 3")); 9: myList.Add(new CustomClass("4", "选项 4")); 10:
11: DropDownList1.DataTextField = "Name";
12: DropDownList1.DataValueField = "ID";
13: DropDownList1.DataSource = myList;
14: DropDownList1.DataBind();
15: }
16: }
17:
18:
19: public class CustomClass
20: { 21: private string _id;
22:
23: public string ID
24: { 25: get { return _id; } 26: set { _id = value; } 27: }
28: private string _name;
29:
30: public string Name
31: { 32: get { return _name; } 33: set { _name = value; } 34: }
35:
36: public CustomClass(string id, string name)
37: { 38: _id = id;
39: _name = name;
40: }
41: }
绑定到表格的下拉列表
1: protected void Page_Load(object sender, EventArgs e)
2: { 3: if (!IsPostBack)
4: { 5: DataTable table = new DataTable();
6: DataColumn column1 = new DataColumn("MyText", typeof(String)); 7: DataColumn column2 = new DataColumn("MyValue", typeof(String)); 8: table.Columns.Add(column1);
9: table.Columns.Add(column2);
10:
11: DataRow row = table.NewRow();
12: row[0] = "选项 1";
13: row[1] = "1";
14: table.Rows.Add(row);
15: row = table.NewRow();
16:
17: row[0] = "选项 2";
18: row[1] = "2";
19: table.Rows.Add(row);
20:
21: row = table.NewRow();
22: row[0] = "选项 3";
23: row[1] = "3";
24: table.Rows.Add(row);
25:
26: row = table.NewRow();
27: row[0] = "选项 4";
28: row[1] = "4";
29: table.Rows.Add(row);
30:
31: DropDownList1.DataTextField = "MyText";
32: DropDownList1.DataValueField = "MyValue";
33: DropDownList1.DataSource = table;
34: DropDownList1.DataBind();
35: }
36: }
模拟树的下拉列表
很多时候，我们希望在下拉列表中显示简单树状的层次结构，在菜单设置、机构设置等场景下这个需求尤为突出。也是基于项目需求的考虑，FineUI增加了模拟树的下拉列表的功能，显示效果如下所示：
注意，这里不仅包含了树状的层次结构，而且包含了可选择项和不可选择项。下面就来看看如何实现这个示例：
1:
2: ShowRedStar="true" runat="server" ID="ddlBox">
3:
1: public class JQueryFeature
2: { 3: private string _id;
4: public string Id
5: { 6: get { return _id; } 7: set { _id = value; } 8: }
9:
10: private string _name;
11: public string Name
12: { 13: get { return _name; } 14: set { _name = value; } 15: }
16:
17: private int _level;
18: public int Level
19: { 20: get { return _level; } 21: set { _level = value; } 22: }
23:
24: private bool _enableSelect;
25: public bool EnableSelect
26: { 27: get { return _enableSelect; } 28: set { _enableSelect = value; } 29: }
30:
31: public JQueryFeature(string id, string name, int level, bool enableSelect)
32: { 33: _id = id;
34: _name = name;
35: _level = level;
36: _enableSelect = enableSelect;
37: }
38: }
39:
40: protected void Page_Load(object sender, EventArgs e)
41: { 42: if (!IsPostBack)
43: { 44: ListmyList = new List ();
45: myList.Add(new JQueryFeature("0", "jQuery", 0, false)); 46: myList.Add(new JQueryFeature("1", "核心", 1, false)); 47: myList.Add(new JQueryFeature("2", "选择符", 1, false)); 48: myList.Add(new JQueryFeature("3", "基本选择符", 2, true)); 49: myList.Add(new JQueryFeature("4", "内容选择符", 2, true)); 50: myList.Add(new JQueryFeature("5", "属性选择符", 2, true)); 51: myList.Add(new JQueryFeature("6", "筛选", 1, false)); 52: myList.Add(new JQueryFeature("7", "过滤", 2, true)); 53: myList.Add(new JQueryFeature("8", "查找", 2, true)); 54: myList.Add(new JQueryFeature("9", "事件", 1, false)); 55: myList.Add(new JQueryFeature("10", "页面载入", 2, true)); 56: myList.Add(new JQueryFeature("11", "事件处理", 2, true)); 57: myList.Add(new JQueryFeature("12", "事件委托", 2, true)); 58:
59: ddlBox.DataTextField = "Name";
60: ddlBox.DataValueField = "Id";
61: ddlBox.DataSimulateTreeLevelField = "Level";
62: ddlBox.DataEnableSelectField = "EnableSelect";
63: ddlBox.DataSource = myList;
64: ddlBox.DataBind();
65:
66: ddlBox.SelectedValue = "3";
67: }
68: }
除了正常数据绑定中常见的DataTextField、DataValueField、DataSource、DataEnableSelectField属性外，还多了另外一个属性：
- DataSimulateTreeLevelField：模拟树显示时指示所在层次的数据字段。
开发人员只需要简单地多计算一个字段，剩下页面上的渲染工作就全部交给FineUI完成了，是不是很方便。
中国的省市县三级联动
相信很多开发人员都在ASP.NET AJAX环境下实现过类似的效果，在ASPX中需要一堆的标签支持，下面给出了一个可能的实现：
1:
2:
3:
4:
5:
6: AutoPostBack="true" OnSelectedIndexChanged="dpProvince_SelectedIndexChanged" />
7:
8: OnSelectedIndexChanged="dpCity_SelectedIndexChanged" />
9:
10:
11:
12: 正在加载...
13:
14:
15:
16:
17:
18:
19:
20:
下面再来看看FineUI中如何实现同样的功能，并且视觉效果会更加有冲击力：
1:
2:
3:
4:
5: AutoPostBack="true" OnSelectedIndexChanged="ddlSheng_SelectedIndexChanged">
6:
7:
8: AutoPostBack="true" OnSelectedIndexChanged="ddlShi_SelectedIndexChanged">
9:
10:
11:
12:
13:
是不是很简单，没有任何额外的标签，只是一个表单控件里面放三个下拉列表，再来看看后台代码：
1: private readonly static JSONArray SHENG_JSON = new JSONArray("[\"北京\",\"天津\",\"上海\",\"重庆\"]"); 2: private readonly static JSONObject SHI_JSON = new JSONObject("{\"北京\":[\"北京市\"],\"天津\":[\"天津市\"],\"上海\":[\"上海市\"]}"); 3: private readonly static JSONObject XIAN_JSON = new JSONObject("{\"北京市\":[\"东城区\",\"西城区\"],\"天津市\":[\"和平区\",\"河东区\"]}"); 4:
5: protected void Page_Load(object sender, EventArgs e)
6: { 7: if (!IsPostBack)
8: { 9: BindSheng();
10: BindShi();
11: BindXian();
12: }
13: }
14:
15: private void BindSheng()
16: { 17: ddlSheng.DataSource = SHENG_JSON.getArrayList();
18: ddlSheng.DataBind();
19:
20: ddlSheng.Items.Insert(0, new ListItem("选择省份", "-1")); 21: }
22:
23: private void BindShi()
24: { 25: string sheng = ddlSheng.SelectedValue;
26:
27: if (sheng != "-1")
28: { 29: JSONArray ja = SHI_JSON.getJSONArray(sheng);
30: ddlShi.DataSource = ja.getArrayList();
31: ddlShi.DataBind();
32: }
33:
34: ddlShi.Items.Insert(0, new ListItem("选择地区市", "-1")); 35: }
36:
37: private void BindXian()
38: { 39: string shi = ddlShi.SelectedValue;
40:
41: if (shi != "-1")
42: { 43: JSONArray ja = XIAN_JSON.getJSONArray(shi);
44: ddlXian.DataSource = ja.getArrayList();
45: ddlXian.DataBind();
46: }
47:
48: ddlXian.Items.Insert(0, new ListItem("选择县级市", "-1")); 49: }
50:
51: protected void ddlSheng_SelectedIndexChanged(object sender, EventArgs e)
52: { 53: ddlShi.Items.Clear();
54: BindShi();
55:
56: ddlXian.Items.Clear();
57: BindXian();
58: }
59:
60: protected void ddlShi_SelectedIndexChanged(object sender, EventArgs e)
61: { 62: ddlXian.Items.Clear();
63: BindXian();
64: }
来看看显示效果：
小结
每个Web开发人员都应该掌握下拉列表控件的用法，特别是从数据库读取数据并绑定到下拉列表。FineUI还别出心裁地提供了模拟树的下拉列表，服务于实际的项目需要。FineUI原生的AJAX支持也使得下拉列表之间的联动变得非常简单。
下一篇文章我们会探讨一下表单控件的客户端验证，FineUI提供了丰富完善的验证规则，包括从必填项、最大值、最小值到控件的比较，正则表达式验证等丰富的选项。
注：《FineUI秘密花园》系列文章由原创，博客园首发，转载请注明出处。