jQuery ইউআই বাছাইযোগ্য, তারপরে একটি ডাটাবেসে অর্ডার লিখুন

Question

আমি sortableব্যবহারকারীদের অর্ডার সেট করতে এবং তারপরে পরিবর্তনের পরে, এটি ডাটাবেজে লিখতে এবং আপডেট করার জন্য jQuery UI ফাংশনটি ব্যবহার করতে চাই । এটি কীভাবে হবে তার উপর কেউ উদাহরণ লিখতে পারেন?

Comments

toArrayবাছাই করা আইডির একটি স্ট্রিং দেবে, আমি মনে করি এটি সহায়ক হতে পারে। api.jqueryui.com/sortable/#method-toArray

— MahanGM 26'13

আপনি কি আপনার সমস্যা সমাধান করেছেন?

— Knelis

এই আপনি সাহায্য করতে পারে codingbin.com/reorder-with-php-mysql-and-jquery-sortable

— ম্যাসেডোনিয়ানে

কিছু উপায়ে এর মতো প্রশ্নগুলি এসও-তে সেরা। যাইহোক, এই প্রশ্নটি 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বিকল্পটি ব্যবহার করেন , এটি এটির মতো একটি পোষ্ট ক্যোয়ারী স্ট্রিং তৈরি করবে: item[]=1&item[]=2ইত্যাদি So তাই আপনি যদি ব্যবহার করেন - উদাহরণস্বরূপ - idবৈশিষ্ট্যে আপনার ডাটাবেস আইডিগুলি , তবে আপনি কেবল পোস্ট করা অ্যারের মাধ্যমে পুনরাবৃত্তি করতে পারেন এবং সেই অনুযায়ী উপাদানগুলির অবস্থান আপডেট করতে পারেন etc. ।

উদাহরণস্বরূপ, পিএইচপি-তে:

$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({...

— টেলান

ডকুমেন্টেশন সিরিয়াল বিকল্পটি ব্যবহার করার জন্য আপনাকে আইডিটিকে নাম_সংখ্যার ফর্ম্যাট হিসাবে সংজ্ঞায়িত করতে হবে ।

— parisssss

ডকুমেন্টেশন অনুযায়ী আপনি এই অন্যান্য অক্ষরটিও ব্যবহার করতে পারেন

— looess

আমি একাধিক ডেটা ভেরিয়েবলগুলি পেরিয়ে গেলে এটি কাজ করতে পারে বলে মনে হচ্ছে না।

— PBwebD

এই আপনি সাহায্য করতে পারে codingbin.com/reorder-with-php-mysql-and-jquery-sortable

— ম্যাসেডোনিয়ানে

Answer 2

ভেবেছিলাম এটিও সাহায্য করতে পারে। ক) সার্ভারে ফেরত পাঠানোর সময় প্রতিটি ধরণের পরে পেডলোডটি সর্বনিম্ন রেখে দেওয়ার জন্য ডিজাইন করা হয়েছিল। (প্রতিবার সমস্ত উপাদান প্রেরণ করার পরিবর্তে বা সার্ভারের বাইরে বেরিয়ে আসতে পারে এমন অনেক উপাদানগুলির মাধ্যমে পুনরাবৃত্তি করার পরিবর্তে) খ) উপাদানটির আইডি / নাম নিয়ে কোনও আপস না করে আমার কাস্টম আইডি ফেরত পাঠানো দরকার। এই কোডটি এসপ নেট সার্ভার থেকে তালিকাটি পাবে এবং তারপরে কেবলমাত্র 2 টি মান সারণের পরে ফেরত পাঠানো হবে: সাজানো উপাদানের ডিবি আইডি এবং পাশের উপাদানটির ডিবি আইডি বাদ দেওয়া হয়েছিল। এই 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 / এইচটিএমএল সমস্যা।

— জিজিডিএক্স

দুই বছর পর! ব্যস্ত হয়েছে?

— ggdx

যদি সরানো আইটেমটি তালিকার প্রথম আইটেম হিসাবে বাদ পড়ে তবে কী হবে?

— এডসন হোরাসিও জুনিয়র

যদি কোনও আইটেম বাদ পড়ে যায়, তবে আইটেমটির "পরবর্তী" আইডি = 0, ক্রিয়া = ডেল এবং প্লিড = আইডির উপর কাজ করা হচ্ছে, অন্যথায় ক্রিয়া = সাজান এবং সেখানে 2 প্যারাম রয়েছে, আইটেমটি বাছাই করা হচ্ছে এবং এর পরে এটি ফেলে দেওয়া হবে । অপারেশন বাকি অংশ সঞ্চালনের জন্য সার্ভার ব্যবহার করতে পারে সর্বনিম্ন তথ্য। এটি চেষ্টা করা হয় এবং পরীক্ষার প্যাটার্ন। আমি এমনকি একই প্যাটার্নটি ব্যবহার করে addোকাতে এবং সন্নিবেশ করিয়েছি - কেবলমাত্র প্লে অফ প্লে এবং অন্যান্য 2 টি প্যারাম।

— কল্পনা পোপাত

Answer 3

আপনি ভাগ্যবান, আমি আমার সিএমএসে সঠিক জিনিসটি ব্যবহার করি

আপনি যখন অর্ডার সঞ্চয় করতে চান, কেবল জাভাস্ক্রিপ্ট পদ্ধতিতে কল করুন saveOrder()। এটি POSTসেভর্ডার.এফপি করার জন্য একটি এজেএক্স অনুরোধ করবে , তবে অবশ্যই আপনি এটি সর্বদা নিয়মিত ফর্ম হিসাবে পোস্ট করতে পারেন।

<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();'/>

সেভর্ডার.এফপিতে; মনে রাখবেন আমি সমস্ত যাচাইকরণ এবং চেক অপসারণ করেছি।

<?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

আমি জেএসফিডেলে গৃহীত উত্তর এবং সম্পর্কিত উদাহরণ অনুসরণ করে সারিগুলি পরিবর্তন করতে পারি। তবে কিছু অজানা কারণে, "থামাতে বা পরিবর্তন" ক্রিয়াকলাপের পরে আমি আইডিগুলি পেতে পারি না। তবে জিকুয়েরি ইউআই পৃষ্ঠায় পোস্ট করা উদাহরণটি আমার পক্ষে ভাল কাজ করে। আপনি যে লিঙ্কটি এখানে চেক করতে পারেন ।

Answer 6

এই সমাধানটি দিয়ে চেষ্টা করুন: http://phppot.com/php/sorting-mysql-row-order- using-jquery/ যেখানে কিছু এইচএমটিএল উপাদানে নতুন অর্ডার সংরক্ষণ করা হয়। তারপরে আপনি এই পিএইচপি স্ক্রিপ্টে এই ডেটা সহ ফর্মটি জমা দিন এবং লুপের জন্য এটি ট্রিটটি পুনরাবৃত্তি করুন।

দ্রষ্টব্য: আমাকে INT (11) টাইপের আরও একটি ডিবি ক্ষেত্র যুক্ত করতে হয়েছিল যা প্রতিটি পুনরাবৃত্তির উপরে আপডেট হয় (টাইমস্ট্যাম্পেড) - এটি স্ক্রিপ্টের জন্য এটি জানায় যে কোন সারিটি সাম্প্রতিককালে আপডেট হয়েছে, নাহলে আপনি স্ক্র্যাম্বলড ফলাফল দিয়ে শেষ করেন।