Kategori - Alt Kategori Sıralama (PHP + JQUERY) soru?

mustafayilmaz28 · 3 Ocak 2014

merhaba arkadaşlar.

yararlandığım kaynak,
Nestable

Sınırsız kategori mantığında Menü sırası değiştirmek için Görsel bir şeyler yapmak istediğimde karşıma çıkan kaynaktan bir örnek yapmak istedim,
ama birkaç noktada sorunum var?
kategorinin listelenmiş hali,

sıralama ise mause ile taşınarak yapılıyor,
(örnek)

kodlar ise,

fonksiyonlar.js

Kod:

$(document).ready(function(){
	// activate Nestable for list 1
	$('#nestable').nestable({
		group: 1
	})
	.on('change', updateOutput);
	// activate Nestable for list 2
	$('#nestable2').nestable({
		group: 1
	})
	.on('change', updateOutput);
	// output initial serialised data
	updateOutput($('#nestable').data('output', $('#nestable-output')));
	$('#nestable-menu').on('click', function(e){
		var target = $(e.target),
		action = target.data('action');
		if (action === 'expand-all') {
			$('.dd').nestable('expandAll');
		}
		if (action === 'collapse-all') {
			$('.dd').nestable('collapseAll');
		}
	});
});

index.php

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>Guruplandırılabilir Sürükle Bırak Sıralama Örneği(Nestable)</title>
    <link rel="stylesheet" type="text/css" href="stiller.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="jquery.nestable.js"></script>
	<script src="fonksiyonlar.js"></script>
</head>
<body>
<div class="cf nestable-lists">
    <div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item"[b] data-id="1" ust-id="0" sira-id="1"[/b]>
                <div class="dd-handle">BİLGİSAYARLAR</div>
            </li>
            <li class="dd-item" [b]data-id="2" ust-id="0" sira-id="2"[/b]>
                <div class="dd-handle">TELEFONLAR</div>
                <ol class="dd-list">
                    <li class="dd-item" [b]data-id="3" ust-id="2" sira-id="1"[/b]>
                        <div class="dd-handle">EV TELEFONLARI</div>
                    </li>
                    <li class="dd-item" [b]data-id="4" ust-id="2" sira-id="2"[/b]>
                        <div class="dd-handle">CEP TELEFONLARI</div>
                        <ol class="dd-list">
                            <li class="dd-item" [b]data-id="5" ust-id="4" sira-id="1"[/b]>
                                <div class="dd-handle">SAMSUNG</div>
                            </li>
                            <li class="dd-item" [b]data-id="6" ust-id="4" sira-id="2"[/b]>
                                <div class="dd-handle">GENERAL MOBİLE</div>
                            </li>
                            <li class="dd-item" [b]data-id="7" ust-id="4" sira-id="3"[/b]>
                                <div class="dd-handle">LG</div>
                            </li>
                        </ol>
                    </li>
                    <li class="dd-item" [b]data-id="8" ust-id="2" sira-id="3"[/b]>
                        <div class="dd-handle">TELSİZLER</div>
                    </li>
                </ol>
            </li>
            <li class="dd-item" [b]data-id="9" ust-id="0" sira-id="3"[/b]>
                <div class="dd-handle">OYUNCAKLAR</div>
            </li>
        </ol>
    </div>
</div>
</body>
</html>

benim yapmak istediğim ise
kategorileri taşıyınca
data-id="9" ust-id="0" sira-id="3" bu satırdaki

Kod:

[b]ust-id="0"[/b]

ve

Kod:

[b]sira-id="3"[/b]

değerlerinin değişmesi ve bunları okumak?
bunları okuyup kaydet'e bastığımda kategorilerin yeni düzenini kaydetmiş olacağım.

brkhn · 3 Ocak 2014

Aslında çok güzel bir eklenti neden degiştirme ihtiyacı duydun anlamadım istedigini net olarak belirtse idin daha çok yardımcı olabilirdim. Anladığım kadarı ile burda yaptığın sıralamayı veritabanına kaydedip çekmek istiyosun, Ana Kategori Üst ID degeri '0' olmak üzere;
fonksiyon.js

Kod:

