效果展示
功能介紹
select3.js實現以下功能，且調用方便快捷。
- 完善select2不支持tree的缺陷
- 理論上支持N層級的樹狀下拉框
- 本地搜索
- 支持數據回顯選中
- 主JS壓縮後只有8kb
gitHub
https://github.com/baukh789/select3
demo演示
select3格簡易渲染 ->查看演示
生成示例
Html Javacript
$.getJSON('data/testData.json', function(json){ $('#test1').select3({ treeData:json, data:[6017625561183], isDevelopMode: true }); });
參數說明
| domMark | String | 'tree-type-search' | DOM標識,是進行DOM初始化的必備參數。
生成的下拉框將會以該參數進行命名class，一般情況下使用默認值即可 |
| treeData | Array | [] | 樹型結構數據。在isTest爲false的情況下，進行初始化時必須提供的數據 |
| data | Array | [] | 選中的節點,用於數據回顯。使用方式：請參考方法介紹 |
| animateTime | Number | 300 | 滑動動畫耗時;用於滑動或漸進漸出等jquery.animate效果 |
| indent | Number | 26 | 樹型下拉框中層級間單橫縮進像素 |
| isSelectParent | Boolean | false | 是否可選中父級節點。[*功能暫未開發完成] |
| searchMinWidth | Number | 20 | 搜索輸入框最小寬度，一般無需配置；在搜索框可視的情況下會自動對寬度進行調整 |
| width | String | 100% | 控件展示寬度;建議填寫合適的值，此參數會影響佈局效果 |
| height | String | 32px | 控件展示高度;建議填寫合適的值，此參數會影響佈局效果 |
| matchLimit | Number | 20 | 搜索時單次進行匹配的量，該值越大匹配越快，但是會以犧牲性能爲代價 |
| matchTime | Number | 20 | 搜索時單次進行匹配的延時，該值越小匹配越快，但是會以犧牲性能爲代價 |
| isDevelopMode | Boolean | false | 是否爲開發模式，爲true時將打印事件日誌 |
| placeholder | String | lease select a | 選中項爲空的佔位符 |
|
名稱 |
類型 |
默認值 |
介紹 |
方法說明
| select3 | fnName: 方法名稱
settings: 參數 |
對外提供的快捷生成方法，用於將jQuery對象生成爲插件。使用方法請參考<a href='#create-example'>生成示例</a> |
$('#test1').select3({isTest:true, treeData:json}); //初始化, $('#test1').select3({isTest:true, treeData:json, data:[{id:6019564383383, name:'忠實關注者'}]});//初始化並進行數據回顯", $('#test1').select3('data', [{id:6019564383383, name:'忠實關注者'}, {id:6017625561183, name:'忠實關注者'}]);//對已初始化的進行數據回顯" |
|
名稱 |
參數 |
說明 |
示例 |
注意事項
HTML:
- 暫時只支持input格式的原DOM
- 在input外需有塊級元素包裹，建議使用DIV
JS:
- 生成時需參考生成示例
版本信息
| 1.1 | 2015-04-10 |
|
| 1.0 | 2015-04-10 |
|
原文網址：http://www.lovejavascript.com/plugIn/select3/index.html