# customSelect

**Repository Path**: aimu2000/customSelect

## Basic Information

- **Project Name**: customSelect
- **Description**: 基于layui.tree的树形下拉选择组件，支持单选和多选。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2024-05-23
- **Last Updated**: 2024-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui下拉选择器

## 示例：
> 演示地址：[演示地址](https://yun73r.gitee.io/customselect/)

> 1.单选

![示例1](./example/img/example_01.png)

> 2. 多选

![示例2](./example/img/example_02.png)


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

## 用法：
```js
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示例：
```html
  <input autocomplete="off" id="example" type="text" class="layui-input" placeholder="快速查找" />
```

## 数据示例（data）：
```js
title: '江西',
    id: 1,
    children: [{
        title: '南昌',
        id: 2,
        children: [{
            title: '高新区', //三级菜单
            id: 3,
            children: [{
                title: '12121', //三级菜单
                id: 9
            }]
            //…… //以此类推，可无限层级
        }]
    }]
}, {
    title: '陕西', //一级菜单
    id: 4,
    children: [{
        title: '西安', //二级菜单
        id: 5
    }]
}]
```

## 回调：
```js
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即可