select3:带树级的搜索下拉框插件

红太狼 2022-01-06 05:59 620阅读 0赞

## 效果展示 ##

![8583_select3.jpg][]

--------------------

## 功能介绍 ##

select3.js实现以下功能，且调用方便快捷。

*  完善[select2][]不支持tree的缺陷
 *  理论上支持N层级的树状下拉框
 *  本地搜索
 *  支持数据回显选中
 *  主JS压缩后只有8kb

--------------------

## gitHub ##

[https://github.com/baukh789/select3][https_github.com_baukh789_select3]

--------------------

## demo演示 ##

--------------------

select3格简易渲染  ->[查看演示][Link 1]

--------------------

## 生成示例 ##

--------------------

Html Javacript

$.getJSON('data/testData.json', function(json)\{ $('\#test1').select3(\{ treeData:json, data:\[6017625561183\], isDevelopMode: true \}); \});

--------------------

## 参数说明 ##

--------------------

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>domMark</td> 
   <td>String</td> 
   <td>'tree-type-search'</td> 
   <td>DOM标识,是进行DOM初始化的必备参数。 <p>生成的下拉框将会以该参数进行命名class，一般情况下使用默认值即可</p> </td> 
  </tr> 
  <tr> 
   <td>treeData</td> 
   <td>Array</td> 
   <td>[]</td> 
   <td>树型结构数据。在isTest为false的情况下，进行初始化时必须提供的数据</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>Array</td> 
   <td>[]</td> 
   <td>选中的节点,用于数据回显。使用方式：请参考方法介绍</td> 
  </tr> 
  <tr> 
   <td>animateTime</td> 
   <td>Number</td> 
   <td>300</td> 
   <td>滑动动画耗时;用于滑动或渐进渐出等jquery.animate效果</td> 
  </tr> 
  <tr> 
   <td>indent</td> 
   <td>Number</td> 
   <td>26</td> 
   <td>树型下拉框中层级间单横缩进像素</td> 
  </tr> 
  <tr> 
   <td>isSelectParent</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否可选中父级节点。[*功能暂未开发完成]</td> 
  </tr> 
  <tr> 
   <td>searchMinWidth</td> 
   <td>Number</td> 
   <td>20</td> 
   <td>搜索输入框最小宽度，一般无需配置；在搜索框可视的情况下会自动对宽度进行调整</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>String</td> 
   <td>100%</td> 
   <td>控件展示宽度;建议填写合适的值，此参数会影响布局效果</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>String</td> 
   <td>32px</td> 
   <td>控件展示高度;建议填写合适的值，此参数会影响布局效果</td> 
  </tr> 
  <tr> 
   <td>matchLimit</td> 
   <td>Number</td> 
   <td>20</td> 
   <td>搜索时单次进行匹配的量，该值越大匹配越快，但是会以牺牲性能为代价</td> 
  </tr> 
  <tr> 
   <td>matchTime</td> 
   <td>Number</td> 
   <td>20</td> 
   <td>搜索时单次进行匹配的延时，该值越小匹配越快，但是会以牺牲性能为代价</td> 
  </tr> 
  <tr> 
   <td>isDevelopMode</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否为开发模式，为true时将打印事件日志</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>String</td> 
   <td>lease select a</td> 
   <td>选中项为空的占位符</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th> <p>名称</p> </th> 
   <th> <p>类型</p> </th> 
   <th> <p>默认值</p> </th> 
   <th> <p>介绍</p> </th> 
  </tr> 
 </tbody> 
</table>

--------------------

## 方法说明 ##

--------------------

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>select3</td> 
   <td>fnName: 方法名称 <p>settings: 参数</p> </td> 
   <td>对外提供的快捷生成方法，用于将jQuery对象生成为插件。使用方法请参考&lt;a href='#create-example'&gt;生成示例&lt;/a&gt;</td> 
   <td> <pre>
<code>&nbsp;</code></pre> <p>$('#test1').select3({isTest:true, treeData:json}); //初始化,</p> <p>$('#test1').select3({isTest:true, treeData:json, data:[{id:6019564383383, name:'忠实关注者'}]});//初始化并进行数据回显",</p> <p>$('#test1').select3('data', [{id:6019564383383, name:'忠实关注者'}, {id:6017625561183, name:'忠实关注者'}]);//对已初始化的进行数据回显"</p> </td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th> <p>名称</p> </th> 
   <th> <p>参数</p> </th> 
   <th> <p>说明</p> </th> 
   <th> <p>示例</p> </th> 
  </tr> 
 </tbody> 
</table>

--------------------

## 注意事项 ##

--------------------

HTML:

*  暂时只支持input格式的原DOM
 *  在input外需有块级元素包裹，建议使用DIV

JS:

*  生成时需参考生成示例

--------------------

## 版本信息 ##

--------------------

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1.1</td> 
   <td>2015-04-10</td> 
   <td> 
    <ol> 
     <li>实现数据回显功能与select2方式同步</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>1.0</td> 
   <td>2015-04-10</td> 
   <td> 
    <ol> 
     <li>基础功能开发完成</li> 
     <li>实现本地搜索</li> 
     <li>进行性能测试,对节 点操作性能进行了全面提升"</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

原文网址：[http://www.lovejavascript.com/plugIn/select3/index.html][http_www.lovejavascript.com_plugIn_select3_index.html]

demo：[http://www.lovejavascript.com/plugIn/select3/demo.html][Link 1]

[8583_select3.jpg]: /images/20211227/3e19caaf2ff84b7b8612ee78b4d992cd.png
[select2]: http://select2.github.io/
[https_github.com_baukh789_select3]: https://github.com/baukh789/select3
[Link 1]: http://www.lovejavascript.com/plugIn/select3/demo.html
[http_www.lovejavascript.com_plugIn_select3_index.html]: http://www.lovejavascript.com/plugIn/select3/index.html