jQuery UI सॉर्टेबल, फिर एक डेटाबेस में ऑर्डर लिखें

Question

मैं sortableउपयोगकर्ताओं को एक आदेश सेट करने और फिर परिवर्तन पर, डेटाबेस में लिखने और इसे अपडेट करने की अनुमति देने के लिए jQuery UI फ़ंक्शन का उपयोग करना चाहता हूं । क्या कोई इस पर एक उदाहरण लिख सकता है कि यह कैसे किया जाएगा?

Comments

toArrayसॉर्ट किए गए आईडी की एक स्ट्रिंग देगा, मुझे लगता है कि यह मददगार हो सकता है। api.jqueryui.com/sortable/#method-toArray

— MahanGM

क्या आपने अपनी समस्या को ठीक किया?

— कैलिस

यह आप में मदद मिल सकती codingbin.com/reorder-with-php-mysql-and-jquery-sortable

— MKD

कुछ मायनों में इस तरह के सवाल SO पर सबसे अच्छे हैं। हालाँकि, इस प्रश्न को 2020 में समाप्त कर दिया जाएगा।

— परपलूई

Answer 1

JQuery UI sortableसुविधा में ऐसा serializeकरने के लिए एक विधि शामिल है । यह वास्तव में काफी सरल है। यहां एक त्वरित उदाहरण है जो किसी तत्व में परिवर्तन की स्थिति के रूप में डेटा को निर्दिष्ट URL पर भेजता है।

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

यह क्या करता है कि यह तत्वों का उपयोग करके तत्वों की एक सरणी बनाता है id। इसलिए, मैं आमतौर पर ऐसा कुछ करता हूं:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

जब आप serializeविकल्प का उपयोग करते हैं , तो यह इस तरह एक POST क्वेरी स्ट्रिंग बनाएगा: item[]=1&item[]=2आदि। यदि आप उपयोग करते हैं - उदाहरण के लिए - idविशेषता में आपका डेटाबेस आईडी , तो आप बस पोस्ट किए गए सरणी के माध्यम से पुनरावृति कर सकते हैं और तदनुसार तत्वों की स्थिति को अपडेट कर सकते हैं। ।

उदाहरण के लिए, PHP में:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

JsFiddle पर उदाहरण।

Comments

आईडी स्वचालित रूप से जनरेट करने के लिए आप उपयोग कर सकते हैं$("#element").children().uniqueId().end().sortable({...

— तैलान

दस्तावेज़ीकरण क्रमबद्ध विकल्प का उपयोग करने के लिए कहता है कि आपको आईडी को name_number प्रारूप के रूप में परिभाषित करना चाहिए ।

— parisssss

आप दस्तावेज़ के अनुसार इन अन्य वर्णों का भी उपयोग कर सकते हैं: आप सेट और संख्या को अलग करने के लिए एक अंडरस्कोर, समान चिह्न या हाइफ़न का उपयोग कर सकते हैं। उदाहरण के लिए "foo = 1", "foo-1", और "foo_1" सभी "foo [] = 1" को क्रमबद्ध करते हैं।

— लोहस

यदि मैं कई डेटा चर पास कर रहा हूं तो मुझे यह काम करने के लिए प्रतीत नहीं हो सकता है।

— PBwebD

यह आप में मदद मिल सकती codingbin.com/reorder-with-php-mysql-and-jquery-sortable

— MKD

Answer 2

सोचा कि यह भी मदद कर सकता है। ए) इसे प्रत्येक प्रकार के बाद, सर्वर पर वापस भेजते समय पेलोड को न्यूनतम रखने के लिए डिज़ाइन किया गया था। (हर बार सभी तत्वों को भेजने के बजाय या सर्वर द्वारा चकित हो सकने वाले कई तत्वों के माध्यम से पुनरावृत्ति करते हुए) बी) मुझे तत्व की आईडी / नाम से समझौता किए बिना कस्टम आईडी वापस भेजने की आवश्यकता थी। इस कोड को asp.net सर्वर से सूची मिल जाएगी और फिर केवल 2 मानों को छाँटने पर वापस भेजा जाएगा: सॉर्ट किए गए तत्व की db आईडी और उस तत्व की db id जिसके आगे वह गिरा था। उन 2 मूल्यों के आधार पर, सर्वर आसानी से नए आसन की पहचान कर सकता है।

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>

Comments

एएसपी टैग उनके साथ अपरिचित लोगों को भ्रमित कर सकता है और यह विशुद्ध रूप से एक jQuery / HTML समस्या है।

— ggdx 12

दो साल बाद! बहुत व्यस्तता थी?

— ggdx

सूची के पहले आइटम के रूप में स्थानांतरित वस्तु को गिरा दिए जाने पर क्या होता है?

— एडसन होरासियो जूनियर

यदि कोई आइटम गिरा दिया जाता है, तो "अगले" आईडी = 0, एक्शन = डेल और प्लीड = आईडी के आइटम पर कार्रवाई की जा रही है, अन्यथा कार्रवाई = सॉर्ट और 2 परम हैं, आइटम सॉर्ट किए जा रहे हैं और जिसके बगल में इसे गिरा दिया गया है । न्यूनतम जानकारी है कि सर्वर आपरेशन के बाकी प्रदर्शन के लिए उपयोग कर सकते हैं। इसकी कोशिश की जाती है और पैटर्न का परीक्षण किया जाता है। यहां तक ​​कि मैं एक ही पैटर्न का उपयोग करके जोड़ और सम्मिलित करता हूं - केवल कार्रवाई का नाटक और अन्य 2 पैरा।

— कल्पेश पोपट

Answer 3

आप भाग्य में हैं, मैं अपने सीएमएस में सटीक चीज का उपयोग करता हूं

जब आप ऑर्डर स्टोर करना चाहते हैं, तो बस जावास्क्रिप्ट विधि को कॉल करें saveOrder()। यह POSTsaveorder.php के लिए एक AJAX अनुरोध करेगा, लेकिन निश्चित रूप से आप इसे हमेशा एक नियमित रूप में पोस्ट कर सकते हैं।

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

Saveorder.php में; ध्यान रखें मैंने सभी सत्यापन और जाँच को हटा दिया है।

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Answer 4

यह मेरा उदाहरण है।

https://github.com/luisnicg/jQuery-Sortable-and-PHP

आपको अपडेट ईवेंट में ऑर्डर को पकड़ना होगा

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Answer 5

मैं jsFiddle पर स्वीकृत उत्तर और संबंधित उदाहरण का पालन करके पंक्तियों को बदल सकता हूं। लेकिन कुछ अज्ञात कारणों के कारण, मैं "स्टॉप या चेंज" क्रियाओं के बाद आईडी प्राप्त नहीं कर सका। लेकिन JQuery UI पृष्ठ में पोस्ट किया गया उदाहरण मेरे लिए ठीक काम करता है। आप उस लिंक को यहाँ देख सकते हैं।

Answer 6

इस समाधान के साथ प्रयास करें: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ जहां कुछ HMTL तत्व में नया ऑर्डर सेव किया गया है। फिर आप इस डेटा के साथ फ़ॉर्म को कुछ PHP स्क्रिप्ट में सबमिट करते हैं, और इसे लूप के साथ ट्रेट करते हैं।

नोट: मुझे INT (11) का एक और db फील्ड जोड़ना था जो प्रत्येक पुनरावृत्ति पर अद्यतन (टाइमस्टैम्प'एड) है - यह स्क्रिप्ट के लिए यह जानने के लिए कार्य करता है कि कौन सी पंक्ति हाल ही में अपडेट की गई है, या फिर आप परिणाम के साथ समाप्त हो गए हैं।