超越前端Beyond Frontend 吉密斯/gMIS 增加點選/PickUp概覽功能

「….總是拿著微不足道的成就來騙自己….，

總是靠一點酒精的麻醉才能夠睡去….」

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

超越前端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」。

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

（gmis-pickup-full-mode）

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

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）

當用戶在默認減縮模式下無法滿足檢索需求時，可以點擊右上角的「+更多」來顯示全部可供使用的篩選條件。對應的，當用戶在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 是一種基於 -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.

降低成本,

提高效率.

「…看看可愛的天，摸摸真實的臉，

…想想長長的路，擦擦腳下的鞋…」

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！