xm-select下拉框,下拉树

使用案例

先上图
xm-select下拉框,下拉树_第1张图片

layui中使用xm-select下拉选择树
1.引入js

<script src="../static/res/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="../static/res/layui/layui.js"></script>
        <script src="../static/res/layui/lay/modules/xm-select.js"></script>

2、html选择框位置

<div id="search_content">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <label class="layui-form-label">请选择学生:label>
                    <div class="layui-input-inline">
                        <ul  id="user_sel" data-id="0">ul>
                    div>
                  
                div>
            div>
        div>

3、js代码,渲染下拉树

 //渲染下拉框
            var idSelectTreeRadioValue = xmSelect.render({
                el: "#user_sel",
                clickClose: true,       //单选完关闭下拉框
                filterable: true,       //搜索
                direction: 'down',      // 展开方向 下
                //radio: true,            //单选
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    expandedKeys: true
                },
                height: "auto",
                data: [],
                model: {
                    label: {type: 'text'}
                    //, icon: 'hidden'
                },  //文本显示模式
                //处理方式
                on: function (data) {
                    if (data.isAdd) {
                        return data.change.slice(0, 1)
                    }
                },
            });
			
            //获取下拉数据 渲染下拉树
            $.ajax({
                url: "/getSelectUsers",
                type: "get",
                //data: {  },
                //async: false,
                success: function (res) {
                    if (res.code == 200) {
                        idSelectTreeRadioValue.update({
                            data: res.data,
                            autoRow: true,
                        })
                    }
                }
            });

/********方法封装***********/
/**
 *
 * @param id 要渲染的dom
 * @param tips 下拉框默认显示字样
 * @param clickClose  是否开启单选完关闭下拉框
 * @param filterable 是否开启搜索
 * @param radio 是否开启单选
 * @param height  高度 "auto"
 * @returns {*}
 */
function renderselect(id,tips,clickClose,filterable,radio,height){
    return xmSelect.render({
        el: "#"+id,
        tips: tips,
        clickClose: clickClose,       //单选完关闭下拉框
        filterable: filterable,       //搜索
        direction: 'down',      // 展开方向 下
        radio: radio,            //单选
        tree: {
            //把tree删掉就是下拉框
            show: true, //是否显示树状结构
            showFolderIcon: true, //是否展示三角图标
            showLine: true, //是否显示虚线
            expandedKeys: true , 默认展开节点的数组, 为 true 时, 展开所有节点
        },
        height: height,  //"auto"
        data: [],
        model: {
            label: {type: 'text'}
        }  //文本显示模式
        , on: function (data) {
            // console.log(data)
            if (data.isAdd) {
                //$("#"+id+"input").val(data.arr[0].value)
                return data.change.slice(0, 1)
            }
        },
    });
}

4、数据格式:

data : [{
	value : "",
    name :  "",
   	selected : false,
    disabled : false,
    parent :  "",
    children : []
}]

完整代码::

DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:my_th>
  <head>
    <title>学生成绩管理title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="../static/res/layui/css/layui.css">
    <link rel="stylesheet" href="../static/res/layui/css/admin.css">
    <link rel="stylesheet" href="../static/res/css/base.css">
    <link rel="stylesheet" href="../static/res/css/style.css">
    <script src="../static/res/bootstrap/js/jquery-3.4.1.min.js">script>
    <script src="../static/res/layui/layui.js">script>
    <script src="../static/res/nav/nav.js">script>
    <script src="../static/res/layui/lay/modules/xm-select.js">script>
  head>
  
<body class="layui-layout-body">

<div class="layui-fluid layui-card" id="data_content">
        
        <div id="search_content">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <label class="layui-form-label">请选择学生:label>
                    <div class="layui-input-inline">
                        <ul  id="user_sel" data-id="0">ul>
                    div>
                    <div class="layui-inline">
                        
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search_btn">
                            选择
                        button>
                        <button class="layui-btn layuiadmin-btn-useradmin layui-btn-warm" id="reset_btn">
                            重置
                        button>
                    div>
                div>
            div>
        div>

        <div id="btn_content " style="padding: 5px 5px;">
        div>
    div>

