Repeater控件中實現checkbox的全選
作者:寧靜致遠
Repeater控件是個輕量級的數據綁定控件,一般用它來輸出要求相對簡單的數據。本文介紹了在Repeater控件中實現checkbox的全選,一起來看。
Repeater 控件是模板化的數據綁定列表,Repeater 控件是“無外觀的”,即:它不具有任何內置布局或樣式,也就不會產生任何數據控制表格來控制數據的顯示。因此,我們必須在控件的模板中明確聲明所有 HTML 布局標記、格式標記和樣式標記。下面主要介紹了一個例子,功能是在Repeater控件中實現checkbox的全選。
今天做項目,做到一個Repeater控件內部的復選框權限效果,感覺有點麻煩,現在整理一下,貢獻給大家!
一、HTML代碼:
- <input name="CheckAll" type="checkbox" value="" onclick="javascript:FormSelectAll('form1','CheckBox',this);" />
- //用于選擇是否全選的復選框,用javascript函數“FormSelectAll('form1','CheckBox',this); ”實現全選效果,具體參數下文在詳細解釋
- <form id="form1" runat="server">
- <asp:Repeater ID="RptList" runat="server" >
- <ItemTemplate>
- <input name="CheckBox" id="CheckBox" runat="server" type="checkbox" value='<%# DataBinder.eval_r(Container.DataItem, "F_JobID")%>' />
- //使用Repeater 控件綁定checkbox控件,用于選擇單項內容
- </ItemTemplate>
- </asp:Repeater>
- </form>
二、Javascript實現全選效果:
- function FormSelectAll(formID,EleName,e) //formID:目標復選框組所在的form表單的ID屬性;Elename:目標復選框組共同的Name屬性;e:用于標識是否全選的復選框自身,用戶判斷是“全選”還是“全不選”
- {
- var Elements = document.getElementByIdx(formID).elements; //獲取目標復選框組所在的Form表單
- for (var i = 0; i < Elements.length;i++)
- {
- if (Elements[i].type == "checkbox" && Elements[i].name.indexOf(EleName) >= 0) //根據對象類型和對象的name屬性判斷是否為目標復選框
- {
- Elements[i].checked = e.checked; //根據用于控制的復選框的選中情況判斷是否選中目標復選框
- }
- }
- }
三、服務器端執行代碼:
- for (int i = 0; i < this.RptList.Items.Count; i++)
- //根據Repeater 控件的情況執行循環判斷目標復選框是否被選中
- {
- HtmlInputCheckBox CB = (HtmlInputCheckBox)this.RptList.Items[i].FindControl("CheckBox");
- //獲取一個目標復選框情況
- if (CB.Checked == true) //判斷該復選框是否被選中
- {
- 。。。。。 //程序處理代碼
- }
- }
希望對你有幫助。
【編輯推薦】
責任編輯:于鐵
來源:
寧靜致遠的博客