$(document).ready(function()
{
   var jsonData;
    var updateOutput = function(e)
    {

        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            jsonData = window.JSON.stringify(list.nestable('serialize'));//, null, 2));
        } else {
            console.log('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);
    

    updateOutput($('#nestable').data('output', $('#nestable-output')));

   

    $('button').on('click',function(){
      console.log(jsonData);
      $.post( "test.php",{'data' : jsonData} , function( data ) {
        $('#return').html(data);
      });
    });
});

index.html or php

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>Guruplandırılabilir Sürükle Bırak Sıralama Örneği(Nestable)</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="jquery.nestable.js"></script>
   <script src="fonksiyon.js"></script>

</head>
<body>
<div class="cf nestable-lists">
    <div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="1" ust-id="0" sira-id="1">
                <div class="dd-handle">BİLGİSAYARLAR</div>
            </li>
            <li class="dd-item" data-id="2" ust-id="0" sira-id="2">
                <div class="dd-handle">TELEFONLAR</div>
                <ol class="dd-list">
                    <li class="dd-item" data-id="3" ust-id="2" sira-id="1">
                        <div class="dd-handle">EV TELEFONLARI</div>
                    </li>
                    <li class="dd-item" data-id="4" ust-id="2" sira-id="2">
                        <div class="dd-handle">CEP TELEFONLARI</div>
                        <ol class="dd-list">
                            <li class="dd-item" data-id="5" ust-id="4" sira-id="1">
                                <div class="dd-handle">SAMSUNG</div>
                            </li>
                            <li class="dd-item" data-id="6" ust-id="4" sira-id="2">
                                <div class="dd-handle">GENERAL MOBİLE</div>
                            </li>
                            <li class="dd-item" data-id="7" ust-id="4" sira-id="3">
                                <div class="dd-handle">LG</div>
                            </li>
                        </ol>
                    </li>
                    <li class="dd-item" data-id="8" ust-id="2" sira-id="3">
                        <div class="dd-handle">TELSİZLER</div>
                    </li>
                </ol>
            </li>
            <li class="dd-item" data-id="9" ust-id="0" sira-id="3">
                <div class="dd-handle">OYUNCAKLAR</div>
            </li>
        </ol>
    </div>
</div>
<button>BBNet İçin Tıkla </button>
<div id="return"></div>
</body>
</html>

test.php

Kod:

<?php
/**
* Post ile gelen json verisini alt verileri ile düzen li bir biçimde 
*yazdırır.
* @author Brkhn
* 
*/
if($_POST){
	exit;
}
$JSONdata = $_POST['data'];
if(count($JSONdata)){
	exit;
}
$data = json_decode($JSONdata);
function MenuQuery($data,$parentId = 0){
	foreach($data as $key=>$val){
		echo 'ID : '.$val->id.' Parent Id : '.$parentId.'<br>';
		if(isset($val->children)){
			MenuQuery($val->children,$val->id);
		}
	}
}
MenuQuery($data);

mustafayilmaz28 · 3 Ocak 2014

brkhn

hocam teşekkür ederim, Alah Razı olsun cevabınız için
benim yapmak istediğim menüleri taşıyınca bu değişen menülerin içindeki;
data-id="9" değeri kategorinin ID'si
ust-id="0" değeri kategorinin ustID'si
sira-id="3" değeri kategorinin Kendi içindeki SıraID'si
değerlerinden,
taşıdığım yere göre (örneğin bir alta taşıdığımda)
ust-id="1" değeri kategorinin ustID'si ve sira-id="1" değeri kategorinin Kendi içindeki SıraID'si
yeni değerleri almalı.
daha sonra ben kaydet butonuna tıklayınca bu <li></li> 'lerin ,
data-id, ust-id ve sira-id değerlerini okuyup veritabanında update edeceğim
fakat hocam, jquery bilgim kısıtlı kullanıdığım ajax yöntemi ise,

Kod:

function kaydet(){
	var deger1 = $('input[name="input1"]').val();
	var deger2 = $('input[name="input1"]').val();
	$.post('test.php', {deger1: deger1,deger2:deger2}, function (cevap) {
		alert(cevap);
	});
};

bunu en basit nasıl yaparım hocam, kod yazmaktan ziyade yol, yordam öneriniz daha çok makbule geçer

brkhn · 6 Ocak 2014

Bunları menüde göstermek için sorgu tümceciginde Sıralamayı id sıralamasına göre yapar isen, zaten kendi içinde sıralanıyor,
parent id '0' olanlar zaten üst kategori sıfır dışındakiler alt kategori olarak elde edebilirsin.

örnek olarak
http://stackoverflow.com/questions/1816 ... ot-all-the
burayı inceleyebilirsin.

Senin yapmak istedigin yol biraz daha uzun ve karışık amaç en sade ve en kısa yolu bulmak olsa gerek. Yapamaz ise pm at.

Kategori - Alt Kategori Sıralama (PHP + JQUERY) soru?

mustafayilmaz28

Süper Üye

Ekli dosyalar

brkhn

Site Gezgini

mustafayilmaz28

Süper Üye

brkhn

Site Gezgini