Skip to Content
Author's profile photo Hongyan Shao

表格中的过滤或者排序小图标的显示究竟是什么机制

最近在内部系统里点来点去的时候发现了下面这个小问题。在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指令发往后端,所以这次又能正确显示了。

到此为止本次推敲告一段落了。

 

为了避免我的行文思路给您带来的困扰,想总结一下本文主要说了以下这几点:

  1. 分析表格中过滤或者排序小图标显示的机制是什么
  2. Chrome F12 Element和Network在此类问题中分析的方法
  3. 一个小bug,note 2615706 – Table filter/sort icons are sporadically missing, 有时候过滤和排序图标会消失
  4. 一个小的好功能,note 2131434 – Multi-Column Sorting on Tables,多个字段排序
  5. Web ui页面生成的ABAP逻辑多在CL_*HTMLB_<screen element>中

本文没有涉及,本文作者缺乏相关知识的是(欢迎交流):

  1. 排序和过滤对表格数据条目显示的影响是怎样展开的,是纯前端行为还是后端?
  2. 有时候用F12 Network无法捕捉到celler_up1_filter.gif读取,这是为什么?

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.