spreadjs 给指定单元格添加事件

收藏

请问怎样给spreadjs 指定单元格添加事件（需求：指定单元双击或单击弹出jquery ui datepicker控件，选择日期后，能把值写入单元格）

Alice · Alice

回复 1楼luozhu1986的帖子

有CellClick事件，当鼠标点击单元格的时候触发此事件。
参考代码：
Javascript (Usage)

var instance; // Type: Events
instance.CellClick = function(sheet, sheetName, sheetArea, row, col) { };

复制代码

Javascript (Specification)

CellClick = function (
sheet : Sheet,
sheetName : string,
sheetArea : SheetArea,
row : number,
col : number
) { };

复制代码

另外可以通过hitTest方法获取鼠标点击单元格的点，从而得到单元格的index。
JavaScript：

//Acquire cell index from mouse-clicked point of regular cells which are neither fixed rows/columns nor row/column headers.
var offset = $("#ss").offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var target = $("#ss").wijspread("spread").getActiveSheet().hitTest(x, y);
if(target &&
(target.rowViewportIndex === 0 || target.rowViewportIndex === 1) &&
(target.colViewportIndex === 0 || target.colViewportIndex === 1)){
console.log("Row index of mouse-clicked cells: " + target.row);
console.log("Column index of mouse-clicked cells: " + target.col);
}

复制代码

luozhu1986 · luozhu1986

sheet.getCell(row,col).CellClick = function(sheet, sheetName, sheetArea, row, col) {alert('click'); };
这样写对吗

luozhu1986 · luozhu1986

var offset = $("#ss").offset();
   var x = e.pageX - offset.left;
   var y = e.pageY - offset.top;
   var target = $("#ss").wijspread("spread").getActiveSheet().hitTest(x, y);
   ......
这样写不行

Alice · Alice

回复 3楼luozhu1986的帖子

1.举个例子来说明如何在CellClick事件和CellDoubleClick事件中使用代码：
JavaScript

$("#ss").wijspread();
var spread = $("#ss").wijspread("spread");
var activeSheet = spread.getActiveSheet();
activeSheet.bind($.wijmo.wijspread.Events.CellClick, function (sender, args) {
if(args.sheetArea === $.wijmo.wijspread.SheetArea.colHeader){
console.log("The column header was clicked.");
}
if(args.sheetArea === $.wijmo.wijspread.SheetArea.rowHeader){
console.log("The row header was clicked.");
}
if(args.sheetArea === $.wijmo.wijspread.SheetArea.corner){
console.log("The corner header was clicked.");
}
console.log("Clicked column index: " + args.col);
console.log("Clicked row index: " + args.row);
});
activeSheet.bind($.wijmo.wijspread.Events.CellDoubleClick, function (sender, args) {
if(args.sheetArea === $.wijmo.wijspread.SheetArea.colHeader){
console.log("The column header was double clicked.");
}
if(args.sheetArea === $.wijmo.wijspread.SheetArea.rowHeader){
console.log("The row header was double clicked.");
}
if(args.sheetArea === $.wijmo.wijspread.SheetArea.corner){
console.log("The corner header was double clicked.");
}
console.log("Double clicked column index: " + args.col);
console.log("Double clicked row index: " + args.row);
});

复制代码

2.你说的不行，是指该事件没有触发，还是hitTest执行后没有得到你想要的结果?
你的代码是如何实现的，hitTest方法是通过什么位置获取的。
再举个例子阐述如何使用hitTest方法：

$("#spreadContainer").click(function (e) {
//Acquire cell index from mouse-clicked point of regular cells which are neither fixed rows/columns nor row/column headers.
var offset = $("#spreadContainer").offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var target = $("#spreadContainer").wijspread("spread").getActiveSheet().hitTest(x, y);
if(target &&
(target.rowViewportIndex === 0 || target.rowViewportIndex === 1) &&
(target.colViewportIndex === 0 || target.colViewportIndex === 1)){
alert("Row index of mouse-clicked cells: " + target.row);
alert("Column index of mouse-clicked cells: " + target.col);
}
});

复制代码

luozhu1986 · luozhu1986

回复 5楼Alice的帖子

第一个问题，我只需给指定单元格添加事件，而不是所有单元格

第二个问题，我是copy你给出的代码

我要实现的需求，给指定单元格绑定一个jqueryUI日期控件，

iceman · iceman

回复 6楼luozhu1986的帖子

问题已经查收，明天调查后反馈结果。

iceman · iceman

回复 6楼luozhu1986的帖子

问题一，可以根据当前行列索引判断是否为目标单元格，进而实现特定单元格点击效果。
问题二，目前 SpreadJS 没有提供日期单元格类型，不过开放了自定义单元格类型接口，需要你进行自定义，参考链接：
http://helpcentral.componentone. ... tml#cellcustom.html

		自动登录	找回密码
密码			立即注册

[已处理] spreadjs 给指定单元格添加事件

7 个回复

活字格认证

微信认证勋章

元老葡萄