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" या "कमांड कुंजी" तो आप का चयन रद्द तत्वों एक एक करके चयन कर सकते हैं /।

उल - अभिभावक जो आंतरिक तत्वों को चुनने के लिए रखता है।

उपलब्ध विकल्पों की संख्या के होते हैं:

• keepSelection - सच | झूठी - काफी एक महत्वपूर्ण झंडा।अगर सही (डिफ़ॉल्ट) करने के लिए सेट है, तो चयन अगर आप पहले से चयनित तत्व पर क्लिक करें (के रूप में यह कई प्रोप के साथ काम करता है)
• एकाधिक चयन करें साफ़ नहीं किया जाएगा - सच | झूठी -यदि झूठी आप केवल एक तत्व का चयन कर सकते हैं
• चयनित - 'चुना' - वर्ग कि चयनित तत्व को
• फिल्टर जोड़ दिया जाएगा: - '> *' - क्या तत्वों हम चयन करने के लिए
• unselectOn जा रहे हैं - झूठे | 'चयनकर्ता' - तो सेट पर क्लिक किया सेट चयनकर्ता चयन हटा दिया जाएगा
• प्रारंभ: झूठी | फ़ंक्शन - कॉलबैक
• रोकें: झूठी | फ़ंक्शन - कॉलबा स्टॉप पर सी.के.
• अचयनित: झूठी | समारोह - कॉलबैक जब सेट पर क्लिक किया "unselectOn" विकल्प

---

यह एक देव संस्करण प्लगइन है, तो ध्यान

Answer 2

के साथ उपयोग चारों ओर देख रहा असमर्थ था के बाद jQuery UI के चयन योग्य फ़ंक्शन का उपयोग करते हुए इस समस्या का हल ढूंढने के लिए, इसलिए मैंने एक लिखा। अनिवार्य रूप से यह मानक चयन योग्य एपीआई के अनुसार कॉलबैक का सम्मान करते हुए डीओएम राज्य का प्रबंधन करने के लिए चयन योग्य के चयनित/अचयनित कॉलबैक में पड़ता है। यह निम्न उपयोग के मामले का समर्थन करता है:

• क्लिक तत्वों में से एक (shift + क्लिक करें, cntl + क्लिक करें, या + खींचें भी क्लिक करें)
• शिफ्ट सूची में कहीं भी + सूची में एक तत्व क्लिक

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

एक च:

• के बीच सभी तत्वों को साथ में दो अंत अंक एक मेज के लिए चुना

प्रयोग बन ईडब्ल्यू नोट्स (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/