“….總是拿著微不足道的成就來騙自己….，
總是靠一點酒精的麻醉才能夠睡去….” 

— 臺灣歌手鄭智化《水手》歌詞.

超越前端Beyond Frontend — 吉密斯/gMIS 增加點選勾選（點選）概覽等功能側記。 一直以來，gMIS吉密斯定位於管理操作後臺、生產支撐、運營管控系統，主要面向於生產運營、管理操作人員，鮮有面向終端使用者的機會，所以，設計考慮和實現權衡時，多是可用性，少有易用性。雖然多有追求美的勇氣，終是在這方面難有建樹。

直到寫下這些文字，完成了gMIS具有標誌意義的模組：點選/點選勾選/Pick Up/Click2Select. 從這一功能時，gMIS吉密斯已經具有超越一些前端設計互動能力的模組，強大且便捷。

S1.

基於資料庫的管理系統主要功能是增刪改查，其中的“查”字用的是最多的，可能1:9或者2:8於其他功能模組，也即1分量的增刪改，對應著8~9分量的查，所以 gMIS吉密斯在“查”字上也下足功夫，目前主要的查詢功能包括：

1. List頁面試圖頂部的快捷檢索輸入框； （見下圖）

2. “深度搜索查詢”模組； gmis-deepsearch-with-quicksearch

3. 站內搜尋模組； 參考“-gMIS持續優化更新, +InSiteSearch站內搜尋”，-R/52SN 。

這些模組應對的功能需求各部相同，前兩個是基於單表查詢，後一個是站內所有資料表“合適”欄位的掃描。“點選勾選”已是“查”字上的第四個“搜尋/查詢”模組。

S2.

**“點選勾選概覽”在開啟某一資料表的主體資料的同時，快速掃描主要欄位，並對每一項欄位按一定的規則進行匯聚，如統計去重數，計算區間等，然後生成一個針對該資料表的概覽資料，**並分別置為可供進一步篩選的“選項”，當用戶點選某個“選項”時，下發列表資料自動做相應的更新，當有多個不同維度的“選項”被選擇時，維度之間按“並且”求“交集”；當同一維度的多個選項被選中時，維度內選項按“或者”求“並集”——也即，當用戶點選同一維度的兩個選項時，我們理解為使用者想要“A”或者“B”。

這裡是對目前點選勾選實現的一次升級和超越——合併了多選和單選，整合到一個檢視、同步完成，此其一；其二，在可供統計的維度，提供了聚類統計資料，對要瀏覽的資料能夠一目瞭然，所謂“概覽/概要瀏覽”。

當我們被驅動要實現點選勾選時，我們對目前已經存在的實現做了一番考察。

1. 最先想到的是，幾年前，我們用 GWA2 實現一個周邊度假村資料檢索的站點，其終端/前端頁面對度假村的一些維度，實現了點選。用起來順手，得意。@Shujuan
2. 點選勾選進入大眾視野，並被廣泛接受應該是電商平臺的篩選功能，比如 -京東 ， -天貓 等在商品列表頁，均設計了點選勾選，按不同商品的不同維度，提供了各種篩選組合，其中將多選和單選分開進行。 (pickup-jingdong, 京東商品頁面點選) （pickup-tianmao, 天貓商品頁面點選）

**本質上，點選勾選/點選是為了減少使用者輸入的麻煩。**這種繁瑣來自兩個方面：1）需要使用鍵盤操作，需要錄入相應的關鍵詞；2）有些情況下不知道目標關鍵詞或者拼寫錯誤等。

這次新增的“點選勾選概覽”解決了這個麻煩，使用者無需再手工錄入相應的文字，依據“概覽”提供的相應的線索，可以實現“按圖索驥”一般，逐步篩選出預期的結果集。

S3.

與此前慣常見到的點選不同，gMIS 吉密斯的點選實現，還融合了多選與單選，不再顯示地要求使用者進行多選還是單選，當用戶在同一篩選條件上選擇一個“選項”時，我們理解為是單選，當用戶選擇兩個以上的“選項”時，我們理解為使用者是多選。如此簡單、直白、有力，gMIS 吉密斯這一次超越了前端繁瑣的多選、單選切換，融合單選、多選模式為一種操作模式。 （gmis-pickup-multiple-select）

單獨做某一個/某一類的資料的揀選條件相對容易，正如電商平臺裡所列勾選條件一下，gMIS吉密斯需要一定的通用性，如何面對一個未知的資料集，能夠在沒有配置，第一次遇到時，就能夠自動獲得各種相應的具有統計意義的“概覽”資料？

為實現這一點，我們將“資料”抽象為兩大類——數值型和字元型。對於數值型的欄位資料，我們設計了取值區段，並將可能的區段列出來供點選使用；對於字元型欄位資料，我們使用列舉，並將儘可能多的記錄的選項列在前排。有了這樣的演算法，對於任何給定的資料集，我們能夠快速的排列出可供勾選的篩選條件列表。

這種做法，大多時是可靠的，尤其是對於數值型欄位資料，在獲得最小值Min和最大值Max之後，再輔以求值一個步長，很容易能夠實現列出可供勾選的區段列表。對於字元型，也能夠求得各個欄位值的相應記錄條數，尤其是一些列舉型別的欄位，比如表現在管理後臺的 select/選擇項，或者 enum型別。

S4.

然而，我們不得不在工程實現時考慮異常，由於gMIS吉密斯的實現是通過頁面 組裝通訊地址，然後通過GTAjax 遞交給處理程式到伺服器，然後將返回資料寫入到指定區域，這種依賴JavaScript的功能實現，要考慮如何規避 “+”和空格，如何規避“’”, ‘”‘ 等敏感符號等，由於不能預先獲知被管理資料型別（通用性要求），這些需要預先做相容處理並Cover這樣的場景。

