FineUI模拟树下拉列表

模拟树的下拉列表

很多时候，我们希望在下拉列表中显示简单树状的层次结构，在菜单设置、机构设置等场景下这个需求尤为突出。也是基于项目需求的考虑，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完成了，是不是很方便。