SAP CRM checkbox的一個例子，如下圖Main Partner列：

一個用戶肉眼可見的Checkbox，在SAP CRM系統里由總共6個HTML標簽組合而成。

當Checkbox里的勾選中時，最外層的wrapper div標簽的class變為th-sapcb-chkd，chkd是checked的縮寫。 內層a標簽屬性值aria-checked設置為true.

div內層一個隱藏的input標簽，用于同ABAP后臺進行值傳遞，其value屬性值變為X.

當Checkbox勾選時，上述介紹的最外層wrapper div的class變為th-sapcb-blk, blk意為blank; 內層a標簽的aria-checked屬性設置為false，hidden input的value屬性值置空。

而Checkbox的小勾視覺效果，通過a標簽的CSS::before選擇器實現。如上圖黃色所示。

::before選擇器的用法，通過下面這個簡單的例子可以學會——在施加了::before選擇器的HTML元素前部，添加選擇器content屬性指定的內容。

'\e05d’代表小勾：

我們試著在Chrome開發者工具里將這個content屬性值改一改。’\e05c’代表hint，一個小感嘆號：

'\e05d’代表group：

::before選擇器的width和height屬性控制Checkbox矩形框的寬和高：

這一套content屬性值和對應的icon視覺效果圖的映射關系，可以在這個鏈接里獲得：

https://sapui5.hana.ondemand.com/test-resources/sap/ui/core/Icon.html

當然，SAP CRM的開發人員，是不會直接編寫原生的HTML代碼的。在SAP CRM里需要將一個控件定義成Checkbox，只需要實現這個控件綁定的模型節點字段的GET_P方法：

里面將控件的fp_fieldtype設置為field_type_checkbox.

Jerry之前的文章 SAP UI 搜索分頁技術 提到，SAP CRM UI采用服務器端渲染技術，WebClient UI框架基于上述維護的控件元數據，為一個Checkbox控件，在ABAP端渲染出上述介紹的總共7個HTML元素。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP CRM系统UI checkbox的设计与实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。