最近在内部系统里点来点去的时候发现了下面这个小问题。在Advance Search里面的Search Result表格中，如果先排序某列然后再设置一个过滤器，过滤器和排序的小图标就神奇般的都消失了。
放大这两个小图标给大家看，排序的以升序排序为例，除了降序排序图标以外其实小图标的形式还不止以下这些，且听后文细细道来。
联系了我们的开发，不出三天就生成了新的note 2615706 - Table filter/sort icons are sporadically missing解决了这个问题。效率高啊。赞一个。
我很好奇，想看看是什么样的bug，没准能看出过滤和排序小图标的显示机理，于是打开看了这个note里面修改的程序
哦，萝卜应该赋值给萝卜，黄瓜应该赋值给黄瓜，对应错了。但是完全看不出跟这两个图标的显示有什么关系。打算推敲一下。
就从这段程序debug起
程序生成了一串hidden input用来传参数到前端，生成的HTML如下。看到这里的#:#和#!#就马上有一种不明觉厉的感觉。
<input type="hidden" name="C31_W109_V110_V112_Table_sortValue" id="C31_W109_V110_V112_Table_sortValue" value="ACCOUNT_NAME#:#asc#!#"/>
我对前端的JS等一直懵懵懂懂，觉得探索到这里有点头疼了，难道是由JS控制的。决定还是尝试一下先不去触碰JS。使用F12先来研究一下这个screen element是什么东东。
然后仔细观察这个element的style，发现这个element继承了上层的一个属性拥有一个背景图片。
这个图片是啥？跑去后台GUI的SE80看一下，celler_up1_filter.gif就是我正在研究的小图标。而且惊喜地发现，不是过滤器图标加上排序图标，而是两个在一起的一个小图标。那么这个图标根据不同情况会变化，又是通过什么控制的呢?
继续研究F12，既然提示是继承来的，那么就看看上层的element有什么线索
仔细看上层的element会发现这个背景图片来自于element.style而不是class的CSS文件中定义的属性，也就是能在左边html源文件里面看到图片的信息。说明这个图片是通过ABAP程序直接付给该element的，应该在ABAP端能看到，这个对于我这个JS盲来说真是福音啊。然后继续观察这个element使用的诸多class中已经有表述该列是即被排序又被过滤过的th-clr-cel-sorted-filtered，同时还能看到th-clr-cel-sorted-asc等class id。
在WebUI里面生成页面html元素的最基本的ABAP class通常都是这样的命名规则
CL_*HTMLB_<screen element>
就这里一直在研究的search result表格而言，又借鉴note 2615706里面使用到的CL_THTMLB_CELLERATOR，我决定先在这个class里面尝试一下。直接大胆搜索th-clr-cel-sorted-filtered这个html class。
迅速定位到了Method RENDER_CELL，被定位的程序附近还是没有说到背景图片的事情，直接搜索图片的名字没有结果，其实在se80里面我们已经发现除了celler_up1_filter.gif以外还有up2，up3等等，估计这个小图标的图片名称是按照逻辑拼出来的。幸亏这个Method的总长度不是很长，稍微读一下就不难找到下面这段逻辑，原来图片的名字就是这样拼出来的，加入了html里面。
观察以上这段程序还有一个发现，这里有一段程序读取当前排序gt_sort里面的序列号，这就解释了为什么SE80里面会有1啊2啊3啊。这是什么功能呢？这个呢是一个由Note 2131434 - Multi-Column Sorting on Tables引入的新功能。在这个note之前search result里面同时只能排序一个字段，现在我们可以通过点personalize定义最多三个排序字段。如下，仔细看那个正序和倒序排练的图标上方或者下方分别是一个点，两个点，三个点来表示多重排序。很有意思的小功能吧？
到这一步其实最初提出的问题已经找到答案了。但是还有如下没有解答的问题：
那么为什么note 2615706提到的RENDER_HIDDEN_FIELDS里原来的程序能造成该图标无法显示呢？
在CL_THTMLB_CELLERATOR里的RENDER_HIDDEN_FIELDS和RENDER_CELL全部放上断点，然后在RENDER_HIDDEN_FIELDS里面模拟还是note 2615706之前的程序，把<ls_sort>-column的值付给<ls_sort>-value。
看到如下的拼图标文件名称的过程。拼出来的名字是不存在的，所以无法显示。
豁然开朗了吗？还是没有，在上面debug的过程中发现每一次都是RENDER_CELL方法先于RENDER_HIDDEN_FIELDS被叫到，也就是说影响这次图标文件名生成的是上一次RENDER_CELL里错误的赋值？
我们再做一遍以下操作，模拟note 2615706前的错误情况，同时开启F12的Network：
看看Network里面的结果。这里可以很清晰地看到，有一条红色，这个celler1_filter.gif没有取到。前后两次都成功取到图标了。那么我们来关心一下这个图片之前的那行
第一步，asc指令由前端正确发往后端，也拼出了正确的小图标文件名。
第二步，由于后端在RENDER_HIDDEN_FIELDS里面把asc错误的赋值成了列名，返回前端，所以在设置过滤器的时候，读出来的先前的排序状态是错误的，没法解析成正序或者倒序指令，造成拼成了错误的小图标文件名。
第三步，再次触发排序操作，一个崭新的asc指令发往后端，所以这次又能正确显示了。
到此为止本次推敲告一段落了。
为了避免我的行文思路给您带来的困扰，想总结一下本文主要说了以下这几点：
本文没有涉及，本文作者缺乏相关知识的是（欢迎交流）：
放大这两个小图标给大家看，排序的以升序排序为例，除了降序排序图标以外其实小图标的形式还不止以下这些，且听后文细细道来。
联系了我们的开发，不出三天就生成了新的note 2615706 - Table filter/sort icons are sporadically missing解决了这个问题。效率高啊。赞一个。
我很好奇，想看看是什么样的bug，没准能看出过滤和排序小图标的显示机理，于是打开看了这个note里面修改的程序
哦，萝卜应该赋值给萝卜，黄瓜应该赋值给黄瓜，对应错了。但是完全看不出跟这两个图标的显示有什么关系。打算推敲一下。
就从这段程序debug起
程序生成了一串hidden input用来传参数到前端，生成的HTML如下。看到这里的#:#和#!#就马上有一种不明觉厉的感觉。
<input type="hidden" name="C31_W109_V110_V112_Table_sortValue" id="C31_W109_V110_V112_Table_sortValue" value="ACCOUNT_NAME#:#asc#!#"/>
我对前端的JS等一直懵懵懂懂，觉得探索到这里有点头疼了，难道是由JS控制的。决定还是尝试一下先不去触碰JS。使用F12先来研究一下这个screen element是什么东东。
然后仔细观察这个element的style，发现这个element继承了上层的一个属性拥有一个背景图片。
这个图片是啥？跑去后台GUI的SE80看一下，celler_up1_filter.gif就是我正在研究的小图标。而且惊喜地发现，不是过滤器图标加上排序图标，而是两个在一起的一个小图标。那么这个图标根据不同情况会变化，又是通过什么控制的呢?
继续研究F12，既然提示是继承来的，那么就看看上层的element有什么线索
仔细看上层的element会发现这个背景图片来自于element.style而不是class的CSS文件中定义的属性，也就是能在左边html源文件里面看到图片的信息。说明这个图片是通过ABAP程序直接付给该element的，应该在ABAP端能看到，这个对于我这个JS盲来说真是福音啊。然后继续观察这个element使用的诸多class中已经有表述该列是即被排序又被过滤过的th-clr-cel-sorted-filtered，同时还能看到th-clr-cel-sorted-asc等class id。
在WebUI里面生成页面html元素的最基本的ABAP class通常都是这样的命名规则
CL_*HTMLB_<screen element>
就这里一直在研究的search result表格而言，又借鉴note 2615706里面使用到的CL_THTMLB_CELLERATOR，我决定先在这个class里面尝试一下。直接大胆搜索th-clr-cel-sorted-filtered这个html class。
迅速定位到了Method RENDER_CELL，被定位的程序附近还是没有说到背景图片的事情，直接搜索图片的名字没有结果，其实在se80里面我们已经发现除了celler_up1_filter.gif以外还有up2，up3等等，估计这个小图标的图片名称是按照逻辑拼出来的。幸亏这个Method的总长度不是很长，稍微读一下就不难找到下面这段逻辑，原来图片的名字就是这样拼出来的，加入了html里面。
观察以上这段程序还有一个发现，这里有一段程序读取当前排序gt_sort里面的序列号，这就解释了为什么SE80里面会有1啊2啊3啊。这是什么功能呢？这个呢是一个由Note 2131434 - Multi-Column Sorting on Tables引入的新功能。在这个note之前search result里面同时只能排序一个字段，现在我们可以通过点personalize定义最多三个排序字段。如下，仔细看那个正序和倒序排练的图标上方或者下方分别是一个点，两个点，三个点来表示多重排序。很有意思的小功能吧？
到这一步其实最初提出的问题已经找到答案了。但是还有如下没有解答的问题：
那么为什么note 2615706提到的RENDER_HIDDEN_FIELDS里原来的程序能造成该图标无法显示呢？
在CL_THTMLB_CELLERATOR里的RENDER_HIDDEN_FIELDS和RENDER_CELL全部放上断点，然后在RENDER_HIDDEN_FIELDS里面模拟还是note 2615706之前的程序，把<ls_sort>-column的值付给<ls_sort>-value。
看到如下的拼图标文件名称的过程。拼出来的名字是不存在的，所以无法显示。
豁然开朗了吗？还是没有，在上面debug的过程中发现每一次都是RENDER_CELL方法先于RENDER_HIDDEN_FIELDS被叫到，也就是说影响这次图标文件名生成的是上一次RENDER_CELL里错误的赋值？
我们再做一遍以下操作，模拟note 2615706前的错误情况，同时开启F12的Network：
- 第一步，排序；
- 第二步，设过滤器；
- 第三步，再次排序；
看看Network里面的结果。这里可以很清晰地看到，有一条红色，这个celler1_filter.gif没有取到。前后两次都成功取到图标了。那么我们来关心一下这个图片之前的那行
第一步，asc指令由前端正确发往后端，也拼出了正确的小图标文件名。
第二步，由于后端在RENDER_HIDDEN_FIELDS里面把asc错误的赋值成了列名，返回前端，所以在设置过滤器的时候，读出来的先前的排序状态是错误的，没法解析成正序或者倒序指令，造成拼成了错误的小图标文件名。
第三步，再次触发排序操作，一个崭新的asc指令发往后端，所以这次又能正确显示了。
到此为止本次推敲告一段落了。
为了避免我的行文思路给您带来的困扰，想总结一下本文主要说了以下这几点：
- 分析表格中过滤或者排序小图标显示的机制是什么
- Chrome F12 Element和Network在此类问题中分析的方法
- 一个小bug，note 2615706 - Table filter/sort icons are sporadically missing， 有时候过滤和排序图标会消失
- 一个小的好功能，note 2131434 - Multi-Column Sorting on Tables，多个字段排序
- Web ui页面生成的ABAP逻辑多在CL_*HTMLB_<screen element>中
本文没有涉及，本文作者缺乏相关知识的是（欢迎交流）：
- 排序和过滤对表格数据条目显示的影响是怎样展开的，是纯前端行为还是后端？
- 有时候用F12 Network无法捕捉到celler_up1_filter.gif读取，这是为什么？
- SAP Managed Tags:
| User | Count |
|---|---|
| 4 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
