JQuery/जावास्क्रिप्ट पुनःअनुक्रमण पंक्तियों

मैं एक aspx पृष्ठ कि कुछ इस तरह दिखता है डेटाबेस में)JQuery/जावास्क्रिप्ट पुनःअनुक्रमण पंक्तियों

मैं इसे पूरा करने के लिए JQuery/JS का उपयोग कैसे करूं?

संपादित करें:

मैं appendTo कोड के साथ एक प्रदर्शन मुद्दे में चलाने की है। इसमें 10 पंक्तियों की एक तालिका के लिए 400 मिमी लगते हैं जो वास्तव में अस्वीकार्य है। क्या कोई मुझे प्रदर्शन के लिए इसे ट्विक करने में मदद कर सकता है?

function RearrangeTable(csvOrder, tableId) 
{ 
    var arrCSVOrder = csvOrder.split(','); 

    //No need to rearrange if array length is 1 
    if (arrCSVOrder.length > 1) 
    { 
    for (var i = 0; i < arrCSVOrder.length; i++) 
    { 
     $('#' + tableId).find('[fieldname = ' + arrCSVOrder[i] + ']').eq(0).parents('tr').eq(0).appendTo('#' + tableId); 
    } 
    } 
}

स्रोत

2009-03-01 DotnetDude

क्या आपने अभी तक इसका समाधान किया है या आप अभी भी उत्तर पर प्रतीक्षा कर रहे हैं? – James

बस कुछ इस तरह करते हैं:

<table id='table'> 
    <tr id='row1'><td> .... </td></tr> 
    <tr id='row2'><td> .... </td></tr> 
    <tr id='row3'><td> .... </td></tr> 
    <tr id='row4'><td> .... </td></tr> 
</table>

और इस तरह नए आदेश के साथ एक सरणी:

NewOrder[1] = 3; 
NewOrder[2] = 4; 
NewOrder[3] = 2;

फिर, कुछ कुछ करना

आप तालिका इसलिए की तरह है कहो इस तरह (परीक्षण नहीं किया गया है, इसलिए आपको कोड को ट्विक करने की आवश्यकता हो सकती है, लेकिन यह विचार है):

for (i=1; i<=NewOrder.length; i++) { 
    $('#row'+i).appendTo('#table'); 
}

इस तरह, वे क्रमशः तालिका के अंत में स्थानांतरित हो जाते हैं।

तो आप 3 अंत तक चले जाएंगे, फिर उसके पीछे 4, उसके बाद 2, आदि। उनके पास सभी तालिका के अंत में संलग्न किए गए हैं, पहला व्यक्ति पहली पंक्ति बन जाएगा, और बाकी इसके पीछे सही क्रम में होंगे।

संपादित करें:

तालिका शैली = बनाओ 'प्रदर्शन: कोई नहीं;' और फिर $ ('# table') करें। दिखाएं(); प्रारंभ होने पर।

संपादित करें फिर: आप पूरे शरीर सामग्री के आसपास एक div कर सकता है, जैसे

<body> 
<div id='everything' style='display:none;'> 
.... 
</div> 
</body>

ताकि पूरे पृष्ठ को छिपा दिया जाएगा (बस खाली सफेद) एक दूसरे लेता के अंश के लिए तालिका को लोड और ऑर्डर करने के लिए।

तो फिर तुम का प्रयोग करेंगे:

