全球最具影响力的数据智能产业服务和职业发展平台

168大数据

 找回密码
 立即注册

QQ登录

只需一步,快速开始

1 2 3 4 5
开启左侧

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

[复制链接]
发表于 2019-9-8 19:45:57 | 显示全部楼层 |阅读模式
一、摘要
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
[AppleScript] 纯文本查看 复制代码
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
[AppleScript] 纯文本查看 复制代码
CREATE TABLE `sys_tag` ([/color][/size][/font]
[font=微软雅黑][size=3][color=#000000]  `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


[AppleScript] 纯文本查看 复制代码
CREATE TABLE `sys_tag_ref` ([/color][/size][/font]
[font=微软雅黑][size=3][color=#000000]  `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,  --update_date
  PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 

ref_id关联ID,如tag_type = ‘client_tag’,则ref_id为经销商ID。


2、数据演示
经销商数据


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


Tag数据


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


Tag对应关系


标签类型        ref_id        tag_id
client_tag        经销商1        1
client_tag        经销商1        2
client_tag        经销商2        2
client_tag        经销商3        1
client_tag        经销商3        3


3、数据操作说明
经销商渠道类型修改,会:
1)修改经销商表的tag_ids, tag_names,多个标签用英文逗号分隔;
2)增加或删除sys_tag_ref对应关系;


渠道类型查询:查询婴童渠道的经销商,或传统渠道、餐饮渠道的经销商,以mysql为例,sql如下:
[AppleScript] 纯文本查看 复制代码
-- 查找渠道类型:传统渠道、餐饮渠道的经销商[/color][/size][/font]
[font=微软雅黑][size=3][color=#000000]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        经销商1        1,2        传统渠道,餐饮渠道
2        经销商2        2        餐饮渠道
3        经销商3        1,3        传统渠道,婴童渠道
四、前端页面bootstrap-select多选组件编辑实现
1、引入bootstrap-select需要的js、css文件,此处略去
2、html片段
[AppleScript] 纯文本查看 复制代码
<div class="form-horizontal clearfix">[/color][/size][/font]
[font=微软雅黑][size=3][color=#000000]	<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代码片段
[AppleScript] 纯文本查看 复制代码
$(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,传到后台即可更新经销商记录的渠道类型信息。
————————————————
版权声明:本文为CSDN博主「老马历写记」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/chuangxin/article/details/83384140


楼主热帖
168大数据(www.bi168.cn)是国内首家系统性关注大数据科学与人工智能的社区媒体!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

关于我们|小黑屋|Archiver|168大数据 ( 京ICP备14035423号|申请友情链接

GMT+8, 2019-9-22 20:41 , Processed in 0.098868 second(s), 18 queries , Xcache On.

Powered by BI168社区

© 2012-2014 海鸥科技

快速回复 返回顶部 返回列表