上一篇文章讲解了在后台代码中调用 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>