0

asp.netのコンボボックス/ドロップダウンリスト内に複数の列とヘッダーを表示し、関連する列の値を表示することは可能ですか？たとえば、国名をクリックすると、その国のすべての都市が表示され、都市名をクリックすると、関連するすべての場所が表示されます。

利用可能なサードパーティのコントロールはありますか？telerikをチェックしましたが、複数の列を持つコンボボックスがありますが、関連する値はありません。

4

2 に答える 2

1

これがあなたが始めるのに役立つことを願っています。

ここに画像の説明を入力してください

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox3" runat="server">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

public class Country
{
  public int Id { get; set; }
  public string Name { get; set; }
  public int Population  { get; set; }
}

public class State
{
  public int Id { get; set; }
  public int CountryId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public class City
{
  public int Id { get; set; }
  public int StateId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public List<Country> Countries
{
  get
  {
    return new List<Country>
      {
        new Country {Id = 1, Name = "United States", Population = 1000},
        new Country {Id = 2, Name = "Canada", Population = 2000},
        new Country {Id = 3, Name = "Mexico", Population = 3000}
      };
  }
}


public List<State> States
{
  get
  {
    return new List<State>
      {
        new State {Id = 1, CountryId = 1, Name = "California", Population = 100},
        new State {Id = 2, CountryId = 1, Name = "New York", Population = 200},
        new State {Id = 3, CountryId = 2, Name = "Quebec", Population = 300},
        new State {Id = 4, CountryId = 2, Name = "Ontario", Population = 400}
      };
  }
}


public List<City> Cities
{
  get
  {
    return new List<City>
      {
        new City {Id = 1, StateId = 1, Name = "Los Angeles", Population = 10},
        new City {Id = 2, StateId = 1, Name = "San Diego", Population = 20},
        new City {Id = 3, StateId = 1, Name = "San Francisco", Population = 30},
        new City {Id = 4, StateId = 1, Name = "San Joe", Population = 40},
        new City {Id = 5, StateId = 2, Name = "New York", Population = 50},
        new City {Id = 6, StateId = 2, Name = "Paterson", Population = 60},
        new City {Id = 7, StateId = 2, Name = "Newark", Population = 70},
        new City {Id = 8, StateId = 2, Name = "Smithtown", Population = 80},
      };
  }
}

protected void Page_Load(object sender, EventArgs e)
{
  if(!IsPostBack)
  {
    RadComboBox1.DataSource = Countries;
    RadComboBox1.DataValueField = "Id";
    RadComboBox1.DataTextField = "Name";
    RadComboBox1.DataBind();

    RadComboBox1.Items.Insert(0, new RadComboBoxItem("Select Country", ""));
  }
}

protected void RadComboBox1_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox2.Items.Clear();
  RadComboBox3.Items.Clear();

  int countryId;
  if (Int32.TryParse(e.Value, out countryId))
  {
    RadComboBox2.DataSource = States.Where(s => s.CountryId == countryId);
    RadComboBox2.DataValueField = "Id";
    RadComboBox2.DataTextField = "Name";
    RadComboBox2.DataBind();

    RadComboBox2.Items.Insert(0, new RadComboBoxItem("Select State", ""));
  }
}

protected void RadComboBox2_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox3.Items.Clear();

  int stateId;
  if (Int32.TryParse(e.Value, out stateId))
  {
    RadComboBox3.DataSource = Cities.Where(c => c.StateId == stateId);
    RadComboBox3.DataValueField = "Id";
    RadComboBox3.DataTextField = "Name";
    RadComboBox3.DataBind();

    RadComboBox3.Items.Insert(0, new RadComboBoxItem("Select City", ""));
  }
}
于 2012-06-07T04:19:00.590 に答える
1

séごとの「関連する」値についてはわかりません。ただし、それを自分で開発する必要があるかもしれません。

Telerikの他に、jQueryを使用してもかまわない場合は、複数列/ヘッダーの側面を実現するために無料で使用できるプラグインをいくつか紹介します。

あなたがこのグーグル検索を使用することでピークを迎えることができる他のいくつかがあります。

役立つリファレンス：jQuery

于 2012-06-05T17:35:05.470 に答える