एचटीएमएल ड्रैग और ड्रॉप सॉर्ट करने योग्य टेबल

Question

कभी भी एक HTML ड्रैग और ड्रॉप सॉर्ट करने योग्य टेबल रखना चाहता था जिसमें आप पंक्तियों और स्तंभों दोनों को सॉर्ट कर सकते थे? मुझे पता है कि यह कुछ है जिसके लिए मैं मर जाऊंगा। वहां कई प्रकार की क्रमबद्ध सूचियां चल रही हैं लेकिन एक क्रमबद्ध तालिका ढूंढना असंभव प्रतीत होता है।

मुझे पता है कि आप script.aculo.us प्रदान करने वाले टूल के साथ बहुत करीब आ सकते हैं लेकिन मैं उनके साथ कुछ क्रॉस-ब्राउज़र मुद्दों में भाग गया।

Answer 1

मैंने अतीत में dhtmlxGrid का उपयोग किया है। अन्य चीजों के अलावा यह ड्रैग-एंड-ड्रॉप पंक्तियों/कॉलम, क्लाइंट-साइड सॉर्टिंग (स्ट्रिंग, पूर्णांक, दिनांक, कस्टम) और बहु-ब्राउज़र समर्थन का समर्थन करता है।

टिप्पणी का जवाब: नहीं, कुछ भी बेहतर नहीं मिला - बस उस परियोजना से आगे बढ़ गया। :-)

Answer 2

कैसे sorttable? यह आपकी आवश्यकताओं को अच्छी तरह फिट करने लगते हैं।

यह उपयोग करना आसान है - सॉर्टटेबल जावास्क्रिप्ट फ़ाइल लोड करें, फिर, प्रत्येक तालिका के लिए जिसे आप सॉर्ट करने योग्य बनाना चाहते हैं, < तालिका > टैग पर वर्ग = "क्रमबद्ध" लागू करें।

यह तुरंत समझ जाएगा कि अधिकांश प्रकार के डेटा को कैसे क्रमबद्ध किया जाए, लेकिन यदि ऐसा कुछ नहीं है, तो आप इसे सॉर्ट करने के तरीके को बताने के लिए एक कस्टम सॉर्ट कुंजी जोड़ सकते हैं। दस्तावेज यह सब ठीक से बताता है।

Answer 3

मैं में Sortables की अनुशंसा करता हूं। आप इसे टेबल आइटम सहित सूची आइटम या बहुत कुछ भी उपयोग कर सकते हैं।

jQuery बहुत क्रॉस-ब्राउज़र अनुकूल है और मैं इसे हर समय अनुशंसा करता हूं।

Answer 4

यदि आपको जावा नहीं लगता है, तो GWT-DND नामक जीडब्ल्यूटी के लिए एक बहुत ही आसान लाइब्रेरी है, यह देखने के लिए ऑनलाइन डेमो देखें कि यह कितना शक्तिशाली है।

Answer 5

अधिकांश ढांचे (यूई, म्यूटूल, jQuery, प्रोटोटाइप/स्क्रिप्टैकुलर इत्यादि) में क्रमबद्ध सूची कार्यक्षमता है। प्रत्येक में थोड़ा सा शोध करें और अपनी जरूरतों के अनुरूप सबसे ज्यादा चुनें।

Answer 6

मैंने अच्छे परिणाम के साथ jQuery UI की क्रमबद्ध प्लगइन का उपयोग किया है। मार्कअप इस के समान:

<table id="myTable"> 
<thead> 
<tr><th>ID</th><th>Name</th><th>Details</th></tr> 
</thead> 
<tbody class="sort"> 
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr> 
</tbody> 
</table> 

और फिर जावास्क्रिप्ट

$('.sort').sortable({ 
    cursor: 'move', 
    axis: 'y', 
    update: function(e, ui) { 
     href = '/myReorderFunctionURL/'; 
     $(this).sortable("refresh"); 
     sorted = $(this).sortable("serialize", 'id'); 
     $.ajax({ 
      type: 'POST', 
      url: href, 
      data: sorted, 
      success: function(msg) { 
       //do something with the sorted data 
      } 
     }); 
    } 
}); 

इस पोस्ट यूआरएल के लिए आइटम 'आईडी की एक धारावाहिक संस्करण दिया है। यह फ़ंक्शन (मेरे मामले में PHP) फिर डेटाबेस में आइटम के ऑर्डर अपडेट करता है।

Answer 7

डेविड हेगी का जवाब मेरे लिए सबसे उपयोगी था। यह थोड़ा और संक्षिप्त हो सकता है:

var sort = function(event, ui) { 
    var url = "/myReorderFunctionURL/" + $(this).sortable('serialize'); 
    $.post(url, null,null,"script"); // sortable("refresh") is automatic 
} 

$(".sort").sortable({ 
    cursor: 'move', 
    axis: 'y', 
    stop: sort 
}); 

उसी मार्कअप के साथ मेरे लिए काम करता है।

Answer 8

यदि आपको लगता है।क्रमानुसार() डेविड Heggie के समाधान में अशक्त लौटने फिर 'ID_1' के रूप में टीआरएस के बजाय बस '1'

के लिए आईडी मूल्यों को निर्धारित

उदाहरण:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr> 

ऊपर के रूप में "आईडी को क्रमानुसार जाएगा [] = 1 & आईडी [] = 2 & आईडी [] = 3 "

आप '_' के बजाय '=', '-' या '_' का उपयोग कर सकते हैं। और "आईडी" के अलावा कोई अन्य शब्द।