於是，應對計算機符號問題的專家—— -Base62x 再次被排上用場。在生成候選選項列表時，對字元型的值進行 Base62x 編碼（Server端PHP版本），前端點選觸發相應 JavaScript 操作時，也使用同樣的 Base62x編碼（Client端JavaScript版本），當資料被遞交回伺服器端進行查詢或顯現時，又需要做解碼操作，這一部分在 comm/header.inc 中完成. 有了這樣的閉環操作，在管理頁面上顯示為明文的候選項，在通訊和JavaScript程式碼層，則是Base62x編碼後的無符號字串，很好的規避了符號問題，類似的解決方案可參考：“-gMIS 吉密斯優化更新+分組項區段AddGroupBySeg/+複製AddByCopy等（-R/G2SW ）” 提到的“註冊動作registerAct： 改進增加 Base62x.class.js”。

S5.

額外地，點選與現有查詢等功能的互動：1）在List頂部的導航快速搜尋模組，當有選項被點選時，需要將對應的選項列入相應的輸入框中，當List頁面的右上角的“並搜”，“或搜”時，查詢能夠繼續下去。2）當所點選的條件組合沒有查詢到相應結果時，gMIS吉密斯預設會給出當前查詢條件組合並在每一個篩選條件上提供進一步地操作——去掉相應的條件做再一次的搜尋嘗試。這裡就設計到快捷搜尋和點選的互動。在此前的設計中，快捷搜尋，當去掉一個搜尋條件時，重新整理List列表即可，而如果與點選結合，則需要進一步地更新點選的相關選項——選中或者未選中。

關於“選中/Selected”與“未選中/Unselected”，我們在設計時參考了在實現 -UFQI-News 的做法——當某個選項未被選中時，我們以常規的超級連結顯示，並冠以加法符號“+”， 表述為：點選當前以“+”開頭的連結表示在此前的語境上進一步的加上即將選擇的內容；當某個選項已經被選中時，我們以背景色、前景色互換的方式將當前已經被選中的選項標識出來，並冠以“-”減法符號，表述為：點選當前以“-”開頭的連結表示在當前語境中進一步地減去即將點選的內容。 （-UFQI-News）

-UFQI-News 的點選設計正符合這樣的場景，於是就借用得來。當某個待點選的條件尚未被選擇時，冠以加法符號，“+”，意為點選該選項，將在當前語境增加此條件；當某個已被選中的條件呈現時，冠以減法符號，“-”，意為點選該選項，將在當前語境減去此條件。大約符號語言或者“言簡意賅”即是如此。 (gmis-selected-and-unselected）

S6.

通常情況下，可供使用的篩選條件維度，往往會有多個，預設為List頁面所有顯示的欄位均提供了點選概覽，通常這會慢慢地顯示為一整螢幕，從而遮蓋了List內容主體。為此，我們參考電商平臺頁面的篩選條件摺疊功能，預設提供減縮模式，只列每個List頁面的關鍵欄位，也既List頁面左側的3-5個欄位作為候選項列出來。 當遇有不適合作為候選欄位的，則沿著List列表頭部的欄位往後順延，湊齊了3-5個為算。 （gmis-pickup-full-mode-with-more-options）

當用戶在預設減縮模式下無法滿足檢索需求時，可以點選右上角的“+更多”來顯示全部可供使用的篩選條件。對應的，當用戶在full-mode下點選右上角的“-更多”這可以收起富於的候選項，進入減縮模式。

S7.

gMIS吉密斯 點選PickUp功能帶來變更模組摘要： 1）comm/header.inc : + $base62xTag 及相應解碼； 2）comm/ido.js : + fillPickUpReqt; 3) + act/pickup.php 4) + class/pickup.class.php 5) ido.php: + doActionEx with act=pickup 6) jdo.php: +doActionEx with act=pickup 7) class/pagenavi: +containslist, inrangelist

一些繼續的思考和改進： 1）針對一些字元型數值，如果按其值進行聚類統計，字串擷取太長則可能無意義，太短則又太籠統，根據小範圍測試，目前預設值被設定為擷取字元型數值的 240 位元組； 2）針對數值型欄位，其區間的劃分，預設被劃分為 12個區間； 3）字元型或選擇型欄位，如果候選項太多時，預設只顯示前 12個選項。 這些預設值都有待進一步商榷。

(-gmis-logo)

-gMIS 是一種基於 -GWA2 的通用管理資訊系統(Management Information System)應用軟體，具有可配置的輸入和輸出介面、開箱即用等特徵。 可以在其上構建各種管理應用軟體系統，如 內容管理系統（CMS), 客戶資源管理(CRM), 企業資源計劃管理（ERP）， 辦公自動化系統（OA）等, 以及各種行業應用管理系統軟體，如 人力資源管理系統（HR），學生管理，檔案管理，旅遊管理，圖書管理， 商品管理及業務運營支撐系統（BOSS）等等。 實現零程式碼開發、快速搭建各種管理資訊系統（MIS）.

-gMIS is a -GWA2 based Management Information System (MIS) software with characteristics like configurable input and output interfaces, open-box-to-use. Various management application software systems can be built on it, such as Content Management System (CMS), Customer Resource Management (CRM), Enterprise Resource Planning Management (ERP), Office automation systems (OA), as well as different industry application management system softwares, such as Human Resource Management System (HR), Student Management, Archive Management, Tourism Management, Book Management, Commodity management and business operations support systems (BOSS), etc. With zero code development, -gMIS can build a set of management information systems (MIS) software in a few minutes.

Lower Costs, Better Productivity. 降低成本, 提高效率.

“…看看可愛的天，摸摸真實的臉，
…想想長長的路，擦擦腳下的鞋…”

——電視劇《外來妹》主題曲