xm-select中树形下拉框的使用
官网:https://maplemei.gitee.io/xm-select/#/component/install
需要的js可以去官网下载
效果图
因为整体效果美观,所以选用了该插件
完整代码如下
实体类
package com.kh.thunder.entity.vo;
import lombok.Data;
import java.util.List;
@Data
public class TreeResult {
private String name;
private String value;
private String pvalue;
private boolean disabled;
private boolean selected;
List<TreeResult> children;
public TreeResult() {
}
public TreeResult(String name, String value, String pvalue, boolean disabled) {
this.name = name;
this.value = value;
this.pvalue = pvalue;
this.disabled = disabled;
}
}
工具类
package com.kh.thunder.util;
import com.kh.thunder.entity.vo.TreeResult;
import java.util.ArrayList;
import java.util.List;
import java.util.function.Predicate;
public class TreePlusUtil {
private List<TreeResult> treeResults = new ArrayList<TreeResult>();
private List<String> selectEdId=null;
public TreePlusUtil(List<TreeResult> treeResults, List<String> selectEdId) {
this.treeResults = treeResults;
this.selectEdId = selectEdId;
}
//建立树形结构
public List<TreeResult> builTree(Predicate<TreeResult> predicate) {
List<TreeResult> treeMenus = new ArrayList<TreeResult>();
for (TreeResult treeResult : getRootNode(predicate)) {
treeResult = buildChilTree(treeResult);
treeMenus.add(treeResult);
}
return treeMenus;
}
//递归,建立子树形结构
private TreeResult buildChilTree(TreeResult pNode) {
List<TreeResult> chilMenus = new ArrayList<TreeResult>();
for (TreeResult treeResult : treeResults) {
if (pNode.getValue().equalsIgnoreCase(treeResult.getPvalue())) {
if (selectEdId.stream().anyMatch(a->treeResult.getValue().equalsIgnoreCase(a))){
treeResult.setSelected(true);
}
chilMenus.add(buildChilTree(treeResult));
}
}
pNode.setChildren(chilMenus);
return pNode;
}
//获取根节点
private List<TreeResult> getRootNode(Predicate<TreeResult> predicate) {
List<TreeResult> rootMenuLists = new ArrayList<TreeResult>();
for (TreeResult treeResult : treeResults) {
if (predicate.test(treeResult)) {
rootMenuLists.add(treeResult);
}
}
return rootMenuLists;
}
}
数据格式
后台数据
/**
*
* @param selectIds 此参数,表示选中某个选项,如效果图中选中李四
* 对应实体类中selected
* @return
*/
@RequestMapping("/testData")
@ResponseBody
public JSONObject testData(@RequestParam(name = "selectIds",required = false) List<String> selectIds) {
JSONObject json = new JSONObject();
List<TreeResult> treeResults = new ArrayList<>();
treeResults.add(new TreeResult("开发组1","1","0",true));
treeResults.add(new TreeResult("李四","2","1",false));
treeResults.add(new TreeResult("张三","3","1",true));
treeResults.add(new TreeResult("八下","4","1",false));
treeResults.add(new TreeResult("开发组2","5","0",true));
treeResults.add(new TreeResult("王五","6","5",true));
treeResults.add(new TreeResult("赵柳","7","5",false));
treeResults.add(new TreeResult("七上","8","5",false));
TreePlusUtil menuTree =new TreePlusUtil(treeResults,selectIds);
//此处需要你填写父级value值,可根据实际自行更改
Predicate<TreeResult> predicate = TreeResult -> TreeResult.getPvalue().equalsIgnoreCase("0");
List<TreeResult> list =menuTree.builTree(predicate);
json.put("info",list);
return json;
}
前台代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="/static/js/jquery-1.11.0.min.js"></script>-->
<script th:src="@{/static/js/jquery-2.2.3.min.js}"></script>
<script th:src="@{/static/js/xm-select.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
ctxPath = /*[[@{/}]]*/ '';
/*]]>*/
</script>
</head>
<body>
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
model: { label: { type: 'text' } },
radio: true,
clickClose: true,
tree: {
show: true,
strict: false,
expandedKeys: [ -1 ],
},
height: 'auto',
data:[]
})
$(function () {
$.ajax({
url:ctxPath+'test/testData?selectIds='+'3,7',//地址,如需传参在此处传参
dataType:'json',//数据类型
type:'POST',//类型
timeout:5000,//超时
//请求成功
success:function(data,status){
demo3.update({
data: data.info,
autoRow: true,
});
}
});
});
</script>
</body>
</html>