درس عمل قائمة تري فيو مع امكانية اضافة وحذف اقسام بشكل ديناميكي.

السلام عليكم ورحمة الله وبركاته بداية اوضح لكم ان هذا الدرس مبني على كود جافا سكربت قمت بتحميله من احدى المواقع وقمت بتطويره, وهذا الكود هو عباره عن قائمه على شكل شجرة وهو ما يسمى بال treeview اي انها عباره عن مجموعة اقسام رئيسية ثم اقسام فرعية من الاقام الرئيسية ثم اقسام فرعية من هذه الاقسام الفرعية.........الخ

فاذا كان هذا مثال لشجرة

فان كود الجافا سكربت المقابل لها هو

<script type="text/javascript">
        <!--

        d = new dTree('d');

        d.add(0,-1,'My example tree');
        d.add(1,0,'Node 1','example01.html');
        d.add(2,0,'Node 2','example01.html');
        d.add(3,1,'Node 1.1','example01.html');
        d.add(4,0,'Node 3','example01.html');
        d.add(5,3,'Node 1.1.1','example01.html');
        d.add(6,5,'Node 1.1.1.1','example01.html');
        d.add(7,0,'Node 4','example01.html');
        d.add(8,1,'Node 1.2','example01.html');
        d.add(9,0,'My Pictures','example01.html','Pictures I've taken over the years','','','img/imgfolder.gif');
        d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
        d.add(11,9,'Mom\'s birthday','example01.html');
        d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

        document.write(d);

        //-->
    </script>

ونلاحظ هنا ان الدالة المسئولة عن اضافة (node) هي

d.add(id,parent,title,link)

فاذا كان ال id ل node معينة هو 0 فان ال subnode من هذه ال node سيكون ال parent لديها هو 0

يمكنك عمل جدول في قاعدة البيانات بال structure التالي

يمنكنك بعد ذلك جلب محتويات هذا الجدول واعطاؤها الى الدالة المسئولة عن اضافة (node) في الجافا سكربت عن طريق

<script type="text/javascript">
        d = new dTree('d');
        d.add(0,-1,'الأقسام');
        <?php
            while ($row = mysql_fetch_array($result)) { ?>
            d.add(<?php echo $row["id"];?>,<?php echo $row["parent"];?>,'<?php echo $row["title"];?>','<?php echo $row["link"];?>.html');
        <?php }?>
        document.write(d);
</script>

يمكنك بعد ذلك اضافة اقسام (node) او حذفها اوتعديلها من خلال الداتا بيز

وهذه هي الفكرة الرئيسية لعمل السكربت

قم بتحميل السكربت كامل بالاضافة الى اضافة وحذف (nodes) بالاضافة الى الداتا بيز من على هذا الرابط

http://www.3lemny.net/site/index.php?pid=25

ارجو ان اكون وفقت في الشرح

والله ولي التوفيق.