在 Web 项目中使用 Spread ,通过 JaveScript 和 Spread 交互获取相关属性是极为常见的Case。当然,也有很多用户给我们提出过相关的问题,这里我们给出几个比较常见的案例来展示 JaveScript 和 Spread 的交互方法。

案例一:JavaScript获取活跃单元格位置及单元格的相关属性

本案例的实现思路为,通过 Spread ActiveRow 和 ActiveCol 属性获取当前活跃单元格行列索引,再通过 Spread 前台方法 GetCellByRowCol 获取当前活跃单元格对象。

<script language="javascript" type="text/javascript"> 
window.onload = function setactivecell() { 
var spread = document.getElementById("ctl00_ContentPlaceHolder1_FpSpread1"); 
spread.SetActiveCell(0, 0); 
} 
function Button2_onclick() {

var spread = document.getElementById("ctl00_ContentPlaceHolder1_FpSpread1");

//单元格位置 
//获取活跃单元格所在行索引 
var activerowindex = spread.ActiveRow; 
//获取活跃单元格所在列索引 
var activecolindex = spread.ActiveCol; 
//获取活跃单元格 
var actvecell = spread.GetCellByRowCol(activerowindex, activecolindex);

var select = document.getElementById("list");

select.options.length = 0;

var varItem = new Option("单元格行索引:" + activerowindex, 0); 
select.options.add(varItem); 
var varItem = new Option("单元格列索引:" + activecolindex, 1); 
select.options.add(varItem); 
var varItem = new Option("单元格 Text 属性:" + actvecell.innerHTML, 2); 
select.options.add(varItem); 
var varItem = new Option("单元格 bcakcolor 属性:" + actvecell.style.backgroundColor, 3); 
select.options.add(varItem);

select.selectedIndex = 0; 
} 
</script>

效果图:

Demo1

 

案例二:光标进入单元格后与服务器通信

实现思路为,Spread 内容单元格在前台渲染为 HTML Table,Table 名称为 viewport,抓取 HTML Table 后通过后台设置 viewport 的前台双击事件。通过 GetPostBackEventReference 方法更改点击行为,触发 FpSpread ButtonCommand 事件,从而更改单元格属性。

代码如下:

protected void Page_Load(object sender, EventArgs e) 
        { 
            this.FpSpread1.Sheets[0].Cells[0, 0].Text = "双击单元格"; 
        }

        protected void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) 
        { 
            this.FpSpread1.Sheets[0].BackColor = Color.Red; 
            this.FpSpread1.Sheets[0].Cells[0, 0].Text = "光标进入单元格和后台交互"; 
        }

        protected override void Render(HtmlTextWriter writer) 
        { 
            Table spreadTable = this.FpSpread1.FindControl("viewport") as Table; 
            spreadTable.Attributes.Add("ondblclick", ClientScript.GetPostBackEventReference(FpSpread1, "Button,-1,-1") + "; return false;"); 
            base.Render(writer); 
        }

效果图:

Demo3

 

案例三:光标离开单元格后与服务器通信

此案例实现思路为,调用 FpSpread EditStopped 前台事件,使用FpSpread CallBack 前台方法调用 Spread 后台 ButtonCommand 事件。

JS代码:

<script language="javascript" type="text/javascript" id="FpSpread1_Script3"> 
        function FpSpread1_EditStopped(event){ 
            //Add code to handle your event here. 
            var spread = document.getElementById("ctl00_ContentPlaceHolder1_FpSpread1"); 
            spread.UpdatePostbackData(); 
            spread.CallBack("Button"); 
        } 
    </script>

CS代码:

protected void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) 
      { 
          this.FpSpread1.Sheets[0].BackColor = Color.Red; 
          this.FpSpread1.Sheets[0].Cells[0, 0].Text = "光标离开单元格和后台交互"; 
      }

效果图:

Demo4

 

案例四:获取和设置Spread滚动条位置

本案例通过设置 Spread 前台属性 scrollTop 和 scrollLeft 来改变滚动条位置。

代码如下:

function Button1_onclick() { 
           var spread = document.getElementById("ctl00_ContentPlaceHolder1_FpSpread1_view"); 
           var scrollTopPosition = spread.scrollTop; 
           var scrollLeftPosition = spread.scrollLeft; 
           spread.scrollLeft = 200; 
           spread.scrollTop = 200; 
       }

效果图:

 

Demo5 

 

案例五:实现鼠标拖动整体控件缩放

这个案例的实现思路为设置 Spread 的 Height 和 Width 属性为 100%,同时,把 Spread 嵌套在 div 内。接下来我们通过 JS 操作 div 大小即可。

效果图:

Demo6

 

Demo 下载,本 Demo 包含以上五个案例:SpreadforASPDemo.zip (481.06 kb)

以上即为我这次分享的 5 个实际案例,欢迎大家积极讨论,同时也期待你共享实际案例给大家。