SpreadJS 自定义快捷键相关

收藏

本帖最后由煎鱼你好于 2018-9-6 08:55 编辑

设置快捷键的方法已经找到，但是在具体实现中遇到了一些问题：var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
//Map the created action to the Enter key.
activeSheet.addKeyMap(GcSpread.Sheets.Key.enter, false, false, false, false, ColorAction);
function ColorAction(){
//Click on a cell and press the Enter key.
activeSheet.getCell(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex()) .backColor("red");}
代码的位置该放在什么文件中（或通过什么方法），才可以实现在页面加载完成后不需要点击自动触发上述代码（定义快捷键+快捷键具体功能）
PS：
$(document).ready()的话执行太早，spreadjs的相关文件还没加载完就会执行，会报错显示找不到getActiveSheet的方法；
window.onload的话要等到天荒地老。

Clark.Pan · Clark.Pan

$(document).ready()不会啊，都是dom加载完毕后再执行。不会说执行太早啊，您提供一个demo，我帮您看看具体是什么问题，应该不是$(document).ready()和window.onload的关系，两者通常可以认为是等价的，一个是jquery的写法，一个是js的原生写法

煎鱼你好 · 煎鱼你好

ClarkPan 发表于 2018-9-6 17:58
$(document).ready()不会啊，都是dom加载完毕后再执行。不会说执行太早啊，您提供一个demo，我帮您看看具体 ...

谢谢您的回复。我这边情况是，用$(document).ready()的话，dom文档结构加载完毕，但是引用的spread相关好像还没有完成，所以会有像是“Cannot read property 'getActiveSheet' of undefined”的提示。window.onload好像是要等页面（包含图片等）所有元素都加载完毕后才执行，我等了很久还是没有任何的反应。

demo我就放在下面了，感谢您的耐心解答。

$(document).ready(function (){
   var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
   var activeSheet = spreadtemp.getActiveSheet();
   //Map the created action to the 'shift+alt+c' key.
   activeSheet.addKeyMap(GcSpread.Sheets.Key.c, false, true, true, false, SFontBold);

   function SFontBold(){
      //Click on a cell and press the 'ctrl+shift+c' key.
      var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
      var activeSheet = spreadtemp.getActiveSheet();
      var selectedcells = activeSheet.getSelections();
      var rows = selectedcells[0].row; //the start row of selected ranges;
      var rowCounts = selectedcells[0].rowCount; //the number of selected rows;
      var rows2 = rows + rowCounts - 1;
      var cols = selectedcells[0].col; //the start column of selected ranges;
      var colCounts = selectedcells[0].colCount; //the number of selected column;
      var cols2 = cols + colCounts - 1;
      var cssStyle = activeSheet.getActualStyle(rows,cols) || new GcSpread.Sheets.Style();
      var fontElement = $("<span></span>");
      var fontweight = 'bold';
      var fontactualstyle = cssStyle.font;
      fontElement.css("font", cssStyle.font); // 字体概括
      cssStyle.font = fontElement.css("font");
      if(fontactualstyle.match(fontweight)){
         fontElement.css("font-weight", "normal");
         cssStyle.font = fontElement.css("font");
         activeSheet.getCells(rows,cols,rows2,cols2).font(cssStyle.font);
      }else{
         fontElement.css("font-weight", "bold"); // 字体粗细
         cssStyle.font = fontElement.css("font");
         activeSheet.getCells(rows,cols,rows2,cols2).font(cssStyle.font);
      }
   }
});

Clark.Pan · Clark.Pan

明白了您的初始化错了啊您用的是findControl，findControl是初始化之后再去获得spread对象的时候可以用这个方法。
初始化是：
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
参考：
https://demo.grapecity.com.cn/Sp ... os/initializeSpread

煎鱼你好 · 煎鱼你好

ClarkPan 发表于 2018-9-7 16:57
明白了您的初始化错了啊您用的是findControl，findControl是初始化之后再去获得spread对象的时候可以用这个 ...

