bootstrap-table.js结合java数据字典展示列值

最新推荐文章于 2022-10-13 22:11:58 发布

羊羊永远爱梅梅

最新推荐文章于 2022-10-13 22:11:58 发布

阅读量622

点赞数

本文链接：https://blog.csdn.net/guliyang_115/article/details/122976003

版权

bootstrap-table.js结合java数据字典展示列值

本文主要解决bootstrap-table在展示列表时，对明确键值对的数值进行返现操作，例如状态、性别、类型等。

一、后台数据字典表设计

后台数据字典设计如下

DROP TABLE IF EXISTS `t_dict_inf`;
CREATE TABLE `t_dict_inf`  (
  `dict_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '分组名称',
  `dict_name` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '分组名',
  `dict_key` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'key值',
  `dict_value` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 'value值',
  `create_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
  `last_modify_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最后一次修改时间',
  PRIMARY KEY (`dict_id`, `dict_key`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '系统字典表' ROW_FORMAT = Dynamic;

二、bootstrap-table表格构建说明

在bootstrap-table初始化时，在columns中添加新属性dicType。

('#tableId').bootstrapTable({
			...,
			columns:[
					...,
				 	   {
			            title: '类型',
			              field: 'type',//vo列字段名
			              dicType:'D_XX_TYPE'//对应字典表dict_id
			            },
			       ...],
			 locale: 'zh-CN',
			...

三、修改bootstrap-table.js，添加dicType字段处理

找到 BootstrapTable.prototype.initBody方法中的$.each(this.header.fields, function (j, field) {})方法。
大概在1500行左右。
改造如下：

 if (column.dicType) {//新增判断
       text = [sprintf('<td%s %s %s %s %s %s>', id_, class_, style, data_, rowspan_, title_),
           parent.dictMap==null?parent.parent.dictMap[column.dicType][value]:parent.dictMap[column.dicType][value],
           '</td>'
       ].join('');
   } else {
       text = [sprintf('<td%s %s %s %s %s %s>', id_, class_, style, data_, rowspan_, title_),
           value,
           '</td>'
       ].join('');
   }