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

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

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

一、 后台数据字典表设计

后台数据字典设计如下
1

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;
1
2
3
4
5
6
7
8
9
10

二、bootstrap-table表格构建说明

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

('#tableId').bootstrapTable({
			...,
			columns:[
					...,
				 	   {
			            title: '类型',
			              field: 'type',//vo列字段名
			              dicType:'D_XX_TYPE'//对应字典表dict_id
			            },
			       ...],
			 locale: 'zh-CN',
			...
1
2
3
4
5
6
7
8
9
10
11
12

三、修改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('');
   }
1
2
3
4
5
6
7
8
9
10
11

四、关于页面中的dictMap属性。

在登录首页后进行初始化，设置为全局变量。
bootstrap-table.js中获取字典值时，根据全部变量dictMap的位置，调整调用的方式。