xm-select中树形下拉框的使用

最新推荐文章于 2023-07-10 09:12:58 发布

原创最新推荐文章于 2023-07-10 09:12:58 发布

· 4.9k 阅读

7 ·

版权

文章标签：

#html5 #java

前端专栏收录该内容

1 篇文章

订阅专栏

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>