非常感谢您的回复，初始化这块我确实没想到，基础还是不够扎实。我又去看了一下代码，发现我已经在别的页面进行过初始化了，那这个地方如果不使用findcontrol方法的话，该怎么去获取spread对象呢？感谢您的耐心解答，祝您周末愉快！

Clark.Pan · Clark.Pan

如果在别的地方已经初始化了，用findcontrol应该是能够拿到spread对象的。
您这里没拿到，我觉得可能有以下原因：
1.初始化的与findcontrol获取的不是同一个dom对象
2.findcontrol获取是页面中已经不存在这个dom对象了。

煎鱼你好 · 煎鱼你好

ClarkPan 发表于 2018-9-10 13:45
如果在别的地方已经初始化了，用findcontrol应该是能够拿到spread对象的。
您这里没拿到，我觉得可能有以 ...

那也就是说，应该不是页面加载顺序的问题了，spread应该随着dom框架加载完成已经随之一同加载了。这样的话我再研究研究，如果有问题再向您请教，谢谢您的耐心解答。

Clark.Pan · Clark.Pan

您也可以提供一个重现问题的demo,我这边一块帮您查，这样效率更高

煎鱼你好 · 煎鱼你好

本帖最后由煎鱼你好于 2018-9-12 09:41 编辑

ClarkPan 发表于 2018-9-11 09:15
您也可以提供一个重现问题的demo,我这边一块帮您查，这样效率更高

谢谢啦，这个问题我先研究研究，如果研究不出来再向您请教

。借这个帖子问一个相关问题，SpreadJS是否有浏览器兼容方面的问题呢？比如我使用右键菜单功能，在Chrome上一切正常，但是在火狐的浏览器上，本来被禁止的浏览器默认右键菜单没有被禁止，而是会和自定义的右键菜单一同弹出。

demo我也一并提供在下方，感谢您的耐心解答。

//右键点击触发
function processSpreadContextMenu(e)
{
// move the context menu to the position of the mouse point
var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
var activeSheet = spreadtemp.getActiveSheet();
var target = getHitTest(e.pageX, e.pageY, activeSheet),
      hitTestType = target.hitTestType,
      row = target.row,
      col = target.col,
      selections = activeSheet.getSelections();

var isHideContextMenu = false;

// if (hitTestType === GcSpread.Sheets.SheetArea.colHeader)
// {
//    if (getCellInSelections(selections, row, col) === null)
//    {
//       activeSheet.setSelection(-1, col, activeSheet.getRowCount(), 1);
//    }
//    if (row !== undefined && col !== undefined)
//    {
//       $(".context-header").show();
//       $(".context-cell").hide();
//    }
// } else if (hitTestType === GcSpread.Sheets.SheetArea.rowHeader)
// {
//    if (getCellInSelections(selections, row, col) === null)
//    {
//       activeSheet.setSelection(row, -1, 1, activeSheet.getColumnCount());
//    }
//    if (row !== undefined && col !== undefined)
//    {
//       $(".context-header").show();
//       $(".context-cell").hide();
//    }
// } else if (hitTestType === GcSpread.Sheets.SheetArea.viewport)
// {
//    if (getCellInSelections(selections, row, col) === null)
//    {
//       activeSheet.clearSelection();
//       activeSheet.endEdit();
//       activeSheet.setActiveCell(row, col);
//       updateMergeButtonsState();
//    }
//    if (row !== undefined && col !== undefined)
//    {
//       $(".context-header").hide();
//       $(".context-cell").hide();
//       showMergeContextMenu();
//    } else
//    {
//       isHideContextMenu = true;
//    }
// } else if (hitTestType === GcSpread.Sheets.SheetArea.corner)
// {
//    activeSheet.setSelection(-1, -1, activeSheet.getRowCount(), activeSheet.getColumnCount());
//    if (row !== undefined && col !== undefined)
//    {
//       $(".context-header").hide();
//       $(".context-cell").show();
//    }
// }

var $contextMenu = $("#spreadContextMenu");
$contextMenu.data("sheetArea", hitTestType);
if (isHideContextMenu)
{
      hideSpreadContextMenu();
} else
{
      $contextMenu.css({ left: e.pageX, top: e.pageY });
      $contextMenu.show();

      $(document).on("click.contextmenu", function ()
      {
         if ($(event.target).parents("#spreadContextMenu").length === 0)
         {
            hideSpreadContextMenu();
         }
      });
}
}

