← 返回所有博客文章

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