iT邦幫忙

0

[已解決] 加入 bootstrap 到動態建立的 asp:CheckBoxList

大家好,
我是剛接觸 bootstrap 的超新手,最近在幫實習的公司寫一個內部的 Project 要用網頁呈現。主管的要求是,這個 CheckBoxList 的東西要存在 web.config 裡而不是寫死在 code 裡,以後好做更動,然後網頁為了配合公司已經有的其他應用,必須要用 bootstrap 來設定 UI。
為了視覺上統一,這個 CheckBoxList 要用到 custom-control 可是他似乎無法如此簡單的加到 CheckBoxList 或他底下的 ListItem 裡。
可以麻煩各位前輩高手指點一下,我該怎麼做嗎?
先謝謝大家了!

2/13 更新:
找到方法了,不能乖乖的用 CheckBoxList 要用 Repeater,然後再用 jQuery 的 addClass 把 custom-control-input 加進去

相關的程式碼如下
web.config

......
<appSettings>
......
  <add key="options" value="Op01,Op02,Op03,Op04,Op05,Op06,Op07,Op08,Op09,Op10" />
</appSettings>
......

options.aspx

<!-- 記得引用 jQuery -->
<script type="text/javascript">
<!-- 把 Bootstrap custom-control-input 加到 CheckBox 上 -->
  $(document).ready(function () {
    $('input:checkbox').addClass("custom-control-input");
  });

<!-- 如果選取了 Select All 則停用單個 CheckBox -->
  $(function () {
    var detectionElement = $('input[name="all"]');
    if (detectionElement.get(0)) {
      $(detectionElement).on("click", function () {
        var target = $('.checkboxes :input');
        target.prop('disabled', $(this).is(':checked') == true);
      });
    }
  });
</script>
......
<div class="container">
......
  <div class="custom-control custom-checkbox">
    <input id="all" type="checkbox" runat="server" class="custom-control-input" />
    <label class="custom-control-label" for="all">Select All</label>
  </div>
  <div class="checkboxes">
    <asp:Repeater ID="options" runat="server">
      <ItemTemplate>
        <label class="custom-control custom-checkbox custom-control-inline">
          <asp:CheckBox ID="cb_op" runat="server"></asp:CheckBox>
          <asp:Label ID="lbl_op" runat="server" Text='<%# Eval("itemName") %>' CssClass="custom-control-label"></asp:Label>
        </label>
      </ItemTemplate>
    </asp:Repeater>
  </div>
</div>
......

options.aspx.cs

......
string[] myOptions = ConfigurationManager.AppSettings["options"].Split(',');
DataTable dt = new DataTable();
dt.Columns.Add("itemName");
string temp;
int firstDotIndex;
foreach (string entry in myOptions)
{
  firstDotIndex = entry.IndexOf('.');
  temp = entry.Remove(firstDotIndex, entry.Length - firstDotIndex);
  dt.Rows.Add(temp);
}
options.DataSource = dt;
options.DataBind();

有問題的程式碼如下
web.config

......
<appSettings>
......
  <add key="options" value="Op01,Op02,Op03,Op04,Op05,Op06,Op07,Op08,Op09,Op10" />
</appSettings>
......

options.aspx

<!-- 如果選取了 Select All 則停用 CheckBoxList -->
<script type="text/javascript">
  $(function () {
    var detectionElement = $('input[name="all"]');
    if (detectionElement.get(0)) {
      $(detectionElement).on("click", function () {
        var target = $('.checkboxes #choose :input');
        target.prop('disabled', $(this).is(':checked') == true);
      });
    }
  });
</script>
......
<div class="container">
......
  <div class="custom-control custom-checkbox">
    <input id="all" type="checkbox" runat="server" class="custom-control-input" />
    <label class="custom-control-label" for="all">Select All</label>
  </div>
  <div class=row justify-content-center">
    <div class="checkboxes custom-checkbox">
      <asp:CheckBoxList ID="choose" runat="server" RepeatLayout="Table" RepeatColumns="5" RepeatDirection="Horizontal"></asp:CheckBoxList>
      </div>
  </div>
</div>
......

options.aspx.cs

......
string[] myOptions = ConfigurationManager.AppSettings["options"].Split(',');
foreach(string entry in myOptions)
{
  choose.Items.Add(new ListItem(entry, entry));
}

尚未有邦友回答

立即登入回答