# layPicker

**Repository Path**: yuanyongqiang/lay-picker

## Basic Information

- **Project Name**: layPicker
- **Description**: 基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 30
- **Forks**: 6
- **Created**: 2023-09-11
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: jquery-plugins

**Tags**: None

## README

# layPicker
#### 日志

[前往更新日志](https://gitee.com/yuanyongqiang/lay-picker/blob/master/LOG.md)

#### 介绍
基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器
#### 效果图
##### 微信版效果
![输入图片说明](img/1694422953856.jpg)
![输入图片说明](img/1694422970324.jpg)
![输入图片说明](img/1694422983910.jpg)
##### 旧版效果
![输入图片说明](img/1694423021735.jpg)
![输入图片说明](img/1694423069318.jpg)

#### 安装教程

 **需要基于jquery** 

css
```
<link rel="stylesheet" href="css/lay-picker.css" />
```

JavaScript
```
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/lay-picker.js" ></script>
```

#### 使用说明

参数说明
| 字段  |  类型 | 默认值  | 说明  |
|---|---|---|---|
|  elem |  字符串 |   |  绑定元素，用于触发选择器 |
| radius    | 整型/字符串  |   |  圆角数值 |
|textField  | 字符串  | name  |  显示的名称对应字段，根据数据的字段对应 |
|valueField  | 字符串  |  value | 获取的值对应字段，根据数据的字段对应 |
| data  |  数组 |   |  如果使用options参数，则不需要设置data，反之必须设置data；固定式需要设置占位，如：[[{name:'张三', value:101}], [], []] （这里占位共三列滚动列）|
|  title | 字符串  |   | 标题显示  |
|  shade| 数字  |  默认0.4透明度 | 遮罩：可调整0~1（设置false，则关闭遮罩）  |
|  minDate | 字符串  |   | 最小日期/时间限制  |
|  maxDate | 字符串  |   | 最大日期/时间限制  |
|  btns| 数组  |   | 如：['重置', '确认']  |
|  search | 布尔/字符串 | false | 是否开启搜索，填充字符串则为输入框提示【注：只对单列有效】  |
| type  |  整型 |   | 设置2为微信版，设置3自定义html（需要配合content参数），默认无  |
| options  | 字符串  |   |  设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值 |
|  onSuccess |  function |  (index, elem) |  渲染成功回调 |
|  onSelect | function   | (index, i, result)  |  停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集 |
| onConfirm  | function   | (index, value, result)  |   点击确认回调 |
|  onCancel | function   | (index)  | 点击取消回调  |
| onShade  |  function  |  (index) |  点击遮罩回调 |
| onShow|  function  |  (index) |  点击显示回调 |

##### 返回值
var layIndex = layPicker.init({});
index是第几个的意思
##### 删除指定
layPicker.remove(layIndex);
##### 删除所有
layPicker.removeAll();
##### 赋值设置（如：年月日：2023-09-11）
layPicker.setValue(index, [
    {value: '2023'},
    {value: '09'},
    {value: '11'},
])
##### 值重置（layIndex是指定哪个选择器，-1是设置第几行滚动列（从-1开始，因为内置加一下标），array就是重置的数据）
layPicker.setData(layIndex, -1, array); 
##### 值重置-动态（layIndex是指定哪个选择器，-1是设置第几行滚动列（从-1开始，因为内置加一下标），array就是重置的数据）
layPicker.setDataTrends(layIndex, -1, array); 
参考index.html中的‘动态调整’，选择第一列后，第二第三...列动态变动（动画效果）

#### 示例
```
layPicker.init({
	elem: '#year', // 绑定元素
	options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
	onSuccess: function(index, elem){ // 渲染成功回调
	    layPicker.setValue(index, [
	        {value: '2023'},
	    ])
	},
	onSelect: function(result){
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
	    $("#year").val(value)
	    console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})
```

##### 静态占位选择

```
// 选择地区
layPicker.init({
	elem: '#addr', // 绑定元素
	data: [addr_array, addr_array_bj, []], // 列数值 （addr_array省，addr_array_bj市，[]区）
	onSuccess: function(index, elem){ // 渲染成功回调
	},
	onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
		if(i == 0){
			if(result[i].name == '北京'){
				layPicker.setData(index, i, addr_array_bj);
			}else if(result[i].name == '广东'){
				layPicker.setData(index, i, addr_array_gd);
				layPicker.setData(index, i+1, add_array_gd_dg);
			}
		}else if(i == 1){
			if(result[i].name == '深圳市'){
				layPicker.setData(index, i, add_array_gd_sz);
			}else if(result[i].name == '东莞市'){
				layPicker.setData(index, i, add_array_gd_dg);
			}else{
				layPicker.setData(index, i, []);
			}
		}
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
		//结果处理后再显示
		var text = [];
		for(var i = 0; i < result.length; i++) {
			text.push(result[i].name);
		}
		$("#addr").val(text.join('-'))
		console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})
```

##### 可以动态调整

```
// 动态调整
layPicker.init({
	elem: '#trends', // 绑定元素
	data: [addr_array], // 列数值（使用动态这里可以不用占位，这里假设第一个参数没子级，如果默认第一个值，就要追加子级数组）
	onSuccess: function(index, elem){ // 渲染成功回调
	},
	onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
		if(i == 0){
			if(result[i].name == '北京'){
				layPicker.setDataTrends(index, i, addr_array_bj);
			}else if(result[i].name == '广东'){
				layPicker.setDataTrends(index, i, addr_array_gd);
				layPicker.setDataTrends(index, i+1, add_array_gd_dg);
			}
		}else if(i == 1){
			if(result[i].name == '深圳市'){
				layPicker.setDataTrends(index, i, add_array_gd_sz);
			}else if(result[i].name == '广州市'){
				layPicker.setDataTrends(index, i, null);
			}else if(result[i].name == '东莞市'){
				layPicker.setDataTrends(index, i, add_array_gd_dg);
			}
		}
		console.log('onSelect --- ', JSON.stringify(result))
	},
	onConfirm: function(index, value, result){ // 点击确认回调
		//结果处理后再显示
		var text = [];
		for(var i = 0; i < result.length; i++) {
			text.push(result[i].name);
		}
		$("#trends").val(text.join('-'))
		console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
	},
	onCancel: function(index){ // 点击取消回调
	},
	onShade: function(index){ // 点击遮罩回调
	},
})
```


更多参考index.html