一、摘要

Tag標籤類似於分類，可以用於標記、區分事物，但又不同於分類，通常分類是單一所屬，而Tag往往是多個。如純淨水596ml它屬於純淨水分類，可以標記：596ml、純淨水、掃碼有獎等tag。本文討論限於企業資訊系統中的tag標籤應用，涉及2部分內容：tag標籤資料庫設計，前端頁面如何基於多選元件bootstrap-select實現tag編輯。

二、Tag實現

通常來說Tag有2種實現方式：邏輯與、或運算，關聯表。

1、邏輯運算

看個案例，一道多選題：
構建社會主義和諧社會，與建設社會主義物質文明、精神文明、政治文明是有機統一的，其中主要是指(　)。
　　A. 發展生產力不斷增強和諧社會的物質基礎
　　B. 發展社會主義民主不斷加強和諧社會的政治法律保障
　　C. 發展先進文化不斷鞏固和諧社會的精神支撐
　　D. 和諧社會建設不斷為以上“三個文明建設”創造有利的社會條件
　　假設參考答案:A,C,D
Tag實現：

將A選項，值定義為 1, 0x1<<0；
將B選項，值定義為 2, 0x1<<1；
將C選項，值定義為 4, 0x1<<2；
將D選項，值定義為 8, 0x1<<3；

2）邏輯或計算，答案ACD = 1 | 4 | 8 = 13
3）比較答案（ACD，ADC，CDA，CAD等）選項邏輯或是否 == 13？

2、關聯表實現，具體如下文

3、兩者比較

個數較少、已知數量的標籤建議邏輯運算實現，簡單、便捷；其它的建議通過關聯表實現，程式程式碼量略大，但是靈活、強大。

三、Tag資料表設計、實現

1、資料表設計

經銷商表：sale_customer

CREATE TABLE `sale_customer` (
  `sid` bigint(32) NOT NULL AUTO_INCREMENT,
  `client_name` varchar(100) NOT NULL,
  `tag_ids` varchar(30) NOT NULL,
  `tag_names` varchar(100) NOT NULL,
  ...
  PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

標籤表：sys_tag

CREATE TABLE `
 
sys_tag` (
  `sid` bigint(32) NOT NULL AUTO_INCREMENT,
  `tag_type` varchar(30) NOT NULL,
  `tag_name` varchar(100) NOT NULL,
  `write_uid` bigint(32) DEFAULT NULL,
  `write_date` datetime DEFAULT NULL,
  PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

tag_type為tag型別，如client_tag用於經銷商，supplier_tag用於供應商等。

標籤對應關係：sys_tag_ref

CREATE TABLE `sys_tag_ref` (
  `sid` bigint(32) NOT NULL AUTO_INCREMENT,
  `tag_type` varchar(30) DEFAULT NULL,
  `ref_id` bigint(32) NOT NULL,
  `tag_id` bigint(32) NOT NULL,
  `write_uid` bigint(32) DEFAULT NULL,
  `write_date` datetime DEFAULT NULL,
  PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

ref_id關聯ID，如tag_type = ‘client_tag’，則ref_id為經銷商ID。

2、資料演示

經銷商資料

Tag資料

Tag對應關係

3、資料操作說明

經銷商渠道型別修改，會：
1）修改經銷商表的tag_ids, tag_names，多個標籤用英文逗號分隔；
2）增加或刪除sys_tag_ref對應關係；

渠道型別查詢：查詢嬰童渠道的經銷商，或傳統渠道、餐飲渠道的經銷商，以mysql為例，sql如下：

-- 查詢渠道型別：傳統渠道、餐飲渠道的經銷商
select distinct a.sid, a.client_name, a.tag_ids, a.tag_names
from sale_customer a, sys_tag_ref b
where b.tag_type = 'client_catg' and FIND_IN_SET(b.tag_id, '1,2')
and b.ref_id = a.sid

結果：

四、前端頁面bootstrap-select多選元件編輯實現

1、引入bootstrap-select需要的js、css檔案，此處略去

2、html片段

<div class="form-horizontal clearfix">
	<div class="form-group">
    		<div class="col-xs-2">
    			<select id="select1" class='selectpicker form-control input-sm' multiple size=1 data-none-selected-text="-- 渠道型別 --">
    				<option value = 1>傳統渠道</option>
    				<option value = 2>餐飲渠道</option>
    				<option value = 3>嬰童渠道</option>
    			</select>
  			</div>
		<div class="col-xs-2">
			<button type="button" class="btn btn-primary btn-sm" id="btn1">設定渠道型別: 1,2</button>
		</div>
	</div>
	<div class="form-group">
		<div class="col-xs-2">
    			<select id="select2" class='selectpicker form-control input-sm' multiple size=1 data-none-selected-text="-- 渠道型別 --">
    				<option value = 1>傳統渠道</option>
    				<option value = 2>餐飲渠道</option>
    				<option value = 3>嬰童渠道</option>
    			</select>
  			</div>
		<div class="col-xs-2">
			<button type="button" class="btn btn-primary btn-sm" id="btn2">獲取渠道型別</button>
		</div>
		<div class="col-xs-4">
			<input type="text" class="form-controm input-sm" style="width:100%" id="tag_ids"  readonly disabled="disabled" />
		</div>
	</div>
</div>

js程式碼片段

$(document).ready(function(){
	$("#btn1").on("click", function() {
		var tag_is = "1,2";	//經銷商tag_ids
		$("#select1").selectpicker('val', tag_is.split(','));
	});
	
	$("#btn2").on("click", function() {
		var tag_ids = ($("#select2").val() || []).join(","), tag_names = "";
		$("#select2 option:selected").each(function(){
			tag_names += (tag_names=="") ? $(this).html() : ","+$(this).html();
		});
		$("#tag_ids").val("tag_ids: " + tag_ids + ", tag_names: " + tag_names);
	});
});

圖一：

圖二：

操作說明：
1）“設定渠道型別：1,2”按鈕，多選元件賦值，點選後如圖二所示：下拉框顯示“傳統渠道,餐飲渠道”
2）使用者選中餐飲渠道，嬰童渠道後，點選“獲取渠道型別”按鈕得到：tag_ids、tag_names，加上經銷商ID，傳到後臺即可更新經銷商記錄的渠道型別資訊。