我的天

之前说到了Power Query方案不完美，第2天我又更进了一步，真的老老实实做了两层加权平均。效果挺稳定，比之前那个还稳定，因为之前那个方案查询数据是跨表的方式获取，PQ可以跨表查询数据，但在数据转换的时候，可能会遇到一些问题，导致刷新通过不了，于是你得重新刷新，如果你的表格很多，会让你非常的烦恼。我这一次，我采用的方案是用VBA跨表抓取数据，相对于PQ的跨表来说，VBA的跨表更稳定。在不进行文本拼接的前提下，我对VBA里的SQL操作感觉是要比PQ熟练一些。 VBA抓取的数据很快，不会有卡顿的烦恼，除非VBA直接卡死了。VBA卡死的解决方案就是重新拿出之前备份好的那个重新刷。又或者是卡死了之后再弹出Excel，然后你选择把那个东西恢复，这两种通常都能解决问题。如果依然卡死，那么估计你就得重启电脑了，如果重启电脑还是不行，那就换一台电脑吧。前几个月基本上我每天又或者是每隔几天就会遇到VBA卡死，但近段时间又好像没有再遇到，我严重怀疑这跟win10的系统更新有关，尤其是框架的更新。

用VBA抓取数据，然后把那复制到要进行PQ处理的工作簿里，把需要手工填写的东西补上去，然后PQ就可以很快乐地在工作簿内弯曲折叠生成我想要的样式。如果说有什么事让我觉得我非得在PQ里而不想用VBA解决的，大概就只有文本拼接。在PQ、Python又或者真正的SQL里进行文本拼接都是很大路的货色，但是在Excel的SQL里，你就是没有一个很方便的方式实现，你只能把它输出到数组，然后再折腾半天。老领导要求的表格里，总少不了文本拼接。有可能是拼仓号的，有可能是拼品种的，有可能是拼客户的，也有可能是拼各种组合的。如果要拼这么多的东西，我首先想到的就是在PQ里做一个分组。PQ也是一个很神奇的存在，分组的时候就没有办法给我选择文本聚合，其实文本的聚合的方式就是文本拼接。所以每次你都是得随便选一个求和，然后在高级编辑器里面把求和改成文本拼接。

PQ经常让我绕来绕去绕不出去的还有if的使用。在其它编程语言下，括号逗号解决问题，但是M语言里if这些东西都没有。所以当我用常规的思路去进行我的条件设定的时候怎么都不对，最后我不得不使用自动生成的方式，接着才发现原来自己语法错误。

在PQ里使用加权平均，思路来说很简单，就是数量乘以单价求和后再除以数量之和。如果要分步操作，在分组之前要算出一个总价，分组以后在高级编辑器里面修改公式，用总价除以总数量，但实际上也有不需要分两步的方式，但是需要用到list.zip。其实我对PQ并不算太熟悉，在没有查找加权平均的方案之前，我试过用公式套叠，结果发现不行，在list.sum里面选择两个列，然后相乘实际上是不可以的。list.zip那种方式，让我想起了Python里面的元组操作。要完全搞懂PQ，学习成本非常高，他们的各种玩法套叠简直是到了那种让人眼花缭乱的程度，当然，其实Power Pivot，也就是DAX语言要玩得高深，同样很烧脑。对我这种初级玩家，主要是用来拼接文本的人来说，基本功能能顺利实现也就可以了。最终生成的数据，有一些地方肯定用了加权平均，我手动校核了一下，发现很OK，没有问题，但是我还没有测试过一种先单仓做平均，然后再多仓做平均的数据。这种数据肯定会有，但是今年的前几个月未必一定发生过。

手上的工具多了，用的时候得想想用那个最合适，又或者，联合使用也是个妙招。

以前写网页，都是在记事本里，一个一个字敲。缩进什么的，通常都是用tab完成，因为如果要敲4个空格键，实在太难了，而且那时我也不知道标准做法是4个空格键。我不可能每次都那么准确敲4个空格，如果敲漏了可能就会对不准，会逼死强迫症。我已经不记得以前我是怎么保证那些需要成对出现的东西配对的，所有东西对我来说都像是白纸黑字，所以在记事本里敲跟我在白纸上面写没什么区别。

