1 Star 13 Fork 6

Yunter丶 / customSelect

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

layui下拉选择器

示例:

演示地址:演示地址

1.单选

示例1

  1. 多选

示例2

介绍:

基于layui.tree的树形下拉选择组件,支持单选和多选,目前为输入框触发下拉事件,已选值将填入到input中。

用法:

layui.use(['customSelect'], function() {
    const select = layui.customSelect
    select.render({
        el: 'example',
        data: list,
        checkbox: true,
        checked: function (obj) {
            
        }
    })
})

参数:

参数名 描述 默认值 说明
el layui下拉选择器的根节点dom的id 必填
data 下拉树的数据 必填,每项数据须有title/name/text之一 树形多维数据或一维数组,参照layui.tree
type 类型 null 若是单选类型,值为'radio'
line 连接线 true 参照layui.tree
accordion 是否开启手风琴模式 false 参照layui.tree
checked 回调函数 function 下面有说明

根节点DOM示例:

  <input autocomplete="off" id="example" type="text" class="layui-input" placeholder="快速查找" />

数据示例(data):

title: '江西',
    id: 1,
    children: [{
        title: '南昌',
        id: 2,
        children: [{
            title: '高新区', //三级菜单
            id: 3,
            children: [{
                title: '12121', //三级菜单
                id: 9
            }]
            //…… //以此类推,可无限层级
        }]
    }]
}, {
    title: '陕西', //一级菜单
    id: 4,
    children: [{
        title: '西安', //二级菜单
        id: 5
    }]
}]

回调:

checked: function(obj, checkedDatas, {values, idents, datas}) {
  // 返回一个对象,有以下三个成员
  // 1、obj 点击某个复选框时的数据、选中状态和dom元素
  // 2、checkedDatas 每次点击复选框时的已被选中数据,单选时为[null]
  // 3、Object {
    // vaule 所有选中数据的title
    // idents 所有选中数据的id
    // datas 所有的选中数据
    // 三个数据都是一维数组
  }
}

更新

2021-4-16 使用input作为节点,传入input的节点ID即可

Repository Comments ( 3 )

Sign in to post a comment

About

基于layui.tree的树形下拉选择组件,支持单选和多选。 expand collapse
JavaScript and 3 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/YUN73R/customSelect.git
git@gitee.com:YUN73R/customSelect.git
YUN73R
customSelect
customSelect
master

Search

184635 d8eb8a04 1850385 161156 f1cf3f24 1850385