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

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

 

标签声明的下拉列表

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

 

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

   1:  <ext:DropDownList runat="server" ID="DropDownList1" Resizable="True">
   2:  </ext:DropDownList>
   1:  protected void Page_Load(object sender, EventArgs e)
   2:  {
   3:      if (!IsPostBack)
   4:      {
   5:          List<string> strList = new List<string>();
   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:          List<CustomClass> myList = new List<CustomClass>();
   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增加了模拟树的下拉列表的功能,显示效果如下所示:

image

 

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

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

 

   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:          List<JQueryFeature> myList = new List<JQueryFeature>();
  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属性外,还多了另外一个属性:

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

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

 

 

中国的省市县三级联动

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

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
   2:  </asp:ScriptManager>
   3:  <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
   4:      <ContentTemplate>
   5:          <asp:DropDownList ID="dpSheng" runat="server" 
   6:                          AutoPostBack="true" OnSelectedIndexChanged="dpProvince_SelectedIndexChanged" />
   7:          <asp:DropDownList ID="dpShi" runat="server" AutoPostBack="true" 
   8:                          OnSelectedIndexChanged="dpCity_SelectedIndexChanged" />
   9:          <asp:DropDownList ID="dpXian" runat="server" AutoPostBack="false" />
  10:          <asp:UpdateProgress ID="UpdateProgress1" runat="server">
  11:              <ProgressTemplate>
  12:                  正在加载...
  13:              </ProgressTemplate>
  14:          </asp:UpdateProgress>
  15:      </ContentTemplate>
  16:      <Triggers>
  17:          <asp:AsyncPostBackTrigger ControlID="dpSheng" EventName="SelectedIndexChanged" />
  18:          <asp:AsyncPostBackTrigger ControlID="dpShi" EventName="SelectedIndexChanged" />
  19:      </Triggers>
  20:  </asp:UpdatePanel>

 

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

   1:  <ext:PageManager ID="PageManager1" runat="server" />
   2:  <ext:SimpleForm ID="SimpleForm1" Width="350px" runat="server" BodyPadding="5px" Title="简单表单">
   3:      <Items>
   4:          <ext:DropDownList ID="ddlSheng" Label="省份" runat="server"
   5:              AutoPostBack="true" OnSelectedIndexChanged="ddlSheng_SelectedIndexChanged">
   6:          </ext:DropDownList>
   7:          <ext:DropDownList ID="ddlShi" Label="地区市" runat="server"
   8:              AutoPostBack="true" OnSelectedIndexChanged="ddlShi_SelectedIndexChanged">
   9:          </ext:DropDownList>
  10:          <ext:DropDownList ID="ddlXian" Label="县区市" runat="server">
  11:          </ext:DropDownList>
  12:      </Items>
  13:  </ext:SimpleForm>

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

   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:  }

来看看显示效果:

image

 

 

小结

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

 

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

 

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

posted @ 2012-02-26 21:28 三生石上(FineUI控件) 阅读(...) 评论(...) 编辑 收藏