很多年以后，我开始用Notepad++，那个东西的好处是会根据不同编程语言把标识符都给高亮出来。很智能的地方还有显示到底我配对的是哪一层，这样就让我在查找问题的时候简便了很多。但到这里为止，我做的所有事情也都只是在靠着自己的眼力去完成。

再到后来，当我已经不再设计自己blog网站之后，准确来说，是当我下定决心，要用python去解决blog导出数据转换的时候，我用上了vscode。我使用vscode的时间跟我系统学习python的时间是一致的。一边学习python，一边在vscode里实践。那是我第一次用上那么智能的编辑器。有了那个东西以后，如果我犯了一些低级的错误，马上会有红色波浪线给我标出来，如果有一些可能错，但未必一定是错的东西，就会给我标黄。所以如果我遇到的那些东西，基本上我就不用测试程序了，肯定不会通过的，但即便没有被波浪线，也没有被标黄，测试的时候可能依然得不到我想要的效果，但有时会给我提醒到底是哪一行、运行到什么情况的时候不对劲了。

学习过C，研究过html，也玩过php，去年也着用了office里面的VBA。我觉得就思路呈现而言，python是让我觉得最自由的。因为没有那么多条条框框的格式限制，甚至连配对的括号都不需要，只需要要恰当的缩进就能解决问题。在vscode里，标准的缩进使用4个空格，但你也可以用tab。同时你也可以设定把tab自动转化为4个空格。有了这么方便的缩进。python那些必须用缩进说明层次的问题，完全不是问题。

这一次，当我要做级联下拉网站的时候，我在vscode里写html。在标签配对方面，感觉实在太爽了，标签会自动给我匹配，缩进也会给我自动实现。在写ID、写class的时候，可能会空格乱写，但只要全选之后，Shift+Alt+F就可以做一个格式化。格式化以后，所有东西都是完美的。有时我要引用某个js或者css。引用的不是一个网站链接，而是某层文件夹里面的东西，那个时候vscode把理论上我应该全部敲出来的东西给我变成了下拉的选择题。这些选择题，在我敲打标识符的时候也通常很自然地带出来。标识符这个玩意，在编辑器里，有些会自动带出来，有些不会。不会的时候，非常有可能你脑子里想到的是某个东西，但你手上敲出来却是另外一个玩意，于是就会导致最后完蛋了。让我觉得爽的还有vscode的高亮是我喜欢的那种颜色。以至于习惯了vscode的暗黑配色以后，我把Notepad++的主题颜色也变成了高仿vscode的样式。

以前写网页是因为我要写，现在有了vscode的加持，我觉得我可以写得很舒服。

当我把级联下来网页做出来了以后，发现原来核心数据并没有四层那么多，只有三层，所以我首先简化了一下那个东西。当我把核心数据转换，并套用进去以后，发现有些选项实在太多，有20个以上。这是非常之让人崩溃绝望的，如果你还不知情，你要在20多个东西里面找到你想要的这个东西，非常不容易。所以那一刻我就在想，为什么那个下拉菜单除了单选以外不能进行选项的搜索呢？实际上，有些网站的前端设计的确是具备这个功能的。在不同的系统下，实现这个功能的方式不一样，可以肯定的是在js下，在jQuery的加持之下，是可以实现这个功能的。据说方法也很简单，只要加一个js框架以及它对应的css就能做到。

理想很丰满，现实很骨感，经常会发生这种事情。当你看到那个例子的时候，当你尝试使用的时候觉得真挺不错，可以用在自己的东西上面，但是当js框架和css都引用过去以后发现跟自己的网站水土不服。有些东西直接就不见了，有些东西直接就变了个样，完全不受控。

