上一篇文章讲解了在后台代码中调用 Spread 客户端 JS 方法的实现过程,本文将讲解在使用 UpdatePanel 情况下如何实现这一功能。两种不同应用场景中,实现方法主要区别在于客户端的 JS 脚本。本文使用场景为,用户点击【添加行】按钮之后,如果新增行超出了当前视图的显示范围, Spread 能够自动滚动并显示新增的行。
在页面中添加 ScriptManager 和 UpdatePanel,如何添加一个 Button 和 一个 Spread控件。
Button后台代码如下:
protected void Button1_Click(object sender, EventArgs e) { // 在指定位置插入新行 FpSpread1.ActiveSheetView.AddRows(FpSpread1.ActiveSheetView.RowCount - 1, 1); ScriptManager.RegisterStartupScript(this, this.GetType(), "scroll", "ScrollToRow('FpSpread1');", true); }
前台 JS 方法如下:
<script type="text/javascript" language="javascript"> var name = ""; function ScrollToRow(valgridname) { name = valgridname; if (document.all) { // IE SetToRowIE(); } else { // FireFox SetTopRowFireFox(); } } function SetToRowIE() { var spread = document.getElementById(name); // 判断 Spread 是否加载完毕 if (spread.readyState == "loading") { // 加载中 setTimeout(SetToRowIE, 200); } else if (spread.readyState == "complete") { // 加载完毕 rowindex = spread.GetRowCount() - 1; spread.ScrollTo(rowindex, 0); } } function SetTopRowFireFox() { var spread = document.getElementById(name); // 判断 Spread 是否加载完毕 if (spread.GetRowCount) { // 加载完毕 rowindex = spread.GetRowCount() - 1; spread.ScrollTo(rowindex, 0); } else { // 加载中 setTimeout(SetTopRowFireFox, 200); } } </script>