大家好,
我是剛接觸 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));
}