[原创]FineUI秘密花园（八） — 下拉列表控件

下拉列表也是Web开发中常用的控件之一，用来从一组可选项中选取一项。FineUI中的下拉列表不仅可以通过ASPX标签声明，也可以绑定到各种数据源。FineUI还根据实际项目的需要，扩展了一种模拟树的下拉列表。

标签声明的下拉列表

<ext:DropDownList runat="server" ID="DropDownList1">
    <ext:ListItem Text="选项 1" Value="Value1" Selected="true" />
    <ext:ListItem Text="选项 2（不可选择）" Value="Value2" EnableSelect="false" />
    <ext:ListItem Text="选项 3（不可选择）" Value="Value3" EnableSelect="false" />
    <ext:ListItem Text="选项 4" Value="Value4" />
</ext:DropDownList>

绑定到字符串列表的下拉列表

<ext:DropDownList runat="server" ID="DropDownList1" Resizable="True">
</ext:DropDownList>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<string> strList = new List<string>();
        strList.Add("选项 1");
        strList.Add("选项 2");
        strList.Add("选项 3");
        strList.Add("选项 4");

        DropDownList1.DataSource = strList;
        DropDownList1.DataBind();
    }
}

绑定到自定义类列表的下拉列表

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<CustomClass> myList = new List<CustomClass>();
        myList.Add(new CustomClass("1", "选项 1"));
        myList.Add(new CustomClass("2", "选项 2"));
        myList.Add(new CustomClass("3", "选项 3"));
        myList.Add(new CustomClass("4", "选项 4"));

        DropDownList1.DataTextField = "Name";
        DropDownList1.DataValueField = "ID";
        DropDownList1.DataSource = myList;
        DropDownList1.DataBind();
    }
}


public class CustomClass
{
    private string _id;

    public string ID
    {
        get { return _id; }
        set { _id = value; }
    }
    private string _name;

    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    public CustomClass(string id, string name)
    {
        _id = id;
        _name = name;
    }
}

绑定到表格的下拉列表

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable table = new DataTable();
        DataColumn column1 = new DataColumn("MyText", typeof(String));
        DataColumn column2 = new DataColumn("MyValue", typeof(String));
        table.Columns.Add(column1);
        table.Columns.Add(column2);

        DataRow row = table.NewRow();
        row[0] = "选项 1";
        row[1] = "1";
        table.Rows.Add(row);
        row = table.NewRow();

        row[0] = "选项 2";
        row[1] = "2";
        table.Rows.Add(row);

        row = table.NewRow();
        row[0] = "选项 3";
        row[1] = "3";
        table.Rows.Add(row);

        row = table.NewRow();
        row[0] = "选项 4";
        row[1] = "4";
        table.Rows.Add(row);

        DropDownList1.DataTextField = "MyText";
        DropDownList1.DataValueField = "MyValue";
        DropDownList1.DataSource = table;
        DropDownList1.DataBind();
    }
}

模拟树的下拉列表

很多时候，我们希望在下拉列表中显示简单树状的层次结构，在菜单设置、机构设置等场景下这个需求尤为突出。也是基于项目需求的考虑，FineUI增加了模拟树的下拉列表的功能，显示效果如下所示：

注意，这里不仅包含了树状的层次结构，而且包含了可选择项和不可选择项。下面就来看看如何实现这个示例：

<ext:DropDownList Label="DropDownList" AutoPostBack="false" Required="true" EnableSimulateTree="true"
        ShowRedStar="true" runat="server" ID="ddlBox">
</ext:DropDownList>

public class JQueryFeature
{
    private string _id;
    public string Id
    {
        get { return _id; }
        set { _id = value; }
    }

    private string _name;
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    private int _level;
    public int Level
    {
        get { return _level; }
        set { _level = value; }
    }

    private bool _enableSelect;
    public bool EnableSelect
    {
        get { return _enableSelect; }
        set { _enableSelect = value; }
    }

    public JQueryFeature(string id, string name, int level, bool enableSelect)
    {
        _id = id;
        _name = name;
        _level = level;
        _enableSelect = enableSelect;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<JQueryFeature> myList = new List<JQueryFeature>();
        myList.Add(new JQueryFeature("0", "jQuery", 0, false));
        myList.Add(new JQueryFeature("1", "核心", 1, false));
        myList.Add(new JQueryFeature("2", "选择符", 1, false));
        myList.Add(new JQueryFeature("3", "基本选择符", 2, true));
        myList.Add(new JQueryFeature("4", "内容选择符", 2, true));
        myList.Add(new JQueryFeature("5", "属性选择符", 2, true));
        myList.Add(new JQueryFeature("6", "筛选", 1, false));
        myList.Add(new JQueryFeature("7", "过滤", 2, true));
        myList.Add(new JQueryFeature("8", "查找", 2, true));
        myList.Add(new JQueryFeature("9", "事件", 1, false));
        myList.Add(new JQueryFeature("10", "页面载入", 2, true));
        myList.Add(new JQueryFeature("11", "事件处理", 2, true));
        myList.Add(new JQueryFeature("12", "事件委托", 2, true));

        ddlBox.DataTextField = "Name";
        ddlBox.DataValueField = "Id";
        ddlBox.DataSimulateTreeLevelField = "Level";
        ddlBox.DataEnableSelectField = "EnableSelect";
        ddlBox.DataSource = myList;
        ddlBox.DataBind();

        ddlBox.SelectedValue = "3";
    }
}

