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



留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題