<script th:inline="none">
        layui.use(['layer',"xmSelect","form"], function () {
            $ = layui.jquery;
            var layer = layui.layer;
            var xmSelect = layui.xmSelect;
            var form = layui.form;
            var selectValue = ""; //记录选择的数据

            //渲染下拉框
            var idSelectTreeRadioValue = xmSelect.render({
                el: "#user_sel",
                clickClose: true,       //单选完关闭下拉框
                filterable: true,       //搜索
                direction: 'down',      // 展开方向 下
                //radio: true,            //单选
                tree: {
                //把tree删掉就是下拉框
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    expandedKeys: true
                },
                height: "auto",
                data: [],
                model: {
                    label: {type: 'text'}
                    //, icon: 'hidden'
                },  //文本显示模式
                //处理方式
                on: function (data) {
                    if (data.isAdd) {
                        return data.change.slice(0, 1)
                    }
                },
            });

            //获取下拉数据 渲染下拉树
            $.ajax({
                url: "/getSelectUsers",
                type: "get",
                //data: {  },
                //async: false,
                success: function (res) {
                    if (res.code == 200) {
                        idSelectTreeRadioValue.update({
                            data: res.data,
                            autoRow: true,
                        })
                    }
                }
            });

            //选择
            $('#search_btn').click(function () {
                selectValue = idSelectTreeRadioValue.getValue('valueStr'); //获取选中值
                console.log(selectValue);
                getlist(selectValue,1,5);
            });

            //重置
            $("#reset_btn").click(function(){
                //下拉树置空
                idSelectTreeRadioValue.setValue([]);
                //选择数据置空
                selectValue = "";
            });

        });
    script>
body>
html>

下面为部分代码,不完整

单选下拉树

html页面

<ul  id="bsId1" data-id="0"></ul>

渲染xm-select树方法:包含ajax请求数据


//单选下拉树
var idSelectTreeRadioValue;

//code:参数  id:要渲染的dom位置   url:请求url   check:默认选中的项的id   flag:是否展开下拉树   disable:是否禁用
function renderSelectRadioTree(code, id, url, check, flag, disable) {
    var a;
    $.ajax({
        url: url,
        type: "post",
        data: {
            code: code
        },
        async: false,
        success: function (res) {
            if (res.code == 200) {
                //资金用途树形下拉框
                idSelectTreeRadioValue = xmSelect.render({
                    el: "#" + id + "",
                    disabled: disable ? disable : false,      //禁用
                    clickClose: true,       //单选完关闭下拉框
                    filterable: true,       //搜索
                    initValue: [check],     //默认选中
                    direction: 'down',      // 展开方向 下
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        expandedKeys: flag == true ? true : [-1, -3]
                    },
                    model: {
                        icon: 'hidden',
                    },
                    height: "300px",
                    data: res.data,
                    model: {label: {type: 'text'}, icon: 'hidden'},  //文本显示模式
                    //处理方式
                    on: function (data) {
                        if (data.isAdd) {
                            return data.change.slice(0, 1)
                        }
                    },
                });
            }
            a = idSelectTreeRadioValue;
        }
    })
    return a;
}

调用方法渲染树:

var editPreBill = new Object(); //存放修改时,回显基本表信息
    var url = "/elementDetail/getDetailByAllTree";
    // 功能分类  树
    var bsIdSelect = renderSelectRadioTree('BUDGET_SUBJECT',"bsId1",url,editPreBill.bsId,false);

获取选中的值:

 var bsidSelCheck = bsIdSelect.getValue('valueStr'); //获取选中值
 params['bsId'] = bsidSelCheck;
 $("#bsName").val(bsIdSelect.getValue('nameStr')); //选中值的名字

下拉框

html:

<select name="pttId" id="pttId" lay-filter="pttId" lay-verify="required">
   <option value=""></option>
</select>

js:

 // 项目类别-时间分类
    renderSelectCheck('PROJ_TIME_TYPE','pttId',editPreBill.pttId);

 //获取要素数据 下拉框渲染 可以默认选中的下拉框
    function renderSelectCheck(code,id,check){
        $.ajax({
            url:"/elementDetail/getDetailByCode",
            type:"post",
            data:{
                code:code
            },
            success:function(res){
                if (res.code==200){
                    for (var i = 0; i < res.data.length ; i++) {
                        if (check == res.data[i].id){
                            $("#"+id+"").append(""+res.data[i].id+"\" selected>"+res.data[i].name+"");
                        }else{
                            $("#"+id+"").append(""+res.data[i].id+"\">"+res.data[i].name+"");
                        }
                    }
                    //重新渲染
                    layui.form.render("select");
                }else{
                    //layer.msg(res.msg);
                }
            }
        })
    }

