Ajax,Json,PHP ve Mysql ile sınırsız kategorili ağaç menü (Javascript)
Ceviz Viki sitesinden
Önemli not: Bu kod şu anda bir taslaktır.
Konu başlıkları |
Motivasyon
http://forum.ceviz.net/showthread.php?t=65821 konusundan buraya kopyalanmıştır.
Katkıda bulunanlar
chesterx (ceviz forum)
Mysql kodu
CREATE TABLE IF NOT EXISTS `kategori` (
`no` int(11) NOT NULL AUTO_INCREMENT,
`altKatNo` int(11) NOT NULL DEFAULT '0',
`sira` int(11) NOT NULL,
`isim` varchar(255) collate utf8_turkish_ci NOT NULL,
`ustKat` int(11) DEFAULT NULL,
PRIMARY KEY (`no`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci AUTO_INCREMENT=17 ;
--
-- Tablo döküm verisi `kategori`
--
INSERT INTO `kategori` (`no`, `altKatNo`, `sira`, `isim`, `ustKat`) VALUES
(1, 0, 0, 'Ana Kategori', 0),
(2, 0, 0, 'İlk Okullar', 1),
(3, 0, 0, 'Orta Okullar', 0),
(4, 0, 0, 'Liseler', 0),
(5, 0, 0, 'Yüksek Okullar', 0),
(6, 0, 0, 'Üniversiteler', 0),
(7, 0, 0, 'Kolejler', 1),
(8, 0, 0, 'İlk Okullar', 2),
(9, 0, 0, 'Gece Okulları', 2),
(10, 0, 0, 'Yabancı Dil Liseler', 3),
(11, 0, 0, 'Yüksek Lisans', 3),
(12, 0, 0, 'Yabancı Dil Liseler', 4),
(13, 0, 0, 'Yüksek Lisans', 4),
(14, 0, 0, 'Yabancı Dil Liseler', 5),
(15, 0, 0, 'Yüksek Lisans', 5),
(16, 0, 0, 'Doktora', 6);
Php kodu
<?php
require_once("../func/veritabani.php");
$veri = $_GET['kategori'];
$tablo = "kategori";
$secim = "*";
function getir($ustKat){
$vtSorgu = mysql_query("SELECT * from kategori where ustKat=$ustKat");
while ($listele=mysql_fetch_array($vtSorgu)){
$listeleme['isim']= $listele['isim'];
$listeleX[] = $listeleme;
}
return $listeleX;
}
print json_encode(getir($veri));
?>
Kullanıcıya gösterilen arayüz
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Kategori</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/chesterx.css" />
<script type="text/javascript">
$(document).ready(function(){
$('button').click( sonucAl );
});
function sonucAl()
{
$('#sonuc').html('Aktarılıyor...');
$.getJSON('json/kategori.php?kategori=0', function(JSON){
var x = 1;
var ul = document.createElement('ul');
ul.id = "u"+x;
$('#sonuc').empty();
$.each(JSON, function(i, program){
var liste = document.createElement('li');
liste.id = "l"+x;
liste.setAttribute("class","sp")
var span = document.createElement('span');
span.id = x;
span.onclick = function(){altKatGetir(this.id)}
liste.appendChild(span);
ul.appendChild(liste);
$('#sonuc').append(ul);
$(span,x).append(program.isim);
x++;
});
});
}
function altKatGetir(id) {
var node = document.getElementById(id);
$.getJSON('json/kategori.php?kategori='+id, function(JSON){
var i = 1;
var ul = document.createElement('ul');
ul.id = "u"+i;
$.each(JSON, function(i, program){
var liste = document.createElement('li');
liste.id = "l"+i;
var span = document.createElement('span');
span.id = "a"+i;
span.setAttribute("class","altSp")
liste.appendChild(span);
ul.appendChild(liste);
$(node).append(ul);
$(span,i).append(program.isim);
});
});
}
</script>
</head>
<body>
<button type="button">Kategori Getir</button>
<div id="sonuc"></div>
</body>
</html>
