xmselect下拉树方法封装

文档

开发文档地址点击跳转

渲染dom元素 xmSelectUtil.js

<link rel="stylesheet" href="/plugin/layui/css/admin.css" >
<script src="/plugin/layui/lay/modules/xm-select.js"></script>
<script src="/plugin/layui/lay/modules/xm-select.js"></script>
<script src="/js/xmSelectUtil.js"></script>

<div class="layui-inline">
	<label class="layui-form-label">组织机构</label>
		<div class="layui-input-inline">
			<ul  id="query_organ_tree" data-id="0"></ul>
		</div>
	</div>

<script>

 //渲染下拉树
		var organTreeObj = renderselect("query_organ_tree",'请选择组织机构',true,true,false,"500px");

		//请求下拉数据  填充下拉树数据
		$.ajax({
			url : '/admin/organ/loadOrganListNew',
			type : 'get',
			data : {},
			success : function(res){
				if(res.status == '0'){
					list = res.data.childList || [];
					var selval = arrayToTree(list,0);
					organTreeObj.update({
						data: selval,
						autoRow: true,
					});
				}
			}
		});

 // var organId =  organTreeObj.getValue('valueStr'); //获取选中值

</script>

渲染下拉树工具类 xmSelectUtil.js

/**
 *
 * @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 时, 展开所有节点
            //是否严格遵守父子模式
            //strict: false
        },
        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)
            }
        },
    });
}

/**
 * 数组转化为树形结构
 * @param list
 * @returns {*[]}
 */
function arrayToTree (arr, pid){
    var list = [];
    arr.map(item=>{
        if (item.parent == pid){
            var result = {
                value : item.id,
                name : item.name,
                selected : false,
                disabled : false,
                parent : item.parent,
                children : []
            };
            list.push(result);
        }
    });

    list.map(item=>{
        item.children = arrayToTree(arr,item.value) ;
    })
    return list;
};


/**
 * 获取选中的值
 * @param item 下拉框对象
 * @returns {*}
 */
function getXmSelectValue(item){
    return item.getValue('valueStr');
}

/**
 * 赋值
 * @param item
 * @param value
 */
function setXmSelectValue(item,value) {
    item.setValue(value)
}

数据结构

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