有点长;请耐心看;如果有帮助;请点个赞 谢谢
html
<form class="layui-form">
<div class="layui-input-block">
<div id="selectRadio">
<div class="selectRadioValWrap layui-select-title layui-form-select">
<input name="cause_name" lay-reqtext="案由不能为空" lay-verify="required" class="layui-input selectRadioVal"
placeholder="请选择" type="text" name="" id="" readonly>
<i class="layui-edge"></i>
</div>
<div class="selectRadioDom layui-anim layui-anim-upbit">
</div>
</div>
</div>
</form>
css
/* 单选下拉树 */
.selectRadioDom {
display: none;
position: absolute;
left: 0;
top: 42px;
padding: 5px 0;
z-index: 899;
min-width: 100%;
border: 1px solid #d2d2d2;
max-height: 300px;
overflow-y: auto;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
box-sizing: border-box;
}
#selectRadio {
width: 300px;
position: relative;
}
body #selectRadio .layui-tree-spread>div:first-child .layui-tree-iconArrow::after {
border-color: #c0c4cc transparent transparent transparent !important;
top: 5px;
left: 1px;
}
body #selectRadio .layui-tree-set>div:first-child .layui-tree-iconArrow:after {
border-color: transparent transparent transparent #c0c4cc;
left: 4px;
top: 3px;
}
body #selectRadio .layui-tree-txt {
width: 92%;
}
#selectRadio .defaultOption>.layui-tree-entry:first-child {
background: #1E9FFF;
color: #fff;
}
#selectRadio .defaultOption>.layui-tree-entry:first-child span {
color: #fff;
}
body .selectRadioDom .layui-disabled,
body .selectRadioDom .layui-disabled:hover {
cursor: not-allowed !important;
}
body #selectRadio .layui-tree-entry:hover {
background: #f3f6fb;
}
body #selectRadio .layui-tree-entry {
padding: 8px;
}
body #selectRadio .layui-tree-main {
width: 100%;
padding: 0;
}
body #selectRadio .layui-tree-entry {
padding: 0;
height: auto;
}
** js**
var message = [{
title: '江西'
, id: 1
, children: [{
title: '南昌'
, id: 1000
, children: [{
title: '青山湖区'
, id: 10001
}, {
title: '高新区'
, id: 10002
}]
}, {
title: '九江'
, id: 1001
}, {
title: '赣州'
, id: 1002
}]
}, {
title: '广西'
, id: 2
, children: [{
title: '南宁'
, id: 2000
}, {
title: '桂林'
, id: 2001
}]
}, {
title: '陕西'
, id: 3
, children: [{
title: '西安'
, id: 3000
}, {
title: '延安'
, id: 3001
}]
},
{
title: '山西'
, id: 4
, children: [{
title: '运城'
, id: 4000
}, {
title: '侯马'
, id: 4001
}]
},
{
title: '甘肃'
, id: 5
, children: [{
title: '宁夏'
, id: 5000
}, {
title: 'w(゚Д゚)w'
, id: 5001
}]
},
{
title: '北京'
, id: 6
, children: [{
title: '东城'
, id: 6000
}, {
title: '西城'
, id: 6001
},
{
title: '南城'
, id: 6003
},
{
title: '北城'
, id: 6004
},
{
title: '中城'
, id: 6005
},
{
title: '昌平'
, id: 6006
},
{
title: '石景山'
, id: 6007
},
{
title: '回龙观'
, id: 6008
},{
title: '西二旗'
, id: 6009
},
{
title: '龙泽'
, id: 6010
},
{
title: '上地'
, id: 6011
},
{
title: '古城'
, id: 6012
},
{
title: '生命科学园'
, id: 6013
},
{
title: '青河'
, id: 6014
},
{
title: '葫芦瓜'
, id: 6015
},
{
title: '葫芦瓜2'
, id: 6016
},
{
title: '葫芦瓜3'
, id: 6017
},
{
title: '葫芦瓜4'
, id: 6018
},{
title: '葫芦5'
, id: 6019
}
]
}]
layui.tree.render({
elem: '.selectRadioDom'
, data: message
, onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
, showLine: false
, showCheckbox: false // 是否展示多选框
, accordion: true
, click: function (obj) {
console.log(obj);
// 设置选中值及id
$('.selectRadioVal').val(obj.data.title)
$('.selectRadioVal').attr('data-causeId', obj.data.id)
// 去掉所有被选中状态
$('.defaultOption').removeClass('defaultOption')
// 添加被选中状态
$(obj.elem[0]).addClass('defaultOption')
}
});
// 点击input选项显示隐藏以及输入框中箭头方向以及滚动条位置
$('body').on('click', '.selectRadioValWrap', function (e) {
e.stopPropagation()
var causeId = $(this).find($('input')).attr('data-causeId');
var defaultDom = $(this).next().find($('div[data-id="' + causeId + '"]'));
var scrollTopNum = 0;
var wrapHeight = defaultDom.closest('.selectRadioDom').outerHeight(true);
$('.selectRadioDom').hide() // 默认所有单选下拉树隐藏
if ($(this).hasClass('layui-form-selected')) {
$(this).removeClass('layui-form-selected')
$(this).next().hide()
} else {
$(this).addClass('layui-form-selected')
$(this).next().show()
// 设置滚动位置
if (causeId) {
function getScrollNum(dom) {
if (dom.prevAll().length > 0) {
for (var i = 0; i < dom.prevAll().length; i++) {
scrollTopNum += $(dom.prevAll()[i]).outerHeight(true)
}
}
if (!dom.parent().hasClass('layui-tree')) {
getScrollNum(dom.parent())
} else {
return
}
}
getScrollNum(defaultDom)
if (scrollTopNum < wrapHeight) {
scrollTopNum = 0
} else if (scrollTopNum > (wrapHeight + $('.selectRadioDom .layui-tree-entry').outerHeight(true))) {
scrollTopNum -= $('.selectRadioDom .layui-tree-entry').outerHeight(true)
}
$(this).next()[0].scrollTop = scrollTopNum + 5;
}
}
})
// 选中值隐藏选项
$('body').on('click', '.layui-tree-txt', function (e) {
e.stopPropagation()
$($(this).closest('.selectRadioDom').prev().find($('.selectRadioValWrap ')).prevObject[0]).removeClass('layui-form-selected')
$('.selectRadioDom').hide()
})
// 除了点击当前选项 点击其他阻止隐藏下拉框事件
$('body').on('click', '.selectRadioDom', function (e) {
e.stopPropagation()
})
// 点击外部隐藏选项
$(document).click(function (e) {
e.stopPropagation()
$('.selectRadioValWrap').removeClass('layui-form-selected')
$('.selectRadioDom').hide()
})
多选js里showCheckbox为true,加上id。设置默认值 或者 滚动条位置 思路都一样
多选获取选中值 layui.tree.getChecked('demoId1');
多选这只默认值layui.tree.setChecked('demoId1', [12, 16])