//右键菜单点击触发
function processContextMenuClicked()
{
var action = $(this).data("action");
var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
var activeSheet = spreadtemp.getActiveSheet();
var sheetArea = $("#spreadContextMenu").data("sheetArea");

hideSpreadContextMenu();

switch (action)
{
      // case "cut":
      //    GcSpread.Sheets.SpreadActions.cut.call(activeSheet);
      //    break;
      // case "copy":
      //    GcSpread.Sheets.SpreadActions.copy.call(activeSheet);
      //    break;
      // case "paste":
      //    GcSpread.Sheets.SpreadActions.paste.call(activeSheet);
      //    break;
      // case "cleardata":
      //    var selectedcells = activeSheet.getSelections();
      //    var rows = selectedcells[0].row; //the start row of selected ranges;
      //    var rowCounts = selectedcells[0].rowCount; //the number of selected rows;
      //    // var rows2 = rows + rowCounts - 1;
      //    var cols = selectedcells[0].col; //the start column of selected ranges;
      //    var colCounts = selectedcells[0].colCount; //the number of selected column;
      //    // var cols2 = cols + colCounts - 1;
      //    activeSheet.clear(rows,cols,rowCounts,colCounts,GcSpread.Sheets.SheetArea.viewport,GcSpread.Sheets.StorageType.Data);
      //    break;
      // case "clearstyle":
      //    var selectedcells = activeSheet.getSelections();
      //    var rows = selectedcells[0].row; //the start row of selected ranges;
      //    var rowCounts = selectedcells[0].rowCount; //the number of selected rows;
      //    var cols = selectedcells[0].col; //the start column of selected ranges;
      //    var colCounts = selectedcells[0].colCount; //the number of selected column;
      //    activeSheet.clear(rows,cols,rowCounts,colCounts,GcSpread.Sheets.SheetArea.viewport,GcSpread.Sheets.StorageType.Style);
      //    break;
      // case "insertrow":
      //    activeSheet.addRows(activeSheet.getActiveRowIndex(), 1);
      //    break;
      // case "insertcol":
      //    // activeSheet.addColumns(activeSheet.getActiveColumnIndex(), 1);
      //    // insertcol()
      //    break;
      // case "deleterow":
      //    activeSheet.deleteRows(activeSheet.getActiveRowIndex(), 1);
      //    break;
      // case "deletecol":
      //    activeSheet.deleteColumns(activeSheet.getActiveColumnIndex(), 1);
      //    break;
      // case "delete":
      //    if (sheetArea === GcSpread.Sheets.SheetArea.colHeader)
      //    {
      //       activeSheet.deleteColumns(activeSheet.getActiveColumnIndex(), 1);
      //    } else if (sheetArea === GcSpread.Sheets.SheetArea.rowHeader)
      //    {
      //       activeSheet.deleteRows(activeSheet.getActiveRowIndex(), 1);
      //    }
      //    break;
      // case "merge":
      //    var sel = activeSheet.getSelections();
      //    if (sel.length > 0)
      //    {
      //       sel = sel[sel.length - 1];
      //       activeSheet.addSpan(sel.row, sel.col, sel.rowCount, sel.colCount, GcSpread.Sheets.SheetArea.viewport);
      //    }
      //    updateMergeButtonsState();
      //    break;
      // case "unmerge":
      //    var sels = activeSheet.getSelections();
      //    for (var i = 0; i < sels.length; i++)
      //    {
      //       var sel = getActualCellRange(sels, activeSheet.getRowCount(), activeSheet.getColumnCount());
      //       for (var r = 0; r < sel.rowCount; r++)
      //       {
      //          for (var c = 0; c < sel.colCount; c++)
      //          {
      //                var span = activeSheet.getSpan(r + sel.row, c + sel.col, GcSpread.Sheets.SheetArea.viewport);
      //                if (span)
      //                {
      //                   activeSheet.removeSpan(span.row, span.col, GcSpread.Sheets.SheetArea.viewport);
      //                }
      //          }
      //       }
      //    }
      //    updateMergeButtonsState();
      //    break;
      // default:
      //    break;
}
}