传统的select不可以进行多选以及选项搜索，但是加强版的select就可以做到这个效果，那个经典的js框架叫select2。非常好理解，就是select的加强版。用方式也很简单，只要声明一下就可以了，但关键是无论是框架还是框架配套的css，如果你不想全部都要，只想选取其中有用的部分。这几乎是不可能的，起码我觉得以我的水平，我是不可能把那些东西筛选出来，所以只能全套引用。

之前已经说过，经典使用场景中，select下的option没办法直接加特效。因为那个东西不受css的直接控制，基本可以这么说，是一个失控的状态。所以要实现那个功能，大家的方案就是用一些li和span之类的东西从视觉上代替调声，但实际上当你选择的时候，你选择的内容依然是option的东西，但你看到的那些东西带有特效的玩意不是option本身。select2就是用了这种方法。select2可以多选，也可以对选项进行搜索，其强大之处当然不仅仅是美化一下那个不可控的option。

当我搜索可搜索的select的时候，我就遇到过select2，但因为它太强大，放上去又不太合适，所以我pass掉。取而代之地，我开始去研究一个相对来说貌似简单很多的国产版本，但是国产版本，相对于select2来说瑕疵也是比较明显的。因为select2已经经过了很迭代更新，经过很多人的共同开发，所以我遇到的问题之前的人几乎已经遇到过，所以当我搜索那些的时候基本能找到答案，而那个国产的版本，虽然看上去比较简单，但实际上用起来的时候会让你有无数问号，同时也找不到答案。

最终我用了最新版本的select2，然后成功地把自己的经典款级联下拉改成了可搜索版本。接下来，我要对那三个搜索框精准控制，比如第1层跟第2层选项很少，我没有必要提供搜索功能，还有就是在不同的手机浏览器之下，在搜索的时候会自动进行一些放大的操作，然后就会导致整个页面变得畸形，虽然通过手指的缩放可以改变，但是这种步骤会让人觉得很不爽。功能是实现了，但这种不愉快的操作必须的纠正过来。

你越想，就会遇到越多的问题，但这是好事。

花了一个早上的时间写了两个Power Query的方法，主要是用于转换1~4层的标签和第4层对应的具体内容。其实如果有大表，我就是把那个大表分成两片，第1片用方法一处理，第2片用方法二处理，方法一跟方法二重叠的部分就是第4层的标签。

方法一，实际上我是把同一个步骤重复了三遍，分别是取第1第2层，第2第3层和第3第4层。这三个步骤分别对应的就是分类1~3。分类3所包含的内容实际上就是第4层的标签。在研究怎么整这个东西的时候，我只是做了第1第2层，后面那两个重复，我直接复制后修改里面的某些数字，就可以把东西重新定位，然后生成后面两个重复步骤的结果。三个步骤的结果出来了以后合并在一起，就可以直接加工出我想要的json格式。至于方法二，我感觉比方法一还要简单一些，因为实际上就只是做一个步骤而已，但是方法二有一个做超链接的过程，属于有超链接就做，没超链接就不处理。最后json的内容就是把方法一跟方法二的结果全部融在一起，最后一行手动删除一个逗号。

做出这两个PQ方案以后，可以让完全小白的人直接生成json，把相应条目复制到目标json文件，网页接着刷新就可以了。刷新这里可能会遇到浏览器缓存的问题，但这是后话了。PQ方案需要对电脑有要求，准确来说对office的版本有要求， Office 2016以下的可能会有点问题，即便是Office2016专业版也有可能出现某些状况，但我不确定状况一定会发生，因为我很少用那个版本office。虽然可能我一开始接触的Office365是基于Office2016的，但经过这么些年的迭代更新，我不知道现二者在Power Query上有什么差异性，在核心功能上会不会有一些变动。但是这个操作只需要那个处理网页数据的人做一次就可以了，其他人完全不需要涉及，所以即便对office有要求，那么在可以行得通的电脑上操作也就没有问题。主要是Excel数据转json格式的时候需要PQ支持。

