在同一个页面通过点击不同标签，显示不同功能具体实现，如图效果图：
代码实现，主要是前台代码：
1 <div class="bs-example bs-example-tabs"> 2 <ul id="myTab" class="nav nav-tabs"> 3 <li class="active"><a href="#home" data-id="0" data-toggle="tab">待审核</a></li> 4 <li><a href="#profile" data-id="1" data-toggle="tab">已审核</a></li> 5 </ul> 6 <script> 7 function getCookie(name) { 8 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 9 if (arr != null) { 10 return unescape(arr[2]); 11 } else { 12 return null; 13 } 14 } 15 $(function () { 16 var ckv = getCookie("TABSHenHs"); 17 // alert(ckv); 18 ckv = ckv ? ckv : 0; 19 $('#myTab li').eq(ckv).addClass('active').siblings().removeClass('active'); 20 $('#myTabContent .tab-pane').eq(ckv).addClass('active').siblings().removeClass('active'); 21 $('#myTabContent .tab-pane').eq(ckv).addClass('in').siblings().removeClass('in'); 22 $('#myTab li a').click(function () { 23 var text = $(this).attr("data-id"); 24 document.cookie = "TABSHenHs=" + text; 25 }); 26 }); 27 </script> 28 <div id="myTabContent" class="tab-content"> 29 <div class="tab-pane fade in active" id="home"> 30 <asp:DataList ID="ddl_applylist" runat="server" class="table table-hover"> 31 <HeaderTemplate> 32 <td><strong>编号</strong></td> 33 <td><strong>会员名称</strong></td> 34 <td><strong>原级别</strong></td> 35 <td><strong>申请级别</strong></td> 36 <td><strong>申请理由</strong></td> 37 <td><strong>申请时间</strong></td> 38 <td><strong>申请人</strong></td> 39 <td><strong>操作</strong></td> 40 </HeaderTemplate> 41 <ItemTemplate> 42 <td><%# Eval("ID")%></td> 43 <td><%# Eval("MID") %></td> 44 <td><%# Eval("GradeName") %></td> 45 <td><%# Eval("GradeID") %></td> 46 <td><span title="<%# Eval("Remark") %>"><%# Eval("Remark").ToString().Length>10?Eval("Remark").ToString().Substring(0,9)+"...":Eval("Remark").ToString() %></span></td> 47 <td><%# Eval("CreateDate") %></td> 48 <td><%# Eval("CreateUser") %></td> 49 <td> 50 <div class="btn-group"> 51 <a href="#" data-id="<%# Eval("ID")%>" class="SHTG">通过</a> 52 |<a href="#" data-id="<%# Eval("ID")%>" class="BHSH">驳回</a> 53 </div> 54 </td> 55 </ItemTemplate> 56 </asp:DataList> 57 </div> 58 <div class="tab-pane fade" id="profile"> 59 <asp:DataList ID="dl_Deallist" runat="server" class="table table-hover"> 60 <HeaderTemplate> 61 <td><strong>编号</strong></td> 62 <td><strong>会员名称</strong></td> 63 <td><strong>原级别</strong></td> 64 <td><strong>申请级别</strong></td> 65 <td><strong>状态</strong></td> 66 <td><strong>申请时间</strong></td> 67 <td><strong>申请理由</strong></td> 68 <td><strong>批注</strong></td> 69 <td><strong>申请人</strong></td> 70 </HeaderTemplate> 71 <ItemTemplate> 72 <td><%# Eval("ID")%></td> 73 <td><%# Eval("MID") %></td> 74 <td><%# Eval("GradeName") %></td> 75 <td><%# Eval("GradeID") %></td> 76 <td><%# Eval("State").ToString()=="1"?"通过":Eval("State").ToString()=="2"?"驳回":"未审核" %></td> 77 <td><%# Eval("CreateDate") %></td> 78 <td><span title="<%# Eval("Remark") %>"><%# Eval("Remark").ToString().Length>10?Eval("Remark").ToString().Substring(0,9)+"...":Eval("Remark").ToString() %></span></td> 79 <td><span title="<%# Eval("Postil") %>"><%# Eval("Postil").ToString().Length>10?Eval("Postil").ToString().Substring(0,9)+"...":Eval("Postil").ToString() %></span></td> 80 <td><%# Eval("CreateUser") %></td> 81 </ItemTemplate> 82 </asp:DataList> 83 </div> 84 </div> 85 </div>
部分css，当然根据实际情况调整：
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <link href="../BootStrap/css/bootstrap.min.css" rel="stylesheet" media="screen" /> 5 <link href="../BootStrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen" /> 6 <script src="../BootStrap/js/jquery-2.0.2.min.js"></script> 7 <script src="../BootStrap/js/bootstrap.min.js"></script> 8 <script src="../BootStrap/My97DatePicker/WdatePicker.js"></script> 9 <title>等级调整申请列表</title> 10 <style> 11 /*.open .dropdown-menu { 12 left: auto; 13 Right: 0; 14 }*/ 15 16 .btnstyle { 17 padding: 0px 5px; 18 } 19 20 #ddl_applylist td { 21 padding: 4px; 22 } 23 24 #dl_Deallist td { 25 padding: 4px; 26 } 27 </style> 28 </head>
弹出对话框操作，如图：
具体代码实现：
1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 2 <div class="modal-dialog"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true">×</button> 6 <h4 class="modal-title" id="myModalLabel">批注</h4> 7 </div> 8 <div class="modal-body"> 9 <div id="div1"> 10 <asp:TextBox ID="txtpostil" runat="server" class="form-control" Style="width: 100%;" TextMode="MultiLine"></asp:TextBox> 11 </div> 12 </div> 13 <div class="modal-footer"> 14 <input type="button" id="SHTG" class="btn btn-default" value="通过" /> 15 <input type="button" id="BHSH" class="btn btn-default" value="驳回" /> 16 <button type="button" id="closeit" class="btn btn-default" data-dismiss="modal">关闭</button> 17 <input type="hidden" id="textvalue" /> 18 </div> 19 </div> 20 </div> 21 </div>
js实现，以及ajax实现功能：
1 <script> 2 $(function () { 3 $('.SHTG').click(function () { 4 $(this).attr("data-toggle", "modal"); 5 $(this).attr("data-target", "#myModal"); 6 $('#SHTG').show(); 7 $('#BHSH').hide(); 8 $('#textvalue').val($(this).attr("data-id")); 9 }); 10 $('.BHSH').click(function () { 11 $(this).attr("data-toggle", "modal"); 12 $(this).attr("data-target", "#myModal"); 13 $('#SHTG').hide(); 14 $('#BHSH').show(); 15 $('#textvalue').val($(this).attr("data-id")); 16 }); 17 18 $('#SHTG').click(function () {//审核通过 19 var postil = $('#txtpostil').val(); 20 var id = $('#textvalue').val(); 21 $.ajax({ 22 url: "Ajax.aspx", 23 type: "POST", 24 data: { id: id, postil: postil, action: "SetGrade" }, 25 async: false, 26 success: function (res) { 27 if (res != "") { 28 alert('审核成功'); 29 window.location.href = 'CRM_GradeApplyList.aspx' 30 } 31 } 32 }); 33 }); 34 $('#BHSH').click(function () {//审核驳回 35 var postil = $('#txtpostil').val(); 36 var id = $('#textvalue').val(); 37 $.ajax({ 38 url: "Ajax.aspx", 39 type: "POST", 40 data: { id: id, postil: postil, action: "BHApply" }, 41 async: false, 42 success: function (res) { 43 if (res != "") { 44 alert('已驳回申请'); 45 window.location.href = 'CRM_GradeApplyList.aspx' 46 } 47 } 48 }); 49 50 }) 51 52 53 54 55 }); 56 </script>
二者同时实现，整个页面代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CRM_GradeApplyList.aspx.cs" Inherits="CRM_CRM_GradeApplyList" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <link href="../BootStrap/css/bootstrap.min.css" rel="stylesheet" media="screen" /> 10 <link href="../BootStrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen" /> 11 <script src="../BootStrap/js/jquery-2.0.2.min.js"></script> 12 <script src="../BootStrap/js/bootstrap.min.js"></script> 13 <script src="../BootStrap/My97DatePicker/WdatePicker.js"></script> 14 <title>等级调整申请列表</title> 15 <style> 16 /*.open .dropdown-menu { 17 left: auto; 18 Right: 0; 19 }*/ 20 21 .btnstyle { 22 padding: 0px 5px; 23 } 24 25 #ddl_applylist td { 26 padding: 4px; 27 } 28 29 #dl_Deallist td { 30 padding: 4px; 31 } 32 </style> 33 </head> 34 <body> 35 <form id="form1" runat="server"> 36 <div style="margin: 0 auto; width: 100%"> 37 <ol class="breadcrumb"> 38 <li class="active">等级调整申请列表</li> 39 </ol> 40 <table> 41 <tr> 42 <td> 43 <asp:TextBox class="form-control" ID="txtSearch" placeholder="用户名/申请等级" runat="server"></asp:TextBox> 44 </td> 45 <td> 46 <asp:Button ID="btnsearch" runat="server" Text="查询" class="btn btn-default" Height="32px" OnClick="btnsearch_Click" /> 47 48 </td> 49 </tr> 50 </table> 51 52 <div class="bs-example bs-example-tabs"> 53 <ul id="myTab" class="nav nav-tabs"> 54 <li class="active"><a href="#home" data-id="0" data-toggle="tab">待审核</a></li> 55 <li><a href="#profile" data-id="1" data-toggle="tab">已审核</a></li> 56 </ul> 57 <script> 58 function getCookie(name) { 59 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 60 if (arr != null) { 61 return unescape(arr[2]); 62 } else { 63 return null; 64 } 65 } 66 $(function () { 67 var ckv = getCookie("TABSHenHs"); 68 // alert(ckv); 69 ckv = ckv ? ckv : 0; 70 $('#myTab li').eq(ckv).addClass('active').siblings().removeClass('active'); 71 $('#myTabContent .tab-pane').eq(ckv).addClass('active').siblings().removeClass('active'); 72 $('#myTabContent .tab-pane').eq(ckv).addClass('in').siblings().removeClass('in'); 73 $('#myTab li a').click(function () { 74 var text = $(this).attr("data-id"); 75 document.cookie = "TABSHenHs=" + text; 76 }); 77 }); 78 </script> 79 <div id="myTabContent" class="tab-content"> 80 <div class="tab-pane fade in active" id="home"> 81 <asp:DataList ID="ddl_applylist" runat="server" class="table table-hover"> 82 <HeaderTemplate> 83 <td><strong>编号</strong></td> 84 <td><strong>会员名称</strong></td> 85 <td><strong>原级别</strong></td> 86 <td><strong>申请级别</strong></td> 87 <td><strong>申请理由</strong></td> 88 <td><strong>申请时间</strong></td> 89 <td><strong>申请人</strong></td> 90 <td><strong>操作</strong></td> 91 </HeaderTemplate> 92 <ItemTemplate> 93 <td><%# Eval("ID")%></td> 94 <td><%# Eval("MID") %></td> 95 <td><%# Eval("GradeName") %></td> 96 <td><%# Eval("GradeID") %></td> 97 <td><span title="<%# Eval("Remark") %>"><%# Eval("Remark").ToString().Length>10?Eval("Remark").ToString().Substring(0,9)+"...":Eval("Remark").ToString() %></span></td> 98 <td><%# Eval("CreateDate") %></td> 99 <td><%# Eval("CreateUser") %></td> 100 <td> 101 <div class="btn-group"> 102 <a href="#" data-id="<%# Eval("ID")%>" class="SHTG">通过</a> 103 |<a href="#" data-id="<%# Eval("ID")%>" class="BHSH">驳回</a> 104 </div> 105 </td> 106 </ItemTemplate> 107 </asp:DataList> 108 </div> 109 <div class="tab-pane fade" id="profile"> 110 <asp:DataList ID="dl_Deallist" runat="server" class="table table-hover"> 111 <HeaderTemplate> 112 <td><strong>编号</strong></td> 113 <td><strong>会员名称</strong></td> 114 <td><strong>原级别</strong></td> 115 <td><strong>申请级别</strong></td> 116 <td><strong>状态</strong></td> 117 <td><strong>申请时间</strong></td> 118 <td><strong>申请理由</strong></td> 119 <td><strong>批注</strong></td> 120 <td><strong>申请人</strong></td> 121 </HeaderTemplate> 122 <ItemTemplate> 123 <td><%# Eval("ID")%></td> 124 <td><%# Eval("MID") %></td> 125 <td><%# Eval("GradeName") %></td> 126 <td><%# Eval("GradeID") %></td> 127 <td><%# Eval("State").ToString()=="1"?"通过":Eval("State").ToString()=="2"?"驳回":"未审核" %></td> 128 <td><%# Eval("CreateDate") %></td> 129 <td><span title="<%# Eval("Remark") %>"><%# Eval("Remark").ToString().Length>10?Eval("Remark").ToString().Substring(0,9)+"...":Eval("Remark").ToString() %></span></td> 130 <td><span title="<%# Eval("Postil") %>"><%# Eval("Postil").ToString().Length>10?Eval("Postil").ToString().Substring(0,9)+"...":Eval("Postil").ToString() %></span></td> 131 <td><%# Eval("CreateUser") %></td> 132 </ItemTemplate> 133 </asp:DataList> 134 </div> 135 </div> 136 </div> 137 </div> 138 139 140 141 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 142 <div class="modal-dialog"> 143 <div class="modal-content"> 144 <div class="modal-header"> 145 <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true">×</button> 146 <h4 class="modal-title" id="myModalLabel">批注</h4> 147 </div> 148 <div class="modal-body"> 149 <div id="div1"> 150 <asp:TextBox ID="txtpostil" runat="server" class="form-control" Style="width: 100%;" TextMode="MultiLine"></asp:TextBox> 151 </div> 152 </div> 153 <div class="modal-footer"> 154 <input type="button" id="SHTG" class="btn btn-default" value="通过" /> 155 <input type="button" id="BHSH" class="btn btn-default" value="驳回" /> 156 <button type="button" id="closeit" class="btn btn-default" data-dismiss="modal">关闭</button> 157 <input type="hidden" id="textvalue" /> 158 </div> 159 </div> 160 </div> 161 </div> 162 163 </form> 164 </body> 165 </html> 166 <script> 167 $(function () { 168 $('.SHTG').click(function () { 169 $(this).attr("data-toggle", "modal"); 170 $(this).attr("data-target", "#myModal"); 171 $('#SHTG').show(); 172 $('#BHSH').hide(); 173 $('#textvalue').val($(this).attr("data-id")); 174 }); 175 $('.BHSH').click(function () { 176 $(this).attr("data-toggle", "modal"); 177 $(this).attr("data-target", "#myModal"); 178 $('#SHTG').hide(); 179 $('#BHSH').show(); 180 $('#textvalue').val($(this).attr("data-id")); 181 }); 182 183 $('#SHTG').click(function () {//审核通过 184 var postil = $('#txtpostil').val(); 185 var id = $('#textvalue').val(); 186 $.ajax({ 187 url: "Ajax.aspx", 188 type: "POST", 189 data: { id: id, postil: postil, action: "SetGrade" }, 190 async: false, 191 success: function (res) { 192 if (res != "") { 193 alert('审核成功'); 194 window.location.href = 'CRM_GradeApplyList.aspx' 195 } 196 } 197 }); 198 }); 199 $('#BHSH').click(function () {//审核驳回 200 var postil = $('#txtpostil').val(); 201 var id = $('#textvalue').val(); 202 $.ajax({ 203 url: "Ajax.aspx", 204 type: "POST", 205 data: { id: id, postil: postil, action: "BHApply" }, 206 async: false, 207 success: function (res) { 208 if (res != "") { 209 alert('已驳回申请'); 210 window.location.href = 'CRM_GradeApplyList.aspx' 211 } 212 } 213 }); 214 215 }) 216 217 218 219 220 }); 221 </script>
4124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
