表单/表格

带多选和过滤功能的树状结构下拉框jQuery插件

面包多

带多选和过滤功能的树状结构下拉框jQuery插件-创客云
combo-tree 是一款 jQuery 带多选和过滤功能的树状结构下拉框插件。通过该插件,可以在下拉框中生成指定数据结构的目录树,提供单选和多选,以及过滤功能。它的特点有:

  • 在下拉框中显示树状结构。
  • 支持单选和多选。
  • 返回选择数据的 title 或 id 数组。
  • 带过滤功能。
  • 数据源使用 json 格式数据。
  • 可以通过键盘控制。

使用方法

在 HTML 文件中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/style.css">
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="js/icontains.js"  type="text/javascript"></script>
  4. <script src="js/comboTreePlugin.js"  type="text/javascript"></script>

HTML 结构

  1. <input type="text" id="example" placeholder="Select">

javascript

定义数据结构。

  1. var SampleJSONData = [
  2. {
  3.     id: 0,
  4.     title: 'choice 1  '
  5. }, {
  6.     id: 1,
  7.     title: 'choice 2',
  8.     subs: [
  9.         {
  10.             id: 10,
  11.             title: 'choice 2 1'
  12.         }, {
  13.             id: 11,
  14.             title: 'choice 2 2'
  15.         }, {
  16.             id: 12,
  17.             title: 'choice 2 3'
  18.         }
  19.     ]
  20. }, {
  21.     id: 2,
  22.     title: 'choice 3'
  23. }, {
  24.     id: 3,
  25.     title: 'choice 4'
  26. }, {
  27.     id: 4,
  28.     title: 'choice 5'
  29. }, {
  30.     id: 5,
  31.     title: 'choice 6',
  32.     subs: [
  33.         {
  34.             id: 50,
  35.             title: 'choice 6 1'
  36.         }, {
  37.             id: 51,
  38.             title: 'choice 6 2',
  39.             subs: [
  40.                 {
  41.                     id: 510,
  42.                     title: 'choice 6 2 1'
  43.                 }, {
  44.                     id: 511,
  45.                     title: 'choice 6 2 2'
  46.                 }, {
  47.                     id: 512,
  48.                     title: 'choice 6 2 3'
  49.                 }
  50.             ]
  51.         }
  52.     ]
  53. }, {
  54.     id: 6,
  55.     title: 'choice 7'
  56. }
  57. ];

然后通过下面的方法来进行初始化插件。

  1. // 单选
  2. comboTree1 = $('#example').comboTree({
  3.   source : SampleJSONData
  4. });
  5.  
  6. // 多选
  7. comboTree1 = $('#example').comboTree({
  8.   source : SampleJSONData,
  9.   isMultiple: true
  10. });

获取数据

  1. // Array, One title/id, or False value return
  2. var selectedTitles = comboTree1.getSelectedItemsTitle();
  3. var selectedIds = comboTree1.getSelectedItemsId();

销毁插件

  1. // To remove plugin
  2. comboTree1.destroy();

Github 网址:https://github.com/kirlisakal/combo-tree

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!