帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Select  NEST  Nested  
jQuery multiple select with nested options

  • 源代码名称:tree-multiselect.js
  • 源代码网址:http://www.github.com/patosai/tree-multiselect.js
  • tree-multiselect.js源代码文档
  • tree-multiselect.js源代码下载
  • Git URL:
    git://www.github.com/patosai/tree-multiselect.js.git
  • Git Clone代码到本地:
    git clone http://www.github.com/patosai/tree-multiselect.js
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/patosai/tree-multiselect.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 树多选

    Build StatusCoverage StatusdevDependency Status

    这个插件让你可以向一个 select 元素添加一个甜蜜的前端前端。 基础 select 元素可以像以前那样使用。

    • 需要 jQuery v1.8 +

    demo image

    演示

    我的网站有一个简单的演示运行。

    用法

    确保你的select 具有 multiple 属性集。 另外,确保你已经得到 <meta charset="UTF-8"> 或者一些符号看起来很奇怪。

    选择选项属性 NAME 描述上的选项
    selected有选项预先选择。这实际上是HTML规范的一部分。 对于这些指定的排序,使用 data-index
    readonly用户无法修改选项的值。 可以选择选项( ex 。 <option selected readonly.. . )
    data-section选项所在的区域;可以嵌套
    data-description属性的说明;将在多选菜单上显示
    data-index对于预先选择的选项,按这里顺序显示选项,最低索引优先。 具有相同索引的重复项将在索引较高的项之前显示。 否则,项目将按原始 select的顺序显示

    所有的above 都是可选的。

    你的data-section 可以有多个节名称,由 sectionDelimiter 选项分隔。

    data-section="top/middle/inner" 将显示为

    • top
      • middle
        • inner
          • 你的选择
    JavaScript
    $("select").treeMultiselect();

    现在用一些参数。

    $("select").treeMultiselect({searchable:true});
    functiontreeOnChange(allSelectedItems, addedItems, removedItems) {
     console.log("something changed!");
    }$("select").treeMultiselect({
     allowBatchSelection:false,
     onChange: treeOnChange,
     startCollapsed:true});

    函数返回返回对象的array,其中每个对象包含两个函数 removereloadremove 删除树,reload 从它的select 元素重新初始化树。 用户更改的选项将丢失

    var trees =$("select").treeMultiselect();var firstTree = trees[0];// remove the treefirstTree.remove();// or, change the select element with new options, then...firstTree.reload();
    参数 NAME 默认描述
    allowBatchSelectiontrue部分有复选框,选中后检查其中的所有内容
    collapsibletrue将collapsibility添加到截面
    enableSelectAllfalse允许选择全部或者无选项
    selectAllTextSelect All仅在 enableSelectAll 处于活动状态时才使用
    unselectAllTextUnselect All仅在 enableSelectAll 处于活动状态时才使用
    freezefalse禁用选项的选择/deselection ;仅显示显示
    hideSidePanelfalse隐藏显示所有选定项的右侧面板
    maxSelections0设置可以选择的最大选项数的数字。 任何正整数均有效;任何其他( 例如 0 或者 -1 ) 均表示无限制
    onChangenull更改选择时的回调。 使用( allSelectedItems,addedItems,removedItems ) 调用,每个都是具有属性 textvalueinitialIndexsection的对象的array
    onlyBatchSelectionfalse只能选中部分,而不能选中单个项目
    sortablefalse可以通过拖动( 需要 jQuery UI ) 对所选选项进行排序
    searchablefalse允许搜索选项
    searchParams['value', 'text', 'description', 'section']设置要搜索的项目。 array 必须包含 'value''text' 或者 'description',以及/或者 'section'
    sectionDelimiter/选择选项 data-section 属性中各部分之间的分隔符
    showSectionOnSelectedtrue在选定项目上显示节 NAME
    startCollapsedfalse仅在 collapsible 为 true 时激活;节最初折叠

    安装

    jquery.tree-multiselect.min.js 加载到网页上。 css文件是可选的( 但推荐) 。

    你也可以使用 Bower - bower install tree-multiselect

    常见问题解答

    Help! The first element is selected when I create the tree. How do I make the first element not selected? 你没有在 select 上设置 multiple 属性。 这是单个选项选择节点的属性- 选择第一个选项。

    许可证

    MIT授权。



    文章标签:Select  NEST  Nested  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语