在jQuery UI中啓用Shift-Multiselect可選

Question

我想在jQuery UI中啓用多選功能通過按住轉變來選擇表格。

我大概如果轉變按住鼠標點擊

• 獲取最頂端的所選元素
• 上獲取點擊的元素
• 在選擇的所有元素應該做這樣的事情
之間

但我找不到如何以一種乾淨的方式做到這一點...

在我得到這個可選的配置裏面的那一刻：

start: function(e) 
     { 
      var oTarget = jQuery(e.target); 
      if(!oTarget.is('tr')) oTarget = oTarget.parents('tr'); 
     } 

所以oTarget是點擊的元素（和e.currentTarget是整個表），但現在該怎麼辦？我怎樣才能找到哪些元素已被選中的方式，可以告訴我，如果單擊的元素是否超過或低於選定的元素，並選擇它們之間的所有內容？

我已經解決了，現在這個樣子，增加可選擇的元素：

jQuery(table).mousedown(function(e) 
    { 
     //Enable multiselect with shift key 
     if(e.shiftKey) 
     { 
      var oTarget = jQuery(e.target); 
      if(!oTarget.is('.ui-selectee')) oTarget = oTarget.parents('.ui-selectee'); 

      var iNew = jQuery(e.currentTarget).find('.ui-selectee').index(oTarget); 
      var iCurrent = jQuery(e.currentTarget).find('.ui-selectee').index(jQuery(e.currentTarget).find('.ui-selected')); 

      if (iCurrent < iNew) { 
       iHold = iNew; 
       iNew = iCurrent; 
       iCurrent = iHold; 
      } 

      if(iNew != '-1') 
      { 
       jQuery(e.currentTarget).find('.ui-selected').removeClass('ui-selected'); 
       for (i=iNew;i<=iCurrent;i++) { 
        jQuery(e.currentTarget).find('.ui-selectee').eq(i).addClass('ui-selected'); 
       } 
       e.stopImmediatePropagation(); 
       e.stopPropagation(); 
       e.preventDefault(); 
       return false; 
      } 
     } 
    }).selectable(...) 

Answer 1

我寫了簡單的插件來實現該功能。它不依賴於jQuery ui可選插件，並且據我所知，它可以正常工作。

你可以找到插件代碼和簡單的例子，在這裏：http://jsfiddle.net/bMgpc/170/

要低於寫簡單的描述。

基本用法：

$('ul').multiSelect(); 

如果你按住「Ctrl」鍵或「命令鍵」，那麼你可以通過一個選擇/取消選擇的元素之一。

ul - 保存要選擇的內部元素的父級。

有可用的選項數量：

• keepSelection - 真|假 - 一個很重要的標誌。如果設置爲true（默認），則選擇將不會被清除，如果您單擊已經選擇的元素（因爲它與多個道具一起工作）
• multiselect - true | false -if false只能選擇一個元素
• 選自 - 「選擇」 - 這將被添加到選定的元素
• 過濾器類： - 「> *」 - 什麼元素是我們要選擇
• unselectOn - 假|「選擇」 - 如果設置則如果點擊集合選擇的SelectIO將被刪除
• 開始：假|功能 - 在啓動
• 停止回調：假|功能 - callba CK上停止
• 取消選擇：假|功能 - 回調上設置點擊「unselectOn」選項

---

這是一個開發版本的插件，所以請小心

Answer 2

使用環視我無法後，當在仍然使用jQuery UI的可選功能的同時找到解決這個問題的方法，所以我寫了一個。從本質上講，它觸及Selectable的選定/未選擇的回調來管理DOM狀態，同時依照標準的可選API繼續回調。它支持以下使用案例：

• 點擊的元素之一（SHIFT +單擊，CNTL +單擊，或單擊並拖動也）任何地方的列表
• 按住Shift並單擊列表中的其他元素
• 兩個端點之間的所有元件再加上成爲選擇

用法爲表：

$('table').shiftSelectable({filter: 'tr'}); 

A F新的筆記。 （1）目前只支持兄弟元素。 （2）它將通過配置選項，您將在表格示例中看到以及可選方法。 （3）我的心underscore.js，所以它被使用，即使這並不是必需的。如果你不想使用這個棒極了的圖書館，可以隨時換掉它的簡單檢查和擴展。不，我與underscore.js沒有任何關係。 :)

table fiddle example

list fiddle example

希望這可以幫助其他人！乾杯。

Answer 3

你可以不用插件這樣的：

var prev = -1; // here we will store index of previous selection 
$('tbody').selectable({ 
    selecting: function(e, ui) { // on select 
     var curr = $(ui.selecting.tagName, e.target).index(ui.selecting); // get selecting item index 
     if(e.shiftKey && prev > -1) { // if shift key was pressed and there is previous - select them all 
      $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected'); 
      prev = -1; // and reset prev 
     } else { 
      prev = curr; // othervise just save prev 
     } 
    } 
}); 

下面是現場演示：http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/