$(function(){ 
    $('#everything').show(); 
}

सभी को एक बार जैसे ही पूरे पृष्ठ को दिखाने के लिए के रूप में डोम तैयार है। यह पेज लोड होने के लिए एक सेकंड का एक अंश लेगा, लेकिन यह सब एक बार में लोड हो जाएगा, इसलिए गायब तालिकाओं का कोई फ्लैश नहीं होगा, जब तक कि सब कुछ # सब कुछ में है, यह सिर्फ दिखाई देगा लोड किए गए पृष्ठ की तरह - दर्शक को पारदर्शी होना चाहिए।

स्रोत

2009-03-06 00:50:44 Eli

यह लगभग काम करता है। तालिका में अदृश्य होने पर मेरे पास अभी भी एक सेकंड का वह अंश है। यह एक ग्राहक का सामना करने वाला पृष्ठ है और यूआई व्यवहार वास्तव में महत्वपूर्ण है। क्या आप एक अलग तरीके से सुझाव दे सकते हैं? – DotnetDude

@DotnetDude - दूसरा संपादन देखें। – Eli

सर्वर पक्ष पर पंक्तियों का ऑर्डर क्यों नहीं करें? यदि आप पेज लोड होने के तुरंत बाद JQuery के साथ उन्हें पुन: व्यवस्थित करने जा रहे हैं तो यह सर्वर कोड में यह काम करने के लिए और अधिक कुशल होगा, खासकर यदि उपयोगकर्ता का चयनित ऑर्डर किसी डेटाबेस में संग्रहीत होता है।

स्रोत

2009-03-01 22:50:55

क्या आपका मतलब है कि मैं इन पंक्तियों को सर्वर की तरफ गतिशील रूप से जोड़ता हूं? चूंकि यह एक जटिल पृष्ठ है, इसलिए मैं इन पंक्तियों को गतिशील रूप से बनाने से बचना चाहता हूं (इन पंक्तियों में कई कस्टम नियंत्रण हैं जिन्हें मैंने उदाहरण में छोड़ा है) – DotnetDude

डॉटनेटड्यूड: मैं यह देखने में असफल रहा कि क्लाइंट पर ऐसा करना आसान होगा सर्वर की तुलना में। आप क्लाइंट को बताने की योजना कैसे बनाते हैं कि आप पंक्तियों को किस क्रम में चाहते हैं? – svinto

svinto - मेरी योजना डीओएम स्तर पर पंक्तियों को स्वैप करना है। हालांकि मैं एक और अधिक सुरुचिपूर्ण समाधान की तलाश में हूं।अगर मुझे सर्वर की ओर से यह करना है, तो मैं मानता हूं कि यह बहुत आसान है, लेकिन मैं फ्लाई पर सभी नियंत्रण बनाने के लिए समाप्त हो जाऊंगा और मैं गतिशील नियंत्रण नहीं बनाऊंगा (दृश्य समस्या – DotnetDude

jQuery tablesorter plugin का प्रयास करें।

दस्तावेज़ लोड आप स्तंभ अनुक्रमणिका निर्दिष्ट करने पर सॉर्ट करने के लिए द्वारा तालिका सॉर्ट कर सकते हैं (और यह अनेक कॉलम के आधार छँटाई की अनुमति देता है) जब: jQuery TableSorter Plugin

$(document).ready(function() 
    { 
     $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
    } 
);

स्रोत

2009-03-01 22:52:32

यह एक अच्छा समाधान होगा क्योंकि कोई एक (संयुक्त) क्रमबद्ध राज्य को जोड़ सकता है डेटाबेस और अभी भी उपयोगकर्ता के whim पर तालिका का सहारा लेने के लिए जावास्क्रिप्ट नियंत्रण प्रदान करते हैं। – Danny

असाधारण काम करता है! वास्तव में महान प्लगइन। –

चेक, यह बहुत शक्तिशाली है यह अंतर्निहित का पता लगाता है स्तंभों की डेटाटाइप्स, और आप अपने तालिका स्तंभ प्रोग्राम के रूप में सॉर्ट कर सकते हैं:

$("#yourTable").tablesorter({sortList: [[0,0]]}); 
// This will sort "yourTable" using 
// the first column, ascending [columnIndex, 0=ASC or 1 = DESC]

स्रोत

2009-03-01 22:53:47 CMS

पिछले छंटाई प्रयोक्ता द्वारा किया पंक्ति आईडी युक्त एक सूची के रूप में जमा है, तो आप ऐसा कर सकते हैं:

loop through list from db { 
    $("#"+rowId).appendTo("#tableId") 
}

इस तरह, पंक्तियों को उनके वर्तमान स्थान से बाहर ले जाया जाएगा और डेटाबेस में संग्रहीत क्रम में तालिका के अंदर प्रतिस्थापित किया जाएगा।

स्रोत

2009-03-02 14:24:12 peirix

धन्यवाद। मेरे पास एस डिज़ाइन समय में जोड़ा गया है। इसलिए, स्पष्टीकरण के लिए, मौजूदा को निकालने और इसे जोड़ने के लिए संलग्न है तालिका में निर्दिष्ट तालिका में आईडी? क्या यह काम करेगा यदि एस पहले से ही तालिका के अंदर हैं? – DotnetDude

हाँ। संलग्न करें एक क्लोन बनाता है, फिर इसे आपके द्वारा निर्दिष्ट तत्व को जोड़ता है, और फिर पुराने को हटा देता है। यह तब भी काम करेगा जब टी को अपनी मेज के अंदर ले जाया जाता है, हां। – peirix

ध्यान रखें कि क्लाइंट-साइड के पत्ते खुद को तीन तरीकों से मुद्दों पर खुलते हैं।

यदि क्लाइंट कंप्यूटर धीमा है तो यह पुनरावृत्ति दिखाई दे सकती है चाहे आप क्या करें।
डेटा की तालिका जितनी धीमी हो जाती है यह क्रिया धीमी हो जाएगी और अधिक दिखाई देने वाला दृश्य होगा।
क्लाइंट जेएस अक्षम हो सकता है, जो आपके रिकॉर्डिंग को तोड़ देगा।

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

यदि आपको सर्वर-साइड कोड को अपने कस्टम नियंत्रण के साथ सही काम करने में समस्याएं आ रही हैं तो इसे पोस्ट करें और हम आपकी सहायता करेंगे।

स्रोत

2009-03-09 18:56:24 Parrots

संपादन संलग्न करें विधि कार्य करता है। हालांकि, क्लाइंट साइड पर पंक्तियों को पुनर्व्यवस्थित करने में थोड़ी देर में, मैं अपनी मूल क्रम में पंक्तियों को रीडरिंग पूर्ण होने से लगभग आधे सेकेंड तक देखता हूं। यह UI व्यवहार अधिक प्रमुख है क्योंकि पृष्ठ पोस्टबैक का उपयोग नहीं करता है। इसके लिए कोई कामकाज?

सेट डिस्प्ले: सीएसएस के साथ तालिका में कोई भी नहीं। जब दस्तावेज़ तैयार घटना आग लगती है तो एपेंड टू विधि का उपयोग करें। मेज पर शो शो। आप डिस्प्ले के साथ एक और स्टाइल टैग सेट कर सकते हैं: जेएस अक्षम होने पर <noscript> के अंदर तालिका पर ब्लॉक करें।

स्रोत

2009-03-12 23:34:28 Vasil

कार्य उदाहरण। बस नई सूची बनाने वाली नई ऑर्डर (जिसे, संभवतः आप डीबी से पढ़ते हैं) वाली एक सूची के माध्यम से पुन: प्रयास करें। फिर तालिका एचटीएमएल() को नई टेबल एचटीएमएल पर सेट करें।

<html> 
<head> 
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
jQuery.fn.outer = function(){ 
    return $($('<div></div>').html(this.clone())).html(); 
} 
$(function(){ 
    newtbl = ""; 
    neworder = [2,3,1]; 
    for(i=0;i<neworder.length;i++){ 
     newtbl += $("#Row"+neworder[i]).outer(); 
    } 
    $("#tbl").html("<table id=\"tbl\">" + newtbl + "</table>") 
}); 
</script>  
</head> 
<body> 
<table id="tbl"> 
<tr id="Row1"> 
    <td>label 1</td> 
    <td>Some complex control</td> 
</tr> 
<tr id="Row2"> 
    <td>label 2</td> 
    <td>Some complex control</td> 
</tr> 
<tr id="Row3"> 
    <td>label 3</td> 
    <td>Some complex control</td> 
</tr> 
</table> 
</body> 
</html>

स्रोत

2009-03-13 14:29:57

JQuery/जावास्क्रिप्ट पुनःअनुक्रमण पंक्तियों

उत्तर

संबंधित मुद्दे