Power Query的处理上，我主要在不新增列的情况下直接修改某一列的数据花费时间比较多，比如说在原有的数据上加上一对双引号。如果我要加的不是双引号而是其它乱七八糟的东西，可能我根本不会碰钉子，但因为双引号在PQ里是一个比较特殊的存在，准确来说在所有编程语言里，双引号都是很特别的存在。所以当你要自定义一列，在原来列数据的基础上加上双引号，那么实际上，你在写脚本的时候就得打4个双引号。有些时候你得用4个双引号，有些时候你得用3个双引号，我不知道为什么PQ就是不能让我用反斜杠，如果允许反斜杠的话，我就不会被双引号搞得非常晕了。把那些东西转化为json格式的时候，我必须添加大量的双引号。那个步骤虽然我已经很小心翼翼，但是也不免经常会有各种手贱的操作。另外一个让我手贱的原因是PQ的编辑器不知道为什么会自动给我添加双引号，有可能会给我添加双引号，有可能会给我添加半边括号，反正就是我不想它给我增加的，它老是很自觉不定时增加，于是到最后我不知道为什么出错了，结果发现原来是它给我增加了我不想要的东西。

最终，我花了一个上午实现了我的计划，感觉挺爽的。

网页里面的select和option，这两个东西估计是在一开始出现网页的时候就已经有。周三的时候我发现option的hover效果是无论如何设置不了的，你可以设置option的颜色或者背景，但是hover上去没有效果。你也可以通过css设置select的hover或者focus。该怎么设置这个option呢？最后发现是无解的，所以我又研究了一下其他人的替代方案，有些很酷的网站，他们用js写了个脚本，在option的上面又覆盖了一层由li和span组成的东西，所以你看到的特效实际上是有那些产生的，而不是option本身。那个效果非常的炫酷，但是你要引入大量的js，也要引入大量的css。漂亮是要有代价的，这是显然的，本来我已经想好，要模仿其中一个，结果却突然想到它的下拉可能就只有几个选项，但我的下拉有可能有十几二十个选项。我选定的那种款式，默认没有滚动条，所以这该怎么办呢？所以我只能放弃。

周四当我搜索的时候，我又发现了一个英文网站里面用了纯css实现了option的hover，之所以可以做到这样，是因为他在select那里使用了onfocus之类的事件。为什么onfocus之后就可以设置option呢？之前option做不到的东西，加入了那些事件以后就变得可以做到了。接下来你就可以在option里面设置你想要的东西。本来我觉得自己有救了，之所以说本来，是因为后来我又发现了一些很无语的现实。

做的这个静态网站，我觉得受众大多数是用手机打开的。虽然可能他们准备资料的时候是在电脑旁，但是要查询资料的时候，估计他们不会先打开个电脑。所以这就意味着这个网站的开发我得兼容手机和PC。select和option的展示方式，不同浏览器不一样，手机和电脑不一样，不同的手机品牌也不一样。非常有可能在PC上的效果已经设置得如我所愿，但实际上到了手机上还是自动套用了手机经典的款式，所以等于做了个寂寞，与其这么大费周章，还不如直接放弃治疗。同一个手机，不同浏览器出来效果不一样；再换一个平板，虽然内核都是Chrome， 但实际上又会有差别。我不知道那些人是如何做到兼容这有一切的，起码对我来说这实在太难了。所以我只能尽量做到在不同的设备上效果都过得去。所以在选择字体大小上应该用什么样的比例，我又研究了一番。如果完全就只是一个PC的网页，设置好我想要的也就可以了，大概差不多也就那些字体大小，但是手机上看到的东西我感觉比PC上看到的小很多，于是我不得不把字体放大，但是放得太大，PC上就像一个搞笑的存在。以前body的font-size我都是用绝对像素。这一次我不得不采用相对单位。PC上点击用的是鼠标，图标再小，你都可以准确按到，但手机上你用的是手指，所以那个按钮必定不能太小。这些矛盾的东西，当你不是真的碰上的时候，是不会想象得出来的。

最后，我感觉大概差不多就那样了，剩下的事情就只是等待最终的数据源。