1.0.0 • Published 6 years ago
popicker v1.0.0
popicker
无限级别联动选择工具(Unlimited level linkage selection tool)
安装方法
script标签引入
<script src="./popicker.js"></script>
require方式
1. npm install popicker
2. var Popicker = require('popicker');
import方式
1. npm install popicker
2. import Popicker from 'popicker'
可配置项/Configuration
带*
标志为必填项。
el *
触发显示面板DOM元素
targetElement
选择完成后,回显text数据的元素。不填则默认为el
type
生成几级框架。不填默认为1。目前理论上支持无限级别
valueTarget
设置选择完成之后,索要设置表单元素的value。
data *
联动工具所展示的数据。为数组元素中嵌套数组格式。
styleType
面板样式。支持bottom和middle。默认为bottom,暂不支持midlle
displayField
单项文字属性名。不填默认为text
valueField
单项value属性名。不填写默认为value
childField
下一级别数组属性名。不填写默认为children
preLoadData
初始化时预加载数据。
格式为[{ value: '16' }, { value: '186' }]
,其中属性名固定为value
connector
回显文字时的连接符。不填默认为-
beforeShow
显示面板前方法
complete
选择完成后方法。参数为选择结果数组
使用实例/Usage
var data = [{
"text": "北京",
"value": "2",
"children": [{
"text": "北京市",
"value": "36",
"children": [{
"text": "东城区",
"value": "377"
},
{
"text": "西城区",
"value": "378"
},
{
"text": "崇文区",
"value": "379"
},
{
"text": "宣武区",
"value": "380"
},
{
"text": "朝阳区",
"value": "381"
},
{
"text": "石景山区",
"value": "383"
},
{
"text": "延庆县",
"value": "394"
}]
}]
}, {
"text": "天津",
"value": "3",
"children": [{
"text": "天津市",
"value": "37",
"children": [{
"text": "和平区",
"value": "395"
},
{
"text": "河东区",
"value": "396"
},
{
"text": "河西区",
"value": "397"
},
{
"text": "南开区",
"value": "398"
},
{
"text": "河北区",
"value": "399"
},
{
"text": "西青区",
"value": "405"
},
{
"text": "滨海新区",
"value": "416"
}]
}]
}];
var picker = new Popicker({
el: document.querySelector('#picker'),
data: data,
type: 3,
preLoadData: [{value: '4'}, {value: '39'}, {value: '442'}],
beforeShow: () => {
},
complete: result => {
}
})
1.0.0
6 years ago