帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签: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的順序顯示

    所有的上面 都是可選的。

    你的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  |  如果智培  |  酷兔英语