Day10 点亮单元格行列标题

返回目录

 

以下知识源码位置: [Git:  https://gitee.com/zhouweng/mini_sheet  version=3cb8856a7c1ead8226722ec225e266ec6b96b539]

源代码回滚版本，参考这里[ https://blog.youkuaiyun.com/u010593516/article/details/113767587 ]

 

本节概要：首先对项目进行两点小优化，然后介绍如何点亮单元格对应的行列标题。

 

首先修正一个bug，在编辑单元格之后，点选其他单元格，编辑单元格样式没有被隐藏起来，如下：

 

修正方法：controllers/updateCell.js 的 refreshCell() 在刷新单元格的时候，增加下面两行：

    $("#luckysheet-input-box").removeAttr("style");

    $("#luckysheet-input-box-index").hide();

现在看起来就正常了

 

 

接下来，我们做一个代码优化，我们看luckysheet 的handler.js里面存在大量 鼠标点击左键，获取单元格信息的代码段如下:

[代码片段Day10-1]

        // Get mouse's position from location.js

        let mouse = mouseposition(event.pageX, event.pageY);

        if (mouse[0] >= Store.cellmainWidth - Store.cellMainSrollBarSize 

         || mouse[1] >= Store.cellmainHeight - Store.cellMainSrollBarSize) {

            return;

        }

        let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();

        let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();

        console.log("movedown x/y="+x+":"+y)

        console.log("    main L/T="+$("#luckysheet-cell-main").scrollLeft()+":"+$("#luckysheet-cell-main").scrollTop())

        let row_location = rowLocation(y),

            row = row_location[1],

            row_pre = row_location[0],

            row_index = row_location[2];

        let col_location = colLocation(x),

            col = col_location[1],

            col_pre = col_location[0],

            col_index = col_location[2];

 

我们将这一部分代码抽象成一个函数，放在location.getMouseClickedPos()，这样代码更加简洁。

这样在handler里面的[代码片段Day10-1]就可以精简为下面几行代码：

        // Get mouse's position from location.js

        let mouseClickPos = getMouseClickedPos(event);

        let row = mouseClickPos[0][1],

            row_pre = mouseClickPos[0][0],

            row_index = mouseClickPos[0][2];

        let col = mouseClickPos[1][1],

            col_pre = mouseClickPos[1][0],

            col_index = mouseClickPos[1][2];

location.getMouseClickedPos() 的返回参数信息量还是很大的，包括了当前单元格和上一个单元格（对于行来说是左边，对于列来说是上边）的信息。

 

 

最后，进入今天的第三部分，如何在选定单元格之后，点亮单元格对应的行列标题，效果如下：

 

修改文件：

1.controllers/constant.js:在 id="luckysheet-cols-h-c" 下面增加 id="luckysheet-cols-h-selected"

id="luckysheet-rows-h" 下面增加 id="luckysheet-rows-h-selected"

新增行和列标题的选定元素

2.controllers/select.js: 增加 selectTitlesShow() 高亮显示 constant.js 新定义的两个HTML元素。

  在用户点击某个单元格之后，会调用上面这个函数，把 Store.luckysheet_select_save里面记录的单元格对应行列标题点亮。

  在luckysheet里面，因为可以选择多个单元格，所以用到了循环进行处理。这个版本的minisheet只支持点击单个单元格，

  所以只需要提取数组第一个元素标记就可以了。

 

今天就到这里,这个版本的minisheet的代码量已经突破2K。