GridView顯示的內(nèi)容行數(shù)比較多需要垂直方向滾動(dòng)條,但是遇到這樣一個(gè)問(wèn)題,如果我們把滾動(dòng)條拖到最下面,此時(shí)點(diǎn)擊GridView行按鈕事件,不論是刷新頁(yè)面其它控件還是彈出一個(gè)alert,都會(huì)導(dǎo)致GridView的滾動(dòng)條自動(dòng)回到第一行狀態(tài),用戶之前滑動(dòng)到的位置丟失了,用戶需要再次將滾動(dòng)條拖到上次的位置,操作麻煩,影響用戶體驗(yàn).解決方案:用js記錄滾動(dòng)條坐標(biāo),實(shí)現(xiàn)錨定效果
- <script type="text/javascript" language="javascript">
- function RecordPostion(obj) {
- var diva = obj;
- var sx = document.getElementById('<%=dvscrollX.ClientID %>');
- var sy = document.getElementById('<%=dvscrollY.ClientID %>');
- sy.value = diva.scrollTop;
- sx.value = diva.scrollLeft;
- }
-
- function GetResultFromServer() {
- var sx = document.getElementById('<%=dvscrollX.ClientID %>');
- var sy = document.getElementById('<%=dvscrollY.ClientID %>');
- //為什么div1就不用ClientID,其它服務(wù)器控件就要用?
- document.getElementById('div1').scrollTop = sy.value;
- document.getElementById('div1').scrollLeft = sx.value;
- }
- </script>
在頁(yè)面上添加兩個(gè)HiddenField,分別記錄X軸和Y軸滾動(dòng)條坐標(biāo),這里有一個(gè)小細(xì)節(jié),因?yàn)槲业捻?yè)面使用了UpdatePanel,所以在獲取HiddenField控件ID的時(shí)候,應(yīng)該用這種寫(xiě)法<%=dvscrollX.ClientID %>,如果不用UpdatePanel的話就直接寫(xiě)dvscrollX即可,對(duì)于div而言不管用不用UpdatePanel,都可以直接寫(xiě)成div1
- <asp:HiddenField ID="dvscrollX" runat="server" />
- <asp:HiddenField ID="dvscrollY" runat="server" />
GridView控件外側(cè)的div標(biāo)記增加js代碼 onscroll="javascript:RecordPostion(this);"
- <div id="div1" style="overflow: auto; line-height: 100%; letter-spacing: 1pt; height: 150px; margin:5px" onscroll="javascript:RecordPostion(this);">
- <asp:GridView ID="GridView1" runat="server" Width="98%" AutoGenerateColumns="False" CssClass="gv" DataKeyNames="管線ID" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
- <Columns>
- <asp:BoundField DataField="管線ID" HeaderText="管線ID" ReadOnly="true">
- <FooterStyle CssClass="hidden" />
- <HeaderStyle CssClass="hidden" />
- <ItemStyle HorizontalAlign="Center" CssClass="hidden" />
- </asp:BoundField>
- <asp:TemplateField HeaderText="主項(xiàng)號(hào)">
- <EditItemTemplate>
- <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("主項(xiàng)號(hào)") %>'></asp:TextBox></EditItemTemplate>
- <ItemTemplate>
- <asp:Label ID="Label2" runat="server" Text='<%# Bind("主項(xiàng)號(hào)") %>'></asp:Label></ItemTemplate>
- <ItemStyle HorizontalAlign="Center" Width="120px" />
- </asp:TemplateField>
- <asp:TemplateField HeaderText="明細(xì)">
- <ItemTemplate>
- <p class="cai">
- <asp:LinkButton ID="lbDetails" runat="server" CommandArgument='<%# Eval("管線ID") %>' CommandName="Details" CausesValidation="False" Text="明細(xì)" />
- </p>
- </ItemTemplate>
- <HeaderStyle HorizontalAlign="Center" />
- <ItemStyle HorizontalAlign="Center" Width="50px"/>
- </asp:TemplateField>
- </Columns>
- <RowStyle CssClass="gv_row" />
- <AlternatingRowStyle CssClass="gv_alternet_row" />
- <SelectedRowStyle CssClass="gv_selected_row" />
- <HeaderStyle CssClass="gv_header" />
- </asp:GridView>
- </div>
后臺(tái)代碼- protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
- {
- string pipelineId = e.CommandArgument.ToString(); //獲取管線id
-
- if (e.CommandName == "Details") //查看明細(xì)
- {
- //做相應(yīng)的操作...
-
- //加載js代碼,調(diào)用GetResultFromServer()方法
- string sjs = "GetResultFromServer();";
- ScriptManager.RegisterClientScriptBlock(this.GridView1, this.GetType(), "", sjs, true);
-
- }
- }
最后說(shuō)明:?jiǎn)栴}解決思路來(lái)自 http://bbs.csdn.net/topics/330148083