复选下拉树 多选下拉树


//复选框下拉树
var Tree;

function Trees(code, id, flag) {
    var a;
    $.ajax({
        url: "/elementDetail/getDetailByAllTree",
        type: "post",
        data: {
            code: code
        },
        async: true,
        success: function (res) {
            if (res.code == 200) {
                //资金用途树形下拉框
                Tree = xmSelect.render({
                    el: "#" + id + "",
                    filterable: true,
                    language: 'zn',
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        expandedKeys: flag ? [-1, -3] : true
                    },
                    height: "300px",
                    data: res.data
                });
            }
            a = Tree;
        }
    })
    return a;
}

下拉树批量初始化,获取值方法

HTML:

 <label class="layui-form-label">功能分类</label>
<div class="layui-input-inline" id="bsId"></div>

<label class="layui-form-label">资金用途</label>
<div class="layui-input-inline" id="muId"></div>

JS:

//顶部搜索 xmlSelect下拉框 属性
var searchSelectOption = {
 //资金用途
    moneyUse: {
        requestUrl: '/elementDetail/getDetailByAllTree',
        requestParam: {code: 'MONEY_USE'},
        requestName: 'muId',
        elementId: 'muId',
        instance: null
    },
     //功能分类
    budgetSubject: {
        //获取数据的地址
        requestUrl: '/elementDetail/getDetailByAllTree',
        //请求携带参数
        requestParam: {code: 'BUDGET_SUBJECT'},
        //表格搜索查询时请求的name属性(后端controller接收的名字)
        requestName: 'bsId',
        //html标签id
        elementId: 'bsId',
        //xmSelect下拉框组件实例
        instance: null
    }
}
//初始化xm下拉框
xmSelectBatchInitialization(searchSelectOption);

//提交的时候在去获取值
//获取xmSelect下拉框选中的值
 xmSelectBatchGetValueList(searchSelectOption, requestParam);

JS:

/**
 * xmSelect 下拉框批量初始化
 * xmSelectOptioin结构例子:
 * var xmSelectOption = {
 *      moneyUse : {
 *          ignoreInit: {Boolean} ,     //批量初始化时是否忽略,你自己手动初始化
 *          requestUrl: {String} ,      //初始化时 Ajax请求 的地址
 *          requestParam: {Object} ,    //初始化时 Ajax请求 的参数
 *          elementId: {String} ,       //页面上元素id
 *          fmtResult: {Function} ,     //对请求响应的结果集进行过滤,格式化等 处理函数
 *          requestName: {String} ,     //表单提交时此下拉框的 name属性
 *          option: {Object} ,          //XmSelect初始化可配置属性
 *          instance: null,             //初始化完成后,存储 XmSelect实例
 *      },
 *      idxSystem : {
 *          ...
 *      }
 * }
 * @param xmSelectOption 初始化属性
 * @author GongLiHai
 * @date 2020/8/31 18:47
 */
function xmSelectBatchInitialization(xmSelectOption) {
    $.each(xmSelectOption, function (key, value) {
        //忽略初始化的,直接返回
        if (value.ignoreInit) {
            return true;
        }
        //请求数据
        $.get(value.requestUrl, value.requestParam, function (result) {
            var option = {
                el: '#' + value.elementId,
                data: value.fmtResult ? value.fmtResult(result) : result.data,
                name: value.requestName,
                filterable: true,   //搜索
                tree: {
                    show: true      //可折叠结构
                }
            }
            //添加设置的属性
            $.each(value.option, function (optionKey, optionValue) {
                option[optionKey] = optionValue;
            });
            //生成下拉框实例
            value.instance = xmSelect.render(option);
        });
    });
}

/**
 * xmSelect 下拉框批量获取 选择的值
 * @param xmSelectOption 初始化属性
 * @param xmSelectValues 选择的值
 * @author GongLiHai
 * @date 2020/8/31 18:47
 */
function xmSelectBatchGetValue(xmSelectOption, xmSelectValues) {
    $.each(xmSelectOption, function (key, value) {
        xmSelectValues[value.requestName] = value.instance.getValue('value').toString();
    });
}
//获取select框值
 function xmSelectBatchGetValueList(xmSelectOption, xmSelectValues) {
      $.each(xmSelectOption, function (key, value) {
          xmSelectValues[value.requestName] = value.instance.getValue('value');
      });
  }

你可能感兴趣的:(js,js)