谈谈企业信息系统tag标签数据库设计及基于多选组件bootstrap-select的实现

一、摘要

Tag标签类似于分类，可以用于标记、区分事物，但又不同于分类，通常分类是单一所属，而Tag往往是多个。如纯净水596ml它属于纯净水分类，可以标记：596ml、纯净水、扫码有奖等tag。本文讨论限于企业信息系统中的tag标签应用，涉及2部分内容：tag标签数据库设计，前端页面如何基于多选组件bootstrap-select实现tag编辑。

二、Tag实现

通常来说Tag有2种实现方式：逻辑与、或运算，关联表。

1、逻辑运算

看个案例，一道多选题： 构建社会主义和谐社会，与建设社会主义物质文明、精神文明、政治文明是有机统一的，其中主要是指(　)。 　　A. 发展生产力不断增强和谐社会的物质基础 　　B. 发展社会主义民主不断加强和谐社会的政治法律保障 　　C. 发展先进文化不断巩固和谐社会的精神支撑 　　D. 和谐社会建设不断为以上“三个文明建设”创造有利的社会条件 　　假设参考答案:A,C,D Tag实现： 1）给每个选项定义值

将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、数据演示

经销商数据

ID经销商名称渠道ID渠道名称1经销商11,2传统渠道,餐饮渠道2经销商22餐饮渠道3经销商31,3传统渠道,婴童渠道

Tag数据

ID标签类型标签名称1client_tag传统渠道2client_tag餐饮渠道3client_tag婴童渠道

Tag对应关系

标签类型ref_idtag_idclient_tag经销商11client_tag经销商12client_tag经销商22client_tag经销商31client_tag经销商33

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

结果：

ID经销商名称渠道ID渠道名称1经销商11,2传统渠道,餐饮渠道2经销商22餐饮渠道3经销商31,3传统渠道,婴童渠道

四、前端页面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，传到后台即可更新经销商记录的渠道类型信息。