Bật Shift-Multiselect trong giao diện người dùng jQuery Có thể chọn

Question

Tôi muốn bật các khả năng đa lựa chọn trong bảng Giao diện người dùng jQuery Có thể chọn bằng cách giữ shift.

tôi có lẽ nên làm một cái gì đó như thế này nếu thay đổi được tổ chức xuống trên mouseclick

• Nhận topmost chọn yếu tố
• Hãy nhấp yếu tố
• Chọn tất cả các yếu tố trong giữa

nhưng tôi không thể tìm thấy cách để làm điều này một cách sạch sẽ ...

Tại thời điểm này tôi đã nhận bên trong cấu hình lựa chọn:

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

Vì vậy oTarget là yếu tố nhấp (và e.currentTarget là toàn bộ bảng) nhưng bây giờ những gì? Làm thế nào tôi có thể tìm thấy yếu tố nào đã được chọn theo cách có thể cho tôi biết liệu phần tử được nhấp có vượt quá hoặc thấp hơn các phần tử đã chọn và chọn mọi thứ ở giữa không?

Tôi đã giải quyết nó bây giờ như thế này, thêm vào các yếu tố có thể lựa chọn:

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

tôi đã viết plugin đơn giản cho các chức năng đó. Nó không phụ thuộc vào jQuery ui Selectable plugin và theo như tôi biết hoạt động tốt với nó.

Bạn có thể tìm mã plugin và ví dụ đơn giản ở đây: http://jsfiddle.net/bMgpc/170/

Đi viết mô tả đơn giản dưới đây.

sử dụng cơ bản:

$('ul').multiSelect(); 

Nếu bạn giữ phím "Ctrl" hoặc "Command chính", sau đó bạn có thể chọn/bỏ chọn các yếu tố từng cái một.

ul - cha mẹ chứa các phần tử bên trong được chọn.

Có số tùy chọn có sẵn:

• keepSelection - đúng | sai - khá cờ quan trọng.Nếu được đặt thành true (mặc định), thì lựa chọn sẽ không bị xóa nếu bạn nhấp vào phần tử đã chọn (vì nó hoạt động với nhiều giá trị)
• multiselect - true | false -if false bạn chỉ có thể chọn một thành phần
• được chọn - 'đã chọn' - lớp sẽ được thêm vào phần tử được chọn
• bộ lọc: - '> *' - chúng tôi sẽ chọn gì để chọn các phần tử
• unelectOn - false | '- nếu được đặt nếu được nhấp vào bộ chọn bộ chọn sẽ bị xóa
• bắt đầu: sai | chức năng - gọi lại khi bắt đầu
• dừng: false | function - callba ck trên dừng
• unselecting: false | chức năng - callback khi nhấp vào set "unselectOn" tùy chọn

---

Đó là một plugin phiên bản dev, vì vậy sử dụng một cách cẩn thận

Answer 2

Sau khi nhìn xung quanh tôi đã không thể để tìm một giải pháp cho vấn đề này trong khi vẫn sử dụng chức năng Selectable của jQuery UI, vì vậy tôi đã viết một cái lên. Về cơ bản nó gõ vào các callbacks đã chọn/không được chọn của Selectable để quản lý trạng thái DOM trong khi vẫn tôn vinh các callbacks theo API có thể lựa chọn tiêu chuẩn. Nó hỗ trợ các trường hợp sử dụng sau đây:

• Bấm một trong những yếu tố (shift + click, Ctrl + nhấp chuột, hoặc nhấp vào + kéo cũng) bất cứ nơi nào trong danh sách
• Shift + nhấp vào yếu tố khác trong danh sách
• Tất cả các yếu tố giữa cộng với hai điểm cuối trở thành lựa chọn

Cách sử dụng cho một bảng:

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

một f ew ghi chú. (1) Hiện tại nó chỉ hỗ trợ các phần tử anh chị em. (2) Nó sẽ đi qua các tùy chọn cấu hình như bạn sẽ thấy trong ví dụ bảng cũng như các phương thức có thể chọn. (3) Tôi tim underscore.js vì vậy nó được sử dụng mặc dù cho điều này nó không phải là điều cần thiết. Hãy thoải mái trao đổi các kiểm tra đơn giản của nó và mở rộng nếu bạn không muốn sử dụng thư viện tuyệt vời này. Và không, tôi không có liên kết với underscore.js. :)

table fiddle example

list fiddle example

Hy vọng điều này sẽ giúp người khác! Chúc mừng.

Answer 3

Bạn có thể làm điều đó mà không cần plug-in như thế này:

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 
     } 
    } 
}); 

Dưới đây là bản demo trực tiếp: http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/