jquery 弹出图标进行选中处理
前台：
导入jquery： <script src="../js/jquery/jquery.js" type="text/javascript"></script>
处理：
处理函数
1 $(function () { 2 $("input[name^='check']").hover(function () { 3 4 //防止重复添加 5 if ($(".check").find("#test").length == 0) { 6 $(".check").append("<div id='test' onclick='disnone()' onmouseout='disnone()' style='width:60px;height: 45px; float:inherit; background-color:Orange; display:none; z-index:10; position:absolute;cursor:pointer'>设为主属性</div>"); 7 } 8 $("#test").animate({ opacity: "show" }, "slow"); 9 } 10 }); 11 12 13 //隐藏提示 14 function disnone() { 15 $("#test").animate({ opacity:"hide" }, "slow"); 16 };
页面：
margin-left:50px; margin-top:-15px;是为了让两个repeater绑定的数据显示在同一行。
前台
1 <asp:Repeater ID="rp1" runat="server" OnItemDataBound="rp1_ItemDataBound"> 2 <ItemTemplate> 3 <div class="thirdSty01"> 4 <%-- <input type="checkbox" 5 value="<%#Eval("name")%>" />--%> 6 <span> 7 <%#Eval("name")%>: </span> 8 <div style=" margin-left:50px; margin-top:-15px;"> 9 <table><tr> 10 <asp:Repeater ID="rp2" runat="server"> 11 <ItemTemplate> 12 <td> 13 <div id="check_<%#Eval("names")%>" class="check" > 14 <input type="checkbox" name="check_<%#Eval("names")%>" 15 value="<%#Eval("names")%>"/> 16 17 18 <label> 19 <%#Eval("names")%></label> 20 </div> 21 </td> 22 </ItemTemplate> 23 </asp:Repeater> 24 </tr></table> 25 </div> 26 </div> 27 </ItemTemplate> 28 </asp:Repeater>
后台：
数据绑定
1 public class tests 2 { 3 public string name{get;set;} 4 public List<t2> names { get; set; } 5 } 6 7 8 public class t2 9 { 10 public string names { get; set; } 11 } 12 13 14 protected void Page_Load(object sender, EventArgs e) 15 { 16 if (!IsPostBack) 17 { 18 List<tests> data=new List<tests> (); 19 tests testdata1=new tests (); 20 tests testdata2 = new tests(); 21 22 testdata1.name="名称一"; 23 testdata1.names = new List<t2>(); 24 t2 a1 = new t2(); 25 t2 a2 = new t2(); 26 a1.names = "第一个"; 27 a2.names = "第二个"; 28 testdata1.names.Add(a1); 29 testdata1.names.Add(a2); 30 31 32 testdata2.name = "名称二"; 33 testdata2.names = new List<t2>(); 34 t2 a3 = new t2(); 35 t2 a4 = new t2(); 36 a3.names = "第一个"; 37 a4.names = "第二个"; 38 testdata2.names.Add(a3); 39 testdata2.names.Add(a4); 40 41 data.Add(testdata1); 42 data.Add(testdata2); 43 44 rp1.DataSource = data; 45 rp1.DataBind(); 46 } 47 } 48 49 50 /// <summary> 51 /// 一级元素绑定时触发绑定 52 /// </summary> 53 /// <param name="sender"></param> 54 /// <param name="e"></param> 55 protected void rp1_ItemDataBound(object sender, RepeaterItemEventArgs e) 56 { 57 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 58 { 59 List<t2> valueQuery = ((tests)e.Item.DataItem).names; 60 Repeater rp2 = (Repeater)e.Item.FindControl("rp2");//找到要绑定数据的Repeater 61 if (rp2 != null) 62 { 63 try 64 { 65 rp2.DataSource = valueQuery; 66 rp2.DataBind(); 67 } 68 catch { } 69 } 70 } 71 } 72 73
效果：
继续完善：每一行只能设置一个主属性，设置后变色，设置后能标记出来哪一个是主属性。
第二种： 没有使用上面的方法，直接使用单复选框结合的方法。
js处理：
处理函数
1 //根据复选框的情况，设置所属单选框是否可用 2 function setabled(chkid) { 3 alert("检测"); 4 //从第四位取复选框的Id供单选框使用。 5 var ids = chkid.substr(4); 6 //alert($("#rad_" + ids + "").length); 7 var obj = document.getElementById(chkid); 8 alert(obj.checked); 9 if (obj.checked) { 10 alert("复选选中"); 11 //设置单选可用，移除单选的不可用属性 12 $("#rad_" + ids + "").removeAttr("disabled"); 13 } 14 else { 15 alert("复选不选中"); 16 //设置单选不可用 17 $("#rad_" + ids + "").attr("disabled", "disabled"); 18 //设置单选为不选中，移除单选的选中属性 19 $("#rad_" + ids + "").removeAttr("checked"); 20 } 21 22 }
前台界面：
界面
1 <font style="vertical-align:top">课程属性<font color="red">*</font></font> 2 <asp:Repeater ID="rp1" runat="server" OnItemDataBound="rp1_ItemDataBound"> 3 <ItemTemplate> 4 <div style="margin-left:5%;"> 5 <%-- <input type="checkbox" 6 value="<%#Eval("name")%>" />--%> 7 8 <%#Eval("name")%>: 9 <div style="margin-left: 50px; margin-top: -20px;"> 10 <table style="line-height:30px;"> 11 <tr> 12 <asp:Repeater ID="rp2" runat="server"> 13 <ItemTemplate> 14 <td style=" padding-left:3px; padding-right:25px;"> 15 <div id="check_<%#Eval("names")%>" class="check"> 16 <input type="checkbox" id="chk_<%#Eval("names")%>" name="check_<%#Eval("names")%>" value="<%#Eval("names")%>" onclick="setabled(this.id)"/> 17 <label> 18 <%#Eval("names")%></label> 19 <input type="radio" name="<%#Eval("names")%>" value="ss" id="rad_<%#Eval("names")%>" runat="server" /> 20 </div> 21 </td> 22 </ItemTemplate> 23 </asp:Repeater> 24 </tr> 25 </table> 26 </div> 27 </div> 28 </ItemTemplate> 29 </asp:Repeater>
后台代码：
View Code
public class tests { public string name{get;set;} public List<t2> names { get; set; } } public class t2 { public string names { get; set; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { List<tests> data=new List<tests> (); tests testdata1=new tests (); tests testdata2 = new tests(); testdata1.name="子项目"; testdata1.names = new List<t2>(); t2 a1 = new t2(); t2 a2 = new t2(); a1.names = "1"; a2.names = "2"; testdata1.names.Add(a1); testdata1.names.Add(a2); testdata2.name = "阶段"; testdata2.names = new List<t2>(); t2 a3 = new t2(); t2 a4 = new t2(); a3.names = "3"; a4.names = "4"; testdata2.names.Add(a3); testdata2.names.Add(a4); data.Add(testdata1); data.Add(testdata2); rp1.DataSource = data; rp1.DataBind(); } } /// <summary> /// 一级元素绑定时触发绑定 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void rp1_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { List<t2> valueQuery = ((tests)e.Item.DataItem).names; Repeater rp2 = (Repeater)e.Item.FindControl("rp2");//找到要绑定数据的Repeater if (rp2 != null) { try { rp2.DataSource = valueQuery; rp2.DataBind(); } catch { } } } }
图片：
实现复选选中，单选可选，否则，单选不选中且不可用。
