layui xm-select的使用

一、文档

xm-select

二、使用

html 复制代码
<div id="js-form-tags{$ke}{$index++}" val="{$ke}"></div>
<input type="hidden" class="selectkey" name="selectkey[]" value="{$ke}" />
javascript 复制代码
function initSelect(id,init)
        {
            
            xmSelect.render({
                el: '#'+id, 
                model: { label: { type: 'text' } },
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [ -3 ],
                    strict: false,// 严格父子结构,true时,父级选中和取消选中其子级同步取消和选中;false时,父级不会影响子级的选中,注意位置在内层
                },
                radio: true,//控制单选和多选
                expandedKeys: [],
                clickClose: true,
                language: 'zn',
                size: 'mini',
                single: true,
                style:{width:'215px',border: '1px solid #468',minHeight:'22px'},
                theme: {
                    color: '#1E9FFF',
                },
                show(){
                    console.log('show')
                    
                },
                on(data){
                    console.log(data)
                    console.log('on')
                    console.log($(this))
                    $("#"+id).siblings('input').val(data.change[0].value)
                },
                hide(){
                    console.log('hide')
                    setTimeout(() => {
                        $("#"+id).find('xm-select').css('border','1px solid #468')
                    }, 1);
                },
                initValue: [init],// 下拉框需要有初始选中值时,赋值此项
                height: '200px',
                searchTips: '搜索',// 是否显示搜索框
                filterable: true,// 是否显示搜索框
                toolbar: {
                    show: false,
                    list: ['ALL','CLEAR']
                },// 是否显示清空和全选
                data: JSON.parse(tags)
            })
        }
相关推荐
lumi.几秒前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰1 分钟前
vue核心原理实现
前端·javascript·vue.js
影子信息4 分钟前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java36 分钟前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
北城以北888840 分钟前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
gihigo19981 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店1 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel1 小时前
楖览:Vue3 源码研究导读
前端
proud12122 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔2 小时前
HTML媒体标签
前端·html