ASP.NET_搭配javascript 實踐表頭靜止而資料列滾動
這次要分享的技巧是如何固定表頭只保留下方資料列(當資料量多會很多列時候)
避免讓使用者往下滾表頭不見操作起來不開心
程式碼
Head部分的Js 跟body部分的GridView
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <head runat="server"> <meta http-equiv="Content-Type" content="text/html;charset=big5" /> <title></title> <script type="text/javascript"> function DoAutoScrollAdujst() { var gv = document.getElementById("<%= GvLeaveRecords.ClientID%>"); var gvTmp = gv.cloneNode(true); for (idx = gvTmp.rows.length - 1; idx > 0; idx--) { gvTmp.deleteRow(idx); } gv.deleteRow(0); GvHeader.appendChild(gvTmp); } window.onload = DoAutoScrollAdujst </script> //... </head> <body> <form id="form1" runat="server" style="width: 550px; height: 480px;"> //... <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div id="GvHeader"></div> <div style="overflow-y: scroll; height: 400px; width: 550px"> <asp:GridView ID="GvLeaveRecords" runat="server" AutoGenerateColumns="False" Width="550px"> <HeaderStyle BackColor="#ffcc66" Height="30px" /> <Columns> <asp:TemplateField HeaderText="項次"> <HeaderStyle Wrap="false" /> <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="false" Width="30px" /> <ItemTemplate> <asp:Label ID="lblNo" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="起始時間" DataField="s_date" ItemStyle-Wrap="false"> <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="140px" /> </asp:BoundField> <asp:BoundField HeaderText="終止時間" DataField="e_date" ItemStyle-Wrap="false"> <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="140px" /> </asp:BoundField> <asp:BoundField HeaderText="時數" DataField="real_hour" ItemStyle-Wrap="false"> <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="30px" /> </asp:BoundField> <asp:BoundField HeaderText="假別" DataField="type_name" ItemStyle-Wrap="false"> <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="70px" /> </asp:BoundField> <asp:BoundField HeaderText="請假事由" DataField="abs_reason" ItemStyle-Wrap="true"> <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" /> </asp:BoundField> </Columns> </asp:GridView> </div> </ContentTemplate> </asp:UpdatePanel> </form> </body> |
參考資料:
ASP.NET 局部更新 UpdatePanel
Ref Link:https://blog.xuite.net/hcktony/blog/15156206-%E3%80%90ASP.NET%E3%80%91AJAX%EF%BC%9AUpdatePanel+%E5%B1%80%E9%83%A8%E6%9B%B4%E6%96%B0
[ASP.NET][AJAX](note)updatepane沒有名為div的公用屬性
Ref Link:https://dotblogs.com.tw/mis0800/2015/01/11/148051
'https://dotblogs.com.tw/mis2000lab/2008/10/29/gridview_template_findcontrol
'UpdatePanel1怪情況
https://social.msdn.microsoft.com/Forums/zh-TW/8583ee6c-54ad-4c43-8983-47985b63b2b9/vs2008?forum=236
GridView的 AutoGenerate屬性是做什麼用的
Ref Link:https://tw.answers.yahoo.com/question/index?qid=20100701000010KK05373&guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&guce_referrer_sig=AQAAAHmZUF5QZnmu8CavVgD5xLB7dzxIvl52CwbjA1wlRB5lbs6-7U54Rz7OAe8-MnPvJyU-gDDVUchOuKIsoSQQ6Q6aNIj1ZRT5Z2ZfzN2lb4mTIfrund4lb40xk_BqtOFxuLoP8eUz9mqWKwsG6sZNZTc9y2Bp-w_GRvuA_gtXB_EJ
型別 'System.Web.UI.WebControls.TemplateField' 沒有名為..... 的公用屬性。
Ref Link:http://gisellemurmured.blogspot.com/2012/08/systemwebuiwebcontrolstemplatefield.html
GridView 加入自動編號欄位
https://dotblogs.com.tw/jeff377/archive/2008/03/17/1707.aspx
https://blog.xuite.net/xiaolian/blog/46204394-%E5%9C%A8GridView%E4%B8%AD%E5%8A%A0%E5%85%A5%E8%87%AA%E5%8B%95%E7%B7%A8%E8%99%9F%E7%9A%84%E5%BA%8F%E8%99%9F
為 GridView 加上流水號
https://dotblogs.com.tw/joysdw12/2012/12/13/85631
留言
張貼留言