【工作笔记-20220222】layui的穿梭框和xm-select树状下拉框-----list格式数据转为树状结构数据

今天的日期不错，比较特别。

工作任务说明

工作任务，是为项目的首页增加一个快捷访问的标签卡，同时增加一个添加快捷访问的添加功能。就比如一些app首页，添加“常用”的功能。
前端首页的HTML页面，已经由前端老哥完成，我就在其基础上进行一些修改。这里也只是介绍一下layui的穿梭框和xm-select树状下拉框。前端方面的代码，官方文档里就有，关键是如何构建前端需要的参数格式。

xm-select官方文档：xm-Select搜索型下拉框文档地址
layui穿梭框：layui穿梭框组件

一、穿梭框组件

前端js代码

const transfer = layui.transfer;

transfer.render({
	elem: '#transfer',
	data: '',
	value: '',
	title: ['未选', '已选'],
	showSearch: true,
	id: 'transferExmple'
});

1、这里的data的格式要求json格式

[{
	'title': 't1',
	'value': 'v1'
},
{
	'title': 't2',
	'value': 'v2'
}]

这里的需要为这样的数据格式，新建一个实体类。

// 用于穿梭框
public class Transer {
	private String value;
	private String title;
	
	public String getValue() { return value; }
	public void setValue(String value) { this.value = value; }
	public String getTitle() { return title; }
	public void setTitle(String title) { this.title = title; }
	public Transfer(){}
}

这里就比较清楚了，value就是穿梭框的值，title就是显示的文本。

2、value属性的值

这里value属性值，就是一个json格式的集合，也就是data中已经被选中的元素的value值的集合。这一点，看一下官方文档的实例代码就比较清楚了。

二、树状下拉框

前端js代码

var demo1 = xmSelect.render({
	el: '#demo1', 
	autoRow: true,
	filterable: true,
	tree: {
		show: true,
		showFolderIcon: true,
		showLine: true,
		indent: 20,
		expandedKeys: [ -3 ],
	},
	toolbar: {
		show: true,
		list: ['ALL', 'REVERSE', 'CLEAR']
	},
	filterable: true,
	height: 'auto',
	data: function(){
		return [
			{name: '销售员', value: -1, disabled: true, children: [
				{name: '张三1', value: 1, selected: true, children: []},
				{name: '李四1', value: 2, selected: true},
				{name: '王五1', value: 3, disabled: true},
			]},
			{name: '奖品', value: -2, children: [
				{name: '奖品3', value: -3, children: [
					{name: '苹果3', value: 14, selected: true},
					{name: '香蕉3', value: 15},
					{name: '葡萄3', value: 16},
				]},
				{name: '苹果2', value: 4, selected: true, disabled: true},
				{name: '香蕉2', value: 5},
				{name: '葡萄2', value: 6},
			]},
		]
	}
})

1、这里写一下tree格式数据的生成

首先，构建一个tree格式样子的实体类。

// 树状结构实体类
public class Tree{
	private String id;
	private String pid;
	private String value;
	private String name;
	private List<Tree> children;
}

// 原始的实体类结构
public class Obj{
	private String id;
	private String pid;
	private String value;
	private String name;
}

接下来就是，将list格式的数据转换成tree格式的数据。
我这里的思路是，为了便于取值，构建一个字典map(Map<String, List<Tree>>)，其中key=obj.pid，这样后续为tree.children添加元素的时候就比较方便了。

• 示例代码（建议不要复制，因为全是手打所以可能出错）

List<Obj> objList = xxx(已经查询好的结果);
List<Tree> allTree = new ArrayList<>();// 最终结果
Map<String, List<Tree>> map = new HashMap<>(); // 字典map
List<Tree> tempList = new ArrayList<>();// 中间临时的集合

for(Obj o : objList) {
	Tree tree = new Tree();
	tree.setId(o.getId());
	tree.setPid(o.getPid());
	tree.setValue(o.getValue());
	tree.setName(o.getName());	
	tempList.add(tree);
	
	// 建立一个map字典，便于取值，根节点的id=0
	if(tree.getPid() != null && !''.equals(tree.getPid())) {
		// 如果不存在父类id所对应的list，则新建一对键值对
		if(!map.containsKey(tree.getPid())) {
			map.put(tree.getPid(), new ArrayList<>());
		}
		// 向key值为父id的list中插入
		map.get(tree.getPid()).add(tree);
	}
}
// 向tree中插入子节点集合，从map中取
for(Tree t : tempList) {
	t.setChildren(map.get(t.getId()));
}
// 将根目录key值下的list赋值给最终的集合
allTree.addAll(map.get("0"));

2、tree中被选中的集合

被选中的集合，就不需要给子节点集合List<Tree> children中插入元素了，直接重新构造一个被选中项的List集合即可。

注意事项

• 这里需要注意的是，无论是穿梭框还是树状下拉框，在Controller最后转换阶段，都需要调用JSON.toJSONString(obj)方法，将其转换成json的字符串格式。