除了正常数据绑定中常见的DataTextField、DataValueField、DataSource、DataEnableSelectField属性外，还多了另外一个属性：

1. DataSimulateTreeLevelField：模拟树显示时指示所在层次的数据字段。

开发人员只需要简单地多计算一个字段，剩下页面上的渲染工作就全部交给FineUI完成了，是不是很方便。

中国的省市县三级联动

相信很多开发人员都在ASP.NET AJAX环境下实现过类似的效果，在ASPX中需要一堆的标签支持，下面给出了一个可能的实现：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:DropDownList ID="dpSheng" runat="server"
                        AutoPostBack="true" OnSelectedIndexChanged="dpProvince_SelectedIndexChanged" />
        <asp:DropDownList ID="dpShi" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="dpCity_SelectedIndexChanged" />
        <asp:DropDownList ID="dpXian" runat="server" AutoPostBack="false" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                正在加载...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="dpSheng" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="dpShi" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

下面再来看看FineUI中如何实现同样的功能，并且视觉效果会更加有冲击力：

<ext:PageManager ID="PageManager1" runat="server" />
<ext:SimpleForm ID="SimpleForm1" Width="350px" runat="server" BodyPadding="5px" Title="简单表单">
    <Items>
        <ext:DropDownList ID="ddlSheng" Label="省份" runat="server"
            AutoPostBack="true" OnSelectedIndexChanged="ddlSheng_SelectedIndexChanged">
        </ext:DropDownList>
        <ext:DropDownList ID="ddlShi" Label="地区市" runat="server"
            AutoPostBack="true" OnSelectedIndexChanged="ddlShi_SelectedIndexChanged">
        </ext:DropDownList>
        <ext:DropDownList ID="ddlXian" Label="县区市" runat="server">
        </ext:DropDownList>
    </Items>
</ext:SimpleForm>

是不是很简单，没有任何额外的标签，只是一个表单控件里面放三个下拉列表，再来看看后台代码：

private readonly static JSONArray SHENG_JSON = new JSONArray("[\"北京\",\"天津\",\"上海\",\"重庆\"]");
private readonly static JSONObject SHI_JSON = new JSONObject("{\"北京\":[\"北京市\"],\"天津\":[\"天津市\"],\"上海\":[\"上海市\"]}");
private readonly static JSONObject XIAN_JSON = new JSONObject("{\"北京市\":[\"东城区\",\"西城区\"],\"天津市\":[\"和平区\",\"河东区\"]}");

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindSheng();
        BindShi();
        BindXian();
    }
}

private void BindSheng()
{
    ddlSheng.DataSource = SHENG_JSON.getArrayList();
    ddlSheng.DataBind();

    ddlSheng.Items.Insert(0, new ListItem("选择省份", "-1"));
}

private void BindShi()
{
    string sheng = ddlSheng.SelectedValue;

    if (sheng != "-1")
    {
        JSONArray ja = SHI_JSON.getJSONArray(sheng);
        ddlShi.DataSource = ja.getArrayList();
        ddlShi.DataBind();
    }

    ddlShi.Items.Insert(0, new ListItem("选择地区市", "-1"));
}

private void BindXian()
{
    string shi = ddlShi.SelectedValue;

    if (shi != "-1")
    {
        JSONArray ja = XIAN_JSON.getJSONArray(shi);
        ddlXian.DataSource = ja.getArrayList();
        ddlXian.DataBind();
    }

    ddlXian.Items.Insert(0, new ListItem("选择县级市", "-1"));
}

protected void ddlSheng_SelectedIndexChanged(object sender, EventArgs e)
{
    ddlShi.Items.Clear();
    BindShi();

    ddlXian.Items.Clear();
    BindXian();
}

protected void ddlShi_SelectedIndexChanged(object sender, EventArgs e)
{
    ddlXian.Items.Clear();
    BindXian();
}

来看看显示效果：

小结

每个Web开发人员都应该掌握下拉列表控件的用法，特别是从数据库读取数据并绑定到下拉列表。FineUI还别出心裁地提供了模拟树的下拉列表，服务于实际的项目需要。FineUI原生的AJAX支持也使得下拉列表之间的联动变得非常简单。

下一篇文章我们会探讨一下表单控件的客户端验证，FineUI提供了丰富完善的验证规则，包括从必填项、最大值、最小值到控件的比较，正则表达式验证等丰富的选项。

注：《FineUI秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