function hideSpreadContextMenu()
{
$("#spreadContextMenu").hide();
$(document).off("click.contextmenu");
}

function updateMergeButtonsState()
{
var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
var activeSheet = spreadtemp.getActiveSheet();
var sels = activeSheet.getSelections(),
      mergable = false,
      unmergable = false;

sels.forEach(function (range)
{
      var ranges = activeSheet.getSpans(range),
         spanCount = ranges.length;

      if (!mergable)
      {
         if (spanCount > 1 || (spanCount === 0 && (range.rowCount > 1 || range.colCount > 1)))
         {
            mergable = true;
         } else if (spanCount === 1)
         {
            var range2 = ranges[0];
            if (range2.row !== range.row || range2.col !== range.col ||
                  range2.rowCount !== range2.rowCount || range2.colCount !== range.colCount)
            {
                  mergable = true;
            }
         }
      }
      if (!unmergable)
      {
         unmergable = spanCount > 0;
      }
});

$("#mergeCells").attr("disabled", mergable ? null : "disabled");
$("#unmergeCells").attr("disabled", unmergable ? null : "disabled");
}

function getHitTest(pageX, pageY, sheet)
{
var offset = $("#statements_sheet").offset(),
         x = pageX - offset.left,
         y = pageY - offset.top;
var spreadtemp = GcSpread.Sheets.findControl(document.getElementById("statements_sheet"));
var activeSheet = spreadtemp.getActiveSheet();
return activeSheet.hitTest(x, y);
}

function getCellInSelections(selections, row, col)
{
var count = selections.length, range;
for (var i = 0; i < count; i++)
{
      range = selections;
      if (range.contains(row, col))
      {
         return range;
      }
}
return null;
}

function getActualCellRange(cellRange, rowCount, columnCount)
{
if (cellRange.row === -1 && cellRange.col === -1)
{
      return new spreadNS.Range(0, 0, rowCount, columnCount);
}
else if (cellRange.row === -1)
{
      return new spreadNS.Range(0, cellRange.col, rowCount, cellRange.colCount);
}
else if (cellRange.col === -1)
{
      return new spreadNS.Range(cellRange.row, 0, cellRange.rowCount, columnCount);
}

return cellRange;
}

function showMergeContextMenu()
{
// use the result of updateMergeButtonsState
if ($("#mergeCells").attr("disabled"))
{
      $(".context-merge").hide();
} else
{
      $(".context-cell.divider").show();
      $(".context-merge").show();
}

if ($("#unmergeCells").attr("disabled"))
{
      $(".context-unmerge").hide();
} else
{
      $(".context-cell.divider").show();
      $(".context-unmerge").show();
}
}

$(document).ready(function ()
{
$("#statements_sheet").bind("contextmenu", processSpreadContextMenu);

$("#spreadContextMenu a").click(processContextMenuClicked);// a 对应 a标签

$(document).on("contextmenu", function ()
{
      event.preventDefault();
      return false;
});
});

Clark.Pan · Clark.Pan

您火狐浏览器版本是多少，我这边测试没问题，版本截图如下：
image.png635849914.png

测试demo地址：
https://demo.grapecity.com.cn/Sp ... os/initializeSpread

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

[已处理] SpreadJS 自定义快捷键相关

15 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