Wheel 联级滚轮
简介
滚轮选择用在很多功能模块中，有别于select和treeSelect，它即支持单选和多选，也可支持多级联级选择；既支持PC端以鼠标点击和鼠标滚轮操作，也支持移动端手指触摸操作。
特点
本框架的滚轮选择插件详细功能如下：
- 支持input和其他非闭合标签作为接收值容器
- 支持popup、dialog、drawer和inline三种显示方式
- 支持多种数据源，包括json、array、sql和ul+li节点
- 支持纯联级数据、纯独立列数据和混合数据
- 支持PC端以鼠标点击、鼠标拖拽、鼠标滚轮操作和移动端手指触摸操作
- 支持显示特定属性的值，比如可显示value值，而不是label值
- 支持将输入控件、定位控件和按钮控件分开，也可以合体（input既是接收值的控件，又是定位popup的控件，也是打开popup的按钮）
- 支持自动填充日期值，通过autoFill参数设置，通过滚轮操作可将值自动填入input，不需要经过confirm按钮
- 支持自动校正，将autoCorrect设为true，如果外部人为修改了input值，在打开插件那一瞬会自动根据input值修正滚轮值
- 支持四个清除关闭相关的按钮，分别是关闭按（close）、重置（滚轮归零）、清除（归零并清除值）、取消（归零+清除+关闭）
- 支持预览当前选择的值，通过resultShow可关闭该功能
- 可按需修改插件中使用的占位文字，通过language参数设置
- 如果以气泡的方式显示滚轮选择控件（popup/dialog/drawer），可通过气泡自身rel参数，让更多按钮打开窗口
使用方法
插件运行方式有两种：
- ax*属性：对input标签使用
axWheel属性即可按默认参数运行插件。 - js实例：通过
new axWheel('#ID')方式创建实例运行。
示例用到的数据是二维数组，并没有错，实际上因为滚轮插件支持多列数据，所以滚轮插件需要至少二维数组数据。
属性使用：
JS使用：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">属性使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">JS使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="jsUse"></div> </div> </div> </div> -
new axWheel('#jsUse', { content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']] });
滚轮列类型
滚轮列类型有三种：
- 1、多列独立非联动滚轮。
- 2、一组联动滚轮（由一列或多列构成）
- 3、夹杂至少一个独立列和一组联动列混合滚轮
滚轮类型由数据决定的。独立滚轮支持字符串或数字字数组；而联动滚轮支持带pId+id属性或带children属性的树数组数据。
独立列：
联动列：
混合列：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">独立列：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="col01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">联动列：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="col02"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">混合列：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="col03"></div> </div> </div> </div> -
new axWheel('#col01', { content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], [1, 2, 3, 4, 5, 6, 7], ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ'], ] }); new axWheel('#col02', { content: [ [ { label: 'a', children: [ { label: 'a-1', children: [ { label: 'Ⅰ' }, { label: 'Ⅱ' }, { label: 'Ⅲ' }, ] }, { label: 'a-2', children: [ { label: 'x' }, { label: 'y' }, { label: 'z' }, ] }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ], ] }); new axWheel('#col03', { content: [ [ { label: 'a', children: [ { label: 'a-1' }, { label: 'a-2' }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ], [100, 200, 300, 400, 500, 600, 700], [ { label: 'A', children: [ { label: 'A-1' }, { label: 'A-2' }, { label: 'A-3' }, { label: 'A-4' }, { label: 'A-5' }, { label: 'A-6' }, { label: 'A-7' } ] }, { label: 'B', children: [ { label: 'B-1' }, { label: 'B-2' }, { label: 'B-3' }, { label: 'B-4' }, { label: 'B-5' }, { label: 'B-6' }, { label: 'B-7' } ] }, { label: 'C', children: [ { label: 'C-1' }, { label: 'C-2' }, { label: 'C-3' }, { label: 'C-4' }, { label: 'C-5' }, { label: 'C-6' }, { label: 'C-7' } ] } ], ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ'], ] });
设置初始值
插件初始化运行会默认将个滚轮列中第一项作为选择值，有两种方法设置初始值：
- 1、通过
selected参数设置初始值，文本格式 - 2、对input直接使用
value属性赋值，插件自动将该值存为selected值
数据第一维度需要使用参数output.separator进行分隔（“>”）；联动列之间需要使用参数output.connector进行分隔（“/”）。
例如：selected:'a>x>1'，表示数据为三列独立数据，每列分别取值a、x和1；selected:'a/x/1'，表示数据一组联级数据，第一级取a，第二级取x，第三级取1；selected:'a/x/1>k'，表示数据为混合数据，包含一组联级数据和一列独立数据，联级数据取父子值为a、x和1，独立列数据取k。
独立列初始化：
联动列初始化：
混合列初始化：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">独立列初始化：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="init01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">联动列初始化：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="init02"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">混合列初始化：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="init03"></div> </div> </div> </div> -
new axWheel('#init01', { selected:'c>E>2>Ⅱ', //selected:'c>E>2',//某一维列为空则将该列第一项作为选择项 content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], [1, 2, 3, 4, 5, 6, 7], ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ'], ] }); new axWheel('#init02', { selected:'a/a-2/z', //selected:'a/a-2',//联级列第一列是必填的，其余列不填则将列的第一项作为选择项 content: [ [ { label: 'a', children: [ { label: 'a-1', children: [ { label: 'Ⅰ' }, { label: 'Ⅱ' }, { label: 'Ⅲ' }, ] }, { label: 'a-2', children: [ { label: 'x' }, { label: 'y' }, { label: 'z' }, ] }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ], ] }); new axWheel('#init03', { selected:'b/b-4>400', //selected:'b/b-4',//某一维列为空则将该列第一项作为选择项 content: [ [ { label: 'a', children: [ { label: 'a-1' }, { label: 'a-2' }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ], [100, 200, 300, 400, 500, 600, 700], ] });
输出节点
本插件可输出的节点有两类，一是input，二是其他非表单类型标签，如div/span等。如果是input节点在点击“确定”之后会将选择结果转为文本字符串赋值input；如果是div/span则会将选择结果转为文本字符串作为innerHTML写入div/span。
这是一个span标签，点击可对此赋值：中国
这是一个span标签，点击可对此赋值：<span style="border:1px solid #ebebeb;padding:0 8px;" axWheel="content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]">中国</span>
输入输出模式
有两种输出模式，可通过output.type参数进行设置，可设置chain链式数据（默认）、ultimate最后一项数据。
chain模式会将整个选择器的当前选好的值合并为链式数据输出（带“>”和“/”）；ultimate模式只会将最后一项的值输出。
ultimate模式对一组联级数据才有意义，所以当使用ultimate模式时建议一维数据中最后一项是联级数据。
以上所演示的均是chain模式，以下举例ultimate模式。
ultimate模式：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">ultimate模式：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="ultimate"></div> </div> </div> </div> -
new axWheel('#ultimate', { output: { type: 'ultimate' }, content: [ [ { label: 'a', children: [ { label: 'a-1', children: [ { label: 'Ⅰ' }, { label: 'Ⅱ' }, { label: 'Ⅲ' }, ] }, { label: 'a-2', children: [ { label: 'x' }, { label: 'y' }, { label: 'z' }, ] }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ], ] });
显示方式
使用display参数设置滚轮窗口的显示方式：
inline在input或div的下方显示popup定位气泡窗口显示dialog居中对话框显示drawer底部抽屉显示（默认）
inline：
popup：
dialog：
drawer：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">inline：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="display:'inline',content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">popup：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="display:'popup',content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">dialog：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="display:'dialog',content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">drawer：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="display:'drawer',content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]"></div>
</div>
</div>
</div>
如果需要修改popup、dialog和drawer的默认参数可通过bubble进行修改。bubble是个对象，写法跟写popup、dialog和drawer参数一样。
由于插件默认会在手机端中将popup/dialog都转为drawer显示，但是三者的参数不尽相同，所以可使用toDrawer:false参数禁止转drawer。
修改气泡参数：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">修改气泡参数：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="bubble"></div> </div> </div> </div> -
new axDate('#bubble', { content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']], display:'dialog', toDrawer:false, bubble:{ overlay: false, title: '可以拖拽的日期选择窗口', titleBreak: true, drag: true, close: false, placement:'right-top', } });
另外在使用inline展示方式前提下，通过设置参数footerShow:false隐藏底部按钮可让其直接作为网页文本的一部分；设置resultShow:false可取消头部结果显示；设置autoFill:true可进行滚轮操作后对input直接赋值。
<input placeholder="选择..." type="text" axWheel="display:'inline',autoFill:true,footerShow:false,resultShow:false,content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]">
自动填入
默认通过滚轮操作在插件内部保存当前selected值，但并不会直接赋值input，需要通过点击“确认”才会输出。为了实现快速的输出日期值，可设置autoFill参数为true，此后任何滚轮操作将自动合并selected值并填入input当中。
<input placeholder="选择..." type="text" axWheel="autoFill:true,content:[['中国','澳大利亚','新西兰','俄罗斯','西班牙','巴基斯坦']]">
自动校验
插件在初始化或打开popup/dialog/drawer时会检测input的值或div中的文本，如果有则会将input值/div文本作为selected值刷新插件，可通过autoCorrect参数设为false取消校验，让input/div成为单向的接收元素。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">自动校验：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="correct01"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="correctBtn01">填入“澳大利亚”</a> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">不校验：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="correct02"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="correctBtn02">填入“澳大利亚”</a> </div> </div> -
let correctInput01 = document.querySelector('#correct01'), correctInput02 = document.querySelector('#correct02'), correctBtn01 = document.querySelector('#correctBtn01'), correctBtn02 = document.querySelector('#correctBtn02'), correctIns01 = new axWheel(correctInput01, { content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']], autoCorrect: true, }), correctIns02 = new axWheel(correctInput02, { content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']], autoCorrect: false, }); correctBtn01.onclick = () => { correctInput01.value = '澳大利亚'; correctIns01.bubbleIns.show(); } correctBtn02.onclick = () => { correctInput02.value = '澳大利亚'; correctIns02.bubbleIns.show(); }
分步实现
如果对input或div直接绑定插件，那么input或div便既是输入/输出控件，也是气泡定位控件，同时也是打开气泡的按钮。对于axDate(arg01,arg02)插件的第一个参数arg01默认是作为输入/输出控件的，arg02中的buttonDom和positionDom参数分别是按钮控件和定位控件。arg01、buttonDom和positionDom支持#id，.className或其他能转成节点的格式，详细请点击这里。
positionDom如果不填，那么arg01将作为定位节点；buttonDom如果不填，那么arg01将作为按钮节点。
buttonDom可以是单个值也可以是数组，也就是说支持当页多个按钮都能打开同一个气泡窗，该参数与axPopup中的rel参数一致
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">三者分开：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="stepInput"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="stepPos">定位</a><a href="###" class="ax-form-btn ax-btn " id="stepBtn">打开</a> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">不使用定位：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="stepInput02"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="stepBtn02">打开</a><a href="###" class="ax-form-btn ax-btn " id="stepBtn03">再打开</a> </div> </div> -
new axWheel('#stepInput', { content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']], display:'popup', positionDom: '#stepPos', buttonDom: '#stepBtn' }); new axWheel('#stepInput02', { content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']], display:'popup', buttonDom: ['#stepBtn02', '#stepBtn03'] });
使用“取消”按钮
此处的“取消”为清除并关闭气泡的意思。如果是以气泡显示日期默认启用清除按钮，但是点击清除按钮并不会关闭气泡，可通过cancelShow设为true可显示“取消”按钮，点击实现“清除并关闭”效果。
因为“取消”按钮和“清除”按钮功能重复，建议只保留一个。
清除并关闭：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">清除并关闭：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="clearShow:false,cancelShow:true,content: [['中国', '澳大利亚', '新西兰', '俄罗斯', '西班牙', '巴基斯坦']]"></div>
</div>
</div>
</div>
链式气泡
通过参数next可实现关闭本气泡时打开其他气泡，以方便连续编辑多个日期选择控件。next所填写的值为其他日期实例的insName参数。
需要注意的是，如果气泡类型是popup，由于其默认点击气泡以外区域也会关闭气泡，为了保证链式打开气泡需要关闭“点击气泡以外可关闭”的功能。设置bubble.pageClose参数为false即可。
链式popup：
链式drawer：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">链式popup：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input placeholder="小写字母" type="text" axWheel="insName:'mywheel01',next:'mywheel02',display:'popup',bubble:{pageClose:false},content: [['a', 'b', 'c', 'd', 'e', 'f']]"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="大写字母" type="text" axWheel="insName:'mywheel02',next:'mywheel03',display:'popup',bubble:{pageClose:false},content: [['A', 'B', 'C', 'D', 'E', 'F']]"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="数字" type="text" axWheel="insName:'mywheel03',next:'mywheel01',display:'popup',bubble:{pageClose:false},content: [[1, 2, 3, 4, 5, 6]]"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">链式drawer：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input placeholder="小写字母" type="text" axWheel="insName:'mywheel11',next:'mywheel12',display:'drawer',content: [['a', 'b', 'c', 'd', 'e', 'f']]"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="大写字母" type="text" axWheel="insName:'mywheel12',next:'mywheel13',display:'drawer',content: [['A', 'B', 'C', 'D', 'E', 'F']]"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="数字" type="text" axWheel="insName:'mywheel13',next:'mywheel11',display:'drawer',content: [[1, 2, 3, 4, 5, 6]]"></div>
</div>
</div>
</div>
</div>
</div>
滚轮选择提示
参数note可设置滚轮提示文字，支持HTML格式，置于滚轮下方，按钮上方。
加note：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">加note：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="note:'提示文字在这里，可以写HTML，居中对齐',content: [['a', 'b', 'c', 'd', 'e', 'f']]"></div>
</div>
</div>
</div>
工具集
参数tools可设置滚轮选择菜单的工具集，tools为一个对象，属性如下：
enable：是否开启工具集，默认false不开启，可选择true开启data：工具集数据，数组格式，每一项支持的属性如下：- name：工具按钮名称（显示文本，可以是HTML）
- node：按钮节点名称，默认为i
- props：按钮节点属性，比如：props:{class:'ax-btn',type:''}
- callback：按钮节点点击后触发的函数，该函数支持一个参数即本条数据，该函数this指向实例本身
工具创建成功后会自动给data数据追加上dom属性，即按钮节点。
工具按钮可自由使用实例内置的方法。
加工具集：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">加工具集：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="tools"></div> </div> </div> </div> -
new axWheel('#tools', { tools: { enable: true, data: [ { name: '选出“b-3”', props: { class: 'ax-btn ax-sm' }, callback: function () { this.set('b/b-3'); } }, { name: '重置', props: { class: 'ax-btn ax-sm' }, callback: function () { this.reset(); } }, { name: '给个提示', props: { class: 'ax-btn ax-sm' }, callback: function () { new axMessage({ content: '这是一个提示！' }).show(); } }, ] }, content: [ [ { label: 'a', children: [ { label: 'a-1' }, { label: 'a-2' }, { label: 'a-3' }, { label: 'a-4' }, { label: 'a-5' }, { label: 'a-6' }, { label: 'a-7' } ] }, { label: 'b', children: [ { label: 'b-1' }, { label: 'b-2' }, { label: 'b-3' }, { label: 'b-4' }, { label: 'b-5' }, { label: 'b-6' }, { label: 'b-7' } ] }, { label: 'c', children: [ { label: 'c-1' }, { label: 'c-2' }, { label: 'c-3' }, { label: 'c-4' }, { label: 'c-5' }, { label: 'c-6' }, { label: 'c-7' } ] } ] ] });
数据源
本插件支持多种数据源，通过参数content传入。
- 页面数组数据：将其整体或作为变量传入content参数
- 从ul+li或ol+li获取树数据：将其#id或节点传入content参数
- 从异步json文件获取数据：将文件地址传入content参数，同时设置async:'json'
- 从异步sql文件获取数据：将动态页面地址传入content参数，同时设置async:'sql'
在使用数据源时需要注意几点：
- 1、sql文件中的数据应该是带pId和id的一维树数据，传入之后会自动创建联级选择菜单
- 2、数据源中label字段是必填的，value字段是选填
- 3、如果从ul+li和ol+li获取数据，请点击这里查看详细
- 4、json文件数据和页面数组数据支持写入多个独立列和混合列数据
数据源的独立数据是非联动的数据；而混合列数据至少包含了一个独立列和一组联级列。
数据源处理后会得到标准的至少二维的数组数据。
//以下为混合列，将创建一个三列的滚轮选择器，其中第一列为独立列，第二和第三列为一组联级列
[
['a', 'b', 'c', 'd', 'e', 'f'],//独立列
[{
label: 'a', children: [
{ label: 'a-1' },
{ label: 'a-2' },
{ label: 'a-3' },
{ label: 'a-4' },
{ label: 'a-5' },
{ label: 'a-6' },
{ label: 'a-7' }
]
},
{
label: 'b', children: [
{ label: 'b-1' },
{ label: 'b-2' },
{ label: 'b-3' },
{ label: 'b-4' },
{ label: 'b-5' },
{ label: 'b-6' },
{ label: 'b-7' }
]
},]//联级列
]
从ul+li：
从json：
从sql：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">从ul+li：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'#source'"></div> </div> </div> </div> <ul id="source" style="display:none;"> <li><a>北京</a> <ul> <li><a>朝阳区</a></li> <li><a>丰台区</a></li> <li><a>海淀区</a></li> </ul> </li> <li><a>广东</a> <ul> <li><a>广州市</a></li> <li><a>深圳市</a></li> </ul> </li> <li><a>上海</a></li> <li><a>重庆</a></li> </ul> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">从json：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'ajax/hospitalTree.json',async:'json'"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">从sql：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'ajax/hospital.php',async:'sql'"></div> </div> </div> </div> -
[ { "label": "医技科室", "value": "Medical Technology Departments", "children": [ { "label": "药剂科", "value": "Pharmacy Department" }, { "label": "医学检验科", "value": "Medical Laboratory Department" }, { "label": "输血科", "value": "Blood Transfusion Department" }, { "label": "医学影像科", "value": "Medical Imaging Department" }, { "label": "介入治疗科", "value": "Interventional Therapy Department" }, { "label": "超声诊断科", "value": "Ultrasound Diagnosis Department" } ] }, { "label": "临床科室", "value": "Clinical Department", "children": [ { "label": "妇产科", "value": "Obstetrics & Gynecology Departments", "children": [ { "label": "妇科", "value": "Gynaecology Departments" }, { "label": "产科一区", "value": "Obstetrical Department NO.1" }, { "label": "产科二区", "value": "Obstetrical Department NO.2" }, { "label": "计划生育科", "value": "Family Planning Department" } ] }, { "label": "儿科", "value": "Pediatrics Departments", "children": [ { "label": "儿科一区", "value": "Pediatrics Department NO.1" }, { "label": "儿科一区", "value": "Pediatrics Department NO.2" }, { "label": "新生儿科", "value": "Neonatology Department" } ] }, { "label": "内科", "value": "Medicine Departments", "children": [ { "label": "心血管一区", "value": "Cardiovascular Department NO.1" }, { "label": "心血管一区", "value": "Cardiovascular Department NO.2" }, { "label": "呼吸内科", "value": "Respiratory department" }, { "label": "内分泌科", "value": "Endocrinology Department" }, { "label": "神经科", "value": "Neurology Department" }, { "label": "消化内科", "value": "Gastroenterology Department" } ] }, { "label": "耳鼻喉科", "value": "Otolaryngology Department" }, { "label": "口腔科", "value": "Stomatology Department" }, { "label": "眼科", "value": "Ophthalmology Department" }, { "label": "皮肤科", "value": "Dermatology Department" } ] }, { "label": "行政科室", "value": "Administrative Departments", "children": [ { "label": "医务科", "value": "Medical Departments", "children": [ { "label": "医患关系办", "value": "Doctor-Patient Relationship Office" }, { "label": "外联部", "value": "Public Relations Department" } ] }, { "label": "护理科", "value": "Nursing Department" }, { "label": "保卫科", "value": "Security Departments", "children": [ { "label": "基建办", "value": "Infrastructure Office" } ] }, { "label": "人事科", "value": "Personnel Department" } ] }, { "label": "其他科室", "value": "Other Departments" } ] -
<?php header("Content-Type:text/plain;charset=utf-8"); //连接数据库，数据库用户自己定义 $server="服务器地址"; $username="数据库用户名"; $password="数据库密码"; $database="数据库名"; $table = '表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); //检索最终数据 $sqlString="select id,pId,label from {$table} "; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ //判断本id下是否有子节点，有则追加children属性 $rows2=mysql_query("select id,pId from {$table} where pId={$row->id}"); if (mysql_num_rows($rows2) > 0){ $row->children = array(); } //sql查出来是string，转成数字 $row->id = (int)$row->id; $row->pId = (int)$row->pId; array_push($result,$row); } $success = json_encode($result); echo $success; ?>
点击这里可直接下载所需的sql文件。
使用value属性
插件默认是将label属性值传入input，可通过设置参数output.prop:'value'将value值传入input。当然前提是数据中已经有value属性。
使用value：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">使用value：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'ajax/hospitalTree.json',async:'json',output:{prop:'value'}"></div> </div> </div> </div> -
[ { "label": "医技科室", "value": "Medical Technology Departments", "children": [ { "label": "药剂科", "value": "Pharmacy Department" }, { "label": "医学检验科", "value": "Medical Laboratory Department" }, { "label": "输血科", "value": "Blood Transfusion Department" }, { "label": "医学影像科", "value": "Medical Imaging Department" }, { "label": "介入治疗科", "value": "Interventional Therapy Department" }, { "label": "超声诊断科", "value": "Ultrasound Diagnosis Department" } ] }, { "label": "临床科室", "value": "Clinical Department", "children": [ { "label": "妇产科", "value": "Obstetrics & Gynecology Departments", "children": [ { "label": "妇科", "value": "Gynaecology Departments" }, { "label": "产科一区", "value": "Obstetrical Department NO.1" }, { "label": "产科二区", "value": "Obstetrical Department NO.2" }, { "label": "计划生育科", "value": "Family Planning Department" } ] }, { "label": "儿科", "value": "Pediatrics Departments", "children": [ { "label": "儿科一区", "value": "Pediatrics Department NO.1" }, { "label": "儿科一区", "value": "Pediatrics Department NO.2" }, { "label": "新生儿科", "value": "Neonatology Department" } ] }, { "label": "内科", "value": "Medicine Departments", "children": [ { "label": "心血管一区", "value": "Cardiovascular Department NO.1" }, { "label": "心血管一区", "value": "Cardiovascular Department NO.2" }, { "label": "呼吸内科", "value": "Respiratory department" }, { "label": "内分泌科", "value": "Endocrinology Department" }, { "label": "神经科", "value": "Neurology Department" }, { "label": "消化内科", "value": "Gastroenterology Department" } ] }, { "label": "耳鼻喉科", "value": "Otolaryngology Department" }, { "label": "口腔科", "value": "Stomatology Department" }, { "label": "眼科", "value": "Ophthalmology Department" }, { "label": "皮肤科", "value": "Dermatology Department" } ] }, { "label": "行政科室", "value": "Administrative Departments", "children": [ { "label": "医务科", "value": "Medical Departments", "children": [ { "label": "医患关系办", "value": "Doctor-Patient Relationship Office" }, { "label": "外联部", "value": "Public Relations Department" } ] }, { "label": "护理科", "value": "Nursing Department" }, { "label": "保卫科", "value": "Security Departments", "children": [ { "label": "基建办", "value": "Infrastructure Office" } ] }, { "label": "人事科", "value": "Personnel Department" } ] }, { "label": "其他科室", "value": "Other Departments" } ] -
<?php header("Content-Type:text/plain;charset=utf-8"); //连接数据库，数据库用户自己定义 $server="服务器地址"; $username="数据库用户名"; $password="数据库密码"; $database="数据库名"; $table = '表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); //检索最终数据 $sqlString="select id,pId,label from {$table} "; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ //判断本id下是否有子节点，有则追加children属性 $rows2=mysql_query("select id,pId from {$table} where pId={$row->id}"); if (mysql_num_rows($rows2) > 0){ $row->children = array(); } //sql查出来是string，转成数字 $row->id = (int)$row->id; $row->pId = (int)$row->pId; array_push($result,$row); } $success = json_encode($result); echo $success; ?>
指示头
通过参数lamps设置滚轮列的指示头，指示头的写法通过selected参数，为字符串格式，独立列之间使用“>”（同参数output.separator）分隔，联级列之间使用“/”（同参数output.connector）分隔。
具体写法需要根据数据源结构而定：
- 比如数据源格式为：[[1,2,3],[1,2,3],[1,2,3]]，说明是三列独立列，lamps的写法为：'col1>col2>col3'
- 比如数据源格式为：[[label:'',chldren:[]]]，说明是一组联级列，lamps的写法为：'col1/col2/col3'
- 比如数据源格式为：[[1,2,3],[label:'',chldren:[]]]，说明是一组独立列+一组联级列，lamps的写法为：'col1>col2/col3/col4'
独立列：
联级列：
混合列：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">从ul+li：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'#source'"></div>
</div>
</div>
</div>
<ul id="source" style="display:none;">
<li><a>北京</a>
<ul>
<li><a>朝阳区</a></li>
<li><a>丰台区</a></li>
<li><a>海淀区</a></li>
</ul>
</li>
<li><a>广东</a>
<ul>
<li><a>广州市</a></li>
<li><a>深圳市</a></li>
</ul>
</li>
<li><a>上海</a></li>
<li><a>重庆</a></li>
</ul>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">从json：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'ajax/hospitalTree.json',async:'json'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">从sql：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择..." type="text" axWheel="content:'ajax/hospital.php',async:'sql'"></div>
</div>
</div>
</div>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.data：根据数据源转换得到标准数据（至少是二维数组数据），每一项有以下属性：- treeData：多维树数组数据，包含id、label、path、floor、children等属性
- flatData：一维扁平数据，如果是独立数据则treeData==flatData
- wheels：滚轮多列，每一列的属性包括：id、dom、lamp、wheel和hidden
- id：列编号，等同于索引
- dom：滚轮容器（section节点）
- lamp：列头节点
- wheel：滚轮实例（axScroll）
- hidden：是否隐藏状态
- maxFloor：从参数selected或input的value转换得到的数组数据，数据来自this.data
- cascade：是否为联级组
- id：数据编号，等同于数组索引
this.ultimates：滚轮的每列选择项数组，数据来自this.data，包含id和data属性this.selecteds：从参数selected或input的value转换得到的数组数据，数据来自this.datathis.lamps：每列的指示头数组，设置参数lamps后才有值，否则为空数组this.value：当前value值，字符串，同input的valuethis.positionDom：定位气泡的节点this.buttonDom：打开气泡的节点this.inputDom：接收输出值的节点，通常是inputthis.targetDom：实例总节点(ax-wheel)this.headerDom：实例头部节点this.toolsDom：实例工具集节点this.lampDom：实例指示头节点this.bodyDom：实例滚轮主体节点this.noteDom：实例文字提示节点this.footerDom：实例footer节点this.confirmDom：实例“确认”按钮节点this.clearDom：实例“清除”按钮节点this.closeDom：实例“关闭”按钮节点this.cancelDom：实例“取消”按钮节点this.resetDom：实例“重置”按钮节点this.destroyed：销毁状态this.bubbleIns：气泡实例（axPopup/axDialog/axDrawer）
内部操作方法如下：
this.getSelects()：从当前滚轮里获取selected数据，返回数组数据，无参数this.getValues(opt)：从当前实例中获取当前选择值（文本或数组），支持一个参数opt，其为一对象，属性如下：- prop：获取值的属性，默认label
- type：值类型，默认为chain链式数据，可选择ultimate
- connector：联级值链接符，默认“/”
- separator：滚轮列之间分隔符，默认“>”
- isArray：是否输出为数组，默认false，即输出字符串
this.confirm(hide = true, callback)：确认输出，支持两个参数- hide：确认输出值后是否关闭气泡，默认true，可选择false不关闭
- callback：回调函数，支持一个参数即当前value
this.setInputValue(text)：向input或div设置文本值，支持一个参数text即将要填入的文本值this.getInputValue()：从input或div获取文本值，无参数this.valueToSelects(value)：将文本值转为selected数组this.set(value, callback)：设置滚轮值（定位），支持两个参数：- value：设置的文本值，例如：“A/a/2”或“x>A/a/2”
- callback：回调函数，支持一个参数即当前的selected项数组
this.reset(callback)：重置滚轮（归零到各列的第一项），支持一个参数callback，回调无参数this.clear(callback)：重置滚轮+清空input或div，支持一个参数callback，回调无参数this.cancel(callback)：重置滚轮+清空input或div+关闭气泡，支持一个参数callback，回调无参数this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数，例如：setting={mode:'range',nowShow:true}
- callback：回调函数，无参数
this.destroy(callback)：销毁实例，支持回调函数，回调无参数this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前content的状态
- 对象格式，比如setting={mode:'range',nowShow:true}
- callback：回调函数，支持一个参数即localstorage值：
-
<input placeholder="选择..." type="text" id="method"> <div class="ax-break"></div> <a href="###" class="ax-btn" id="resetBtn">重置归零</a> <a href="###" class="ax-btn" id="clearBtn">清除（重置+清除值）</a> <a href="###" class="ax-btn" id="cancelBtn">取消（重置+清除值+关闭）</a> <a href="###" class="ax-btn" id="closeBtn">直接关闭</a> <a href="###" class="ax-btn" id="confirmBtn">确认填值</a> <a href="###" class="ax-btn" id="setBtn">设置“产科一区”</a> <div class="ax-break"></div> <a href="###" class="ax-btn" id="fillBtn">设置input/div值</a> <a href="###" class="ax-btn" id="digBtn">取得input/div值</a> <a href="###" class="ax-btn" id="ultimatesBtn">取得ultimates</a> <a href="###" class="ax-btn" id="selectsBtn">取得selects</a> <a href="###" class="ax-btn" id="valuesBtn">取得values</a> <a href="###" class="ax-btn" id="dataBtn">查看总数据</a> -
let methodIns = new axWheel('#method', { content: 'ajax/hospitalTree.json', async: 'json', display: 'popup', footerShow: false,//取消滚轮底部按钮，以方便使用其他按钮进行滚轮设置 bubble: { pageClose: false,//取消点击页签关闭，以方便使用其他按钮进行滚轮设置 } }); let resetBtn = document.querySelector('#resetBtn'), clearBtn = document.querySelector('#clearBtn'), cancelBtn = document.querySelector('#cancelBtn'), closeBtn = document.querySelector('#closeBtn'), confirmBtn = document.querySelector('#confirmBtn'), setBtn = document.querySelector('#setBtn'), fillBtn = document.querySelector('#fillBtn'), digBtn = document.querySelector('#digBtn'), ultimatesBtn = document.querySelector('#ultimatesBtn'), selectsBtn = document.querySelector('#selectsBtn'), valuesBtn = document.querySelector('#valuesBtn'), dataBtn = document.querySelector('#dataBtn'); resetBtn.onclick = () => { methodIns.reset(); } clearBtn.onclick = () => { methodIns.clear(); } cancelBtn.onclick = () => { methodIns.cancel(); } closeBtn.onclick = () => { //使用气泡实例的hide方法 methodIns.bubbleIns.hide(); } confirmBtn.onclick = () => { methodIns.confirm(); } setBtn.onclick = () => { methodIns.set('临床科室/妇产科/产科一区'); } fillBtn.onclick = () => { methodIns.setInputValue('行政科室/护理科'); } digBtn.onclick = () => { alert('当前input的值是：' + methodIns.getInputValue()); } ultimatesBtn.onclick = () => { console.log(methodIns.ultimates); } selectsBtn.onclick = () => { console.log(methodIns.selecteds); } valuesBtn.onclick = () => { console.log(methodIns.value); } dataBtn.onclick = () => { console.log(methodIns.data); } -
[ { "label": "医技科室", "value": "Medical Technology Departments", "children": [ { "label": "药剂科", "value": "Pharmacy Department" }, { "label": "医学检验科", "value": "Medical Laboratory Department" }, { "label": "输血科", "value": "Blood Transfusion Department" }, { "label": "医学影像科", "value": "Medical Imaging Department" }, { "label": "介入治疗科", "value": "Interventional Therapy Department" }, { "label": "超声诊断科", "value": "Ultrasound Diagnosis Department" } ] }, { "label": "临床科室", "value": "Clinical Department", "children": [ { "label": "妇产科", "value": "Obstetrics & Gynecology Departments", "children": [ { "label": "妇科", "value": "Gynaecology Departments" }, { "label": "产科一区", "value": "Obstetrical Department NO.1" }, { "label": "产科二区", "value": "Obstetrical Department NO.2" }, { "label": "计划生育科", "value": "Family Planning Department" } ] }, { "label": "儿科", "value": "Pediatrics Departments", "children": [ { "label": "儿科一区", "value": "Pediatrics Department NO.1" }, { "label": "儿科一区", "value": "Pediatrics Department NO.2" }, { "label": "新生儿科", "value": "Neonatology Department" } ] }, { "label": "内科", "value": "Medicine Departments", "children": [ { "label": "心血管一区", "value": "Cardiovascular Department NO.1" }, { "label": "心血管一区", "value": "Cardiovascular Department NO.2" }, { "label": "呼吸内科", "value": "Respiratory department" }, { "label": "内分泌科", "value": "Endocrinology Department" }, { "label": "神经科", "value": "Neurology Department" }, { "label": "消化内科", "value": "Gastroenterology Department" } ] }, { "label": "耳鼻喉科", "value": "Otolaryngology Department" }, { "label": "口腔科", "value": "Stomatology Department" }, { "label": "眼科", "value": "Ophthalmology Department" }, { "label": "皮肤科", "value": "Dermatology Department" } ] }, { "label": "行政科室", "value": "Administrative Departments", "children": [ { "label": "医务科", "value": "Medical Departments", "children": [ { "label": "医患关系办", "value": "Doctor-Patient Relationship Office" }, { "label": "外联部", "value": "Public Relations Department" } ] }, { "label": "护理科", "value": "Nursing Department" }, { "label": "保卫科", "value": "Security Departments", "children": [ { "label": "基建办", "value": "Infrastructure Office" } ] }, { "label": "人事科", "value": "Personnel Department" } ] }, { "label": "其他科室", "value": "Other Departments" } ]
更新参数
通过使用update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，格式：{content:''}
- callback：回调函数，无参数，可不填
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">更新参数：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." value="" type="text" id="update"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="updateBtn">更新数据和其他参数</a> </div> </div> -
let updateIns = new axWheel('#update', { content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], ] }), updateBtn = document.querySelector('#updateBtn'); updateBtn.onclick = () => { updateIns.update({ lamps:'一级科室/二级科室/三级科室', content:'ajax/hospitalTree.json', async:'json', autoFill:true, }); }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">保存数据：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择..." type="text" id="save"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="saveBtn">查看值</a> <a href="###" class="ax-form-btn ax-btn" id="savesetBtn">设置值</a> </div> </div> -
let save = new axWheel('#save', { storageName: 'mystorage01', content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], ] }); saveBtn = document.querySelector('#saveBtn'), savesetBtn = document.querySelector('#savesetBtn'); saveBtn.onclick = () => { console.log('当前的选择值：', save.value) } savesetBtn.onclick = () => { save.set('b>E'); }
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<input placeholder="选择..." type="text" id="insDestroy"> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a> <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a> -
let insDestroy = new axWheel('#insDestroy', { content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], ] }), btnDestroy = document.querySelector('#btnDestroy'), btnInit = document.querySelector('#btnInit'); btnDestroy.onclick = function () { insDestroy.destroy(function () { alert('销毁了实例！'); }); } btnInit.onclick = function () { insDestroy.init(); alert('重新初始化了实例！'); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit/init初始化后执行，无参数onReset/reset归零后执行，支持回调函数，回调无参数onClear/clear归零并清除值后执行，支持回调函数，回调无参数onCancel/cancel归零+清除值+关闭气泡后执行，支持回调函数，回调无参数onSet/set设置值后执行，支持回调函数，支持一个参数即当前设置的数据（带id、label、dom等属性）onConfirm/confirm填入值后执行，支持一个参数即填入文本onUpdated/updated参数更新后执行，无参数onSave/save保存数据后执行，支持一个对象即保存的数据onDestroy/destroy销毁后执行，无参数
另外this.bubbleIns使用axPopup/axDialog/axDrawer插件，也是可以对这些插件实例进行监听的。
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<input placeholder="选择..." type="text" id="on"> -
let onIns = new axWheel('#on', { cancelShow: true, resetShow: true, content: [ ['a', 'b', 'c', 'd', 'e', 'f', 'g'], ['A', 'B', 'C', 'D', 'E', 'F', 'G'], ] }); onIns.on('set', (v) => { console.log('设置了值！', v); }).on('reset', () => { console.log('归零了！'); }).on('clear', () => { console.log('归零并清除了值！'); }).on('cancel', () => { console.log('归零+清除值+关闭了！'); }).on('confirm', (v) => { console.log('值填入了input！', v); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axWheel('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
content: '',//传入数据，支持多种写法，可传入#id或ul+li的dom节点；可传入当页的二维数组数据；可传入json文件地址和动态页面地址
ajaxType: 'post', //异步提交的方式，默认post，可填get
async: '', //异步方式，选择从json文件获取数组数据，或选择sql从数据库获得数据
placeholder: '请选择',//滚轮窗的header默认文字
selected: '',//初始值，字符串格式，文字与output.prop值一致（也就是说输出为label值，该参数也应该是label值的连接组合），分隔符需要与output.connector一致
//举例：selected:'广东/深圳/龙华'，selected:'第一医院>临床/内科/神经科'，“>”分隔符之前是独立列，“/”连接符是联级列父子关系
lamps: '',//滚轮列的列头，字符串格式，写法同selected，默认为空即不显示列头
output: {
prop: 'label',//取值属性，默认从label取值，如果数据有value属性可填value
type: 'chain',//取值输出值类型，默认chain即取得链条数据，可选择ultimate只取终极分支的值
connector: '/',//输出值链接符，默认为斜杠
separator: '>',//独立列和联动列的分隔符，必须与connector不同，否则会出错
},
tools: {
enable: false,
data: [],//操作按钮数据，属性包含name、nodeName、props、callback（点击后触发的函数）
},
display: 'drawer',//展示方式，默认位于页面下方的drawer，可选择popup、dialog或inline
bubble: {},//popup或dialog的参数
buttonDom: '',//打开滚轮popup或dialog的按钮节点，#id/.classname/DIV或DOM节点
positionDom: '',//定位滚轮的节点，#id/.classname/DIV或DOM节点
toDrawer: true,//display如果是气泡，在手机端是否都转为drawer显示（手机端drawer显示滚轮窗体验最好）
resultShow: true,//是否在头部显示选中结果，默认显示，可选择false不显示
footerShow: true,//是否显示滚轮选择控件的底部按钮部分，默认true显示，可选择false不显示
clearShow: true,//底部是否显示“清除”按钮，默认false不显示
closeShow: true,//底部是否显示“关闭”按钮，默认true显示
cancelShow: false,//是否显示“取消”按钮，默认false不显示，该按钮将实现clear+close两者的功能
resetShow: false,//是否显示“重置”按钮，默认false不显示，该按钮将实现重置归零的功能
confirmToHide: true,//点击确认按钮是否关闭窗口，默认true直接关闭，可选择false手动关闭
autoFill: false,//进行滚轮操作，滚轮中的selected值是否自动填充到input，默认false不自动而是通过“确认”按钮填充
autoCorrect: true,//对于非inline展示方式是否需要重新打开时从input/div中读取值作为当前的selected值，默认true自动校正，可选择false不处理
rootStart: -1, //顶层的编号,数字类型,通常是0或-1
idStart: 0,//id开始编号，数字类型；如果从物理节点创建菜单，则需要自动创建项目id，默认第一项id为0
next: '',//关闭气泡后将要打开的其他气泡，该参数填写当页的其他气泡的实例名（insName）
language: {
button: {//底部按钮文字
clear: '清除',
close: '关闭',
cancel: '取消',
reset: '重置',
confirm: '确定',
},
},
scroll: {},//滚轮列的参数（axScroll）
note: '',//选择提示，置于滚轮下方，按钮上方，文本格式
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onSet: '',//回调函数，设置值后执行，支持回调函数，支持一个参数即当前设置的数据（带id、label、dom等属性）
onConfirm: '',//回调函数，填入值后执行，支持一个参数即填入文本
onReset: '',//回调函数，归零后执行，支持回调函数，回调无参数
onClear: '',//回调函数，归零并清除值后执行，支持回调函数，回调无参数
onCancel: '',//回调函数，归零+清除值+关闭气泡后执行，支持回调函数，回调无参数
onUpdate: '',//回调函数，参数更新后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"