A-AA+then

Menu List 2ชั้น ชั้นที่ 2คิวรี่ ข้อมูลออกมาไม่ครบครับ!!

2,006

    นี่ Code แบบ Static นะครับ

     

    <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <!--Make sure your page contains a valid doctype at the very top-->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">
     function drilldownmenu(setting){
      this.sublevelarrow={src:'image/blank.png', width:'8px', top:'3px', left:'40px'}//full URL to image used to indicate there's a sub level
      this.breadcrumbarrow='../image/blank.png'//full URL to image separating breadcrumb links (if it's defined)
      this.loadingimage='loader.gif'//full URL to 'loading' image, if menu is loaded via Ajax
      this.homecrumbtext='Home Dir'//Top level crumb text
      this.titlelength=35//length of parent LI text to extract from to use as crumb titles
      this.backarrow='image/undo.png'//full URL to image added in front of back LI

      ////////// No need to edit beyond here /////////////
      this.menuid=setting.menuid
      this.$menudiv=null
      this.mainul=null
      this.$uls=null
      this.navdivs={}
      this.menuheight=setting.menuheight || 'auto'
      this.selectedul=setting.selectedul || null
      this.speed=setting.speed || 70
      this.persist=setting.persist || {enable: false, overrideselectedurl: false}
      this.$arrowimgs=null
      this.currentul=0
      this.filesetting=setting.filesetting || {url: null, targetElement: null}
      this.zIndexvalue=100
      this.arrowposx=0//default arrow x position relative to parent LI
      var thisdrill=this
      jQuery.noConflict()
      jQuery(document).ready(function($){
       if (thisdrill.filesetting.url && thisdrill.filesetting.url.length>0){//menu defined inside external file (use Ajax)?
        var $dest=(typeof thisdrill.filesetting.targetElement=="string")? $('#'+thisdrill.filesetting.targetElement) : null
        if (!$dest || $dest.length!=1){//if target element isn't defined or multiple targets found
         alert("Error: The target element \"" + thisdrill.filesetting.targetElement + "\" to add the menu into doesn't exist or is incorrectly specified.")
         return
        }
        $dest.html('<img src="'+thisdrill.loadingimage+'" style="vertical-align:middle" /> <b>Loading Drill Down Menu...</b>')
        $.ajax({
         url: thisdrill.filesetting.url,
         error:function(ajaxrequest){
          alert('Error fetching Ajax content.\nServer Response: '+ajaxrequest.responseText)
         },//end error
         success:function(content){
          $dest.html(content)
          thisdrill.init($, setting)
         }//end success
        })//end ajax
       }
       else{//if inline menu
        thisdrill.init($, setting)
       }
      })//end document.ready
     }

     drilldownmenu.prototype.init=function($, setting){
       var thisdrill=this
       var $maindiv=$('#'+setting.menuid).css({position:'relative'})//relative position main DIV
       var $uls=$maindiv.find('ul')
       $uls.css({position:'absolute', left:0, top:0, visibility:'hidden'})//absolutely position ULs
       this.$maindiv=$maindiv
       this.$uls=$uls
       this.navdivs.$crumb=$('#'+setting.breadcrumbid)
       this.navdivs.$backbuttons=$('a[rel^="drillback-'+setting.menuid+'"]').css({outline:'none'}).click(function(e){
        thisdrill.back()
        e.preventDefault()
       })
       this.buildmenu($)
       $(window).bind('unload', function(){
        thisdrill.uninit()
       })
       setting=null 
     }

     drilldownmenu.prototype.buildmenu=function($){
      var thisdrill=this
      this.$uls.each(function(i){//loop through each UL
       var $thisul=$(this)
       if (i==0){//if topmost UL
        $('<li class="backcontroltitle"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brands -•</li>').prependTo($thisul).click(function(e){e.preventDefault()})
        thisdrill.$maindiv.css({height:(thisdrill.menuheight=='auto')? $thisul.outerHeight() : parseInt(thisdrill.menuheight), overflow:'hidden'})//set main menu DIV's height to top level UL's height
         .data('h', parseInt(thisdrill.$maindiv.css('height')))
        
       }
       else{//if this isn't the topmost UL
        var $parentul=$thisul.parents('ul:eq(0)')
        var $parentli=$thisul.parents('li:eq(0)')
        $('<li class="backcontrol"><img src="'+thisdrill.backarrow+'" style="border-width:0" /> Choose Brand</li>')//add back LI item
         .click(function(e){thisdrill.back(); e.preventDefault()})
         .prependTo($thisul)
        var $anchorlink=$parentli.children('a:eq(0)').css({outline:'none'}).data('control', {order:i})//remove outline from anchor links
        var $arrowimg=$('<img class="arrowclass" />').attr('src', thisdrill.sublevelarrow.src).css({position:'absolute', borderWidth:0, paddingTop:thisdrill.sublevelarrow.top, left:$parentli.width()-parseInt(thisdrill.sublevelarrow.width)-parseInt(thisdrill.sublevelarrow.left)}).prependTo($anchorlink)
        $anchorlink.click(function(e){//assign click behavior to anchor link
         thisdrill.slidemenu(jQuery(this).data('control').order)
         e.preventDefault()
        })
       }
       var ulheight=($thisul.outerHeight() < thisdrill.$maindiv.data('h'))? thisdrill.$maindiv.data('h') : 'auto'
       $thisul.css({visibility:'visible', width:'100%', height:ulheight, left:(i==0)? 'auto' : $parentli.outerWidth(), top:0})
       $thisul.data('specs', {w:$thisul.outerWidth(), h:$thisul.outerHeight(), order:i, parentorder:(i==0)? -1 : $anchorlink.parents('ul:eq(0)').data('specs').order, x:(i==0)? $thisul.position().left : $parentul.data('specs').x+$parentul.data('specs').w, title:(i==0)? thisdrill.homecrumbtext : $parentli.find('a:eq(0)').text().substring(0, thisdrill.titlelength)})
      })//end UL loop
      var selectedulcheck=this.selectedul && document.getElementById(this.selectedul)//check if "selectedul" defined, plus if actual element exists
      this.$arrowimgs=this.$maindiv.find('img.arrowclass')
      this.arrowposx=parseInt(this.$arrowimgs.eq(0).css('left'))//get default x position of arrow
      if (window.opera)
       this.$uls.eq(0).css({zIndex: this.zIndexvalue})//Opera seems to require this in order for top level arrows to show
      if (this.persist.enable && (this.persist.overrideselectedul || !this.persist.overrideselectedul && !selectedulcheck) && drilldownmenu.routines.getCookie(this.menuid)){//go to last persisted UL?
       var ulorder=parseInt(drilldownmenu.routines.getCookie(this.menuid))
       this.slidemenu(ulorder, true)
      }
      else if (selectedulcheck){//if "selectedul" setting defined, slide to that UL by default
       var ulorder=$('#'+this.selectedul).data('specs').order
       this.slidemenu(ulorder, true)
      }
      else{
       this.slidemenu(0, true)
      }
      this.navdivs.$crumb.click(function(e){//assign click behavior to breadcrumb div
       if (e.target.tagName=="A"){
        var order=parseInt(e.target.getAttribute('rel'))
        if (!isNaN(order)){//check link contains a valid rel attribute int value (is anchor link)
         thisdrill.slidemenu(order)
         e.preventDefault()
        }
       }
      })
     }

     drilldownmenu.prototype.slidemenu=function(order, disableanimate){
      var order=isNaN(order)? 0 : order
      this.$uls.css({display: 'none'})
      var $targetul=this.$uls.eq(order).css({zIndex: this.zIndexvalue++})
      $targetul.parents('ul').andSelf().css({display: 'block'})
      this.currentul=order
      if ($targetul.data('specs').h > this.$maindiv.data('h')){
       this.$maindiv.css({overflowY:'hidden'}).scrollTop(0)
       this.$arrowimgs.css('left', this.arrowposx-15)//adjust arrow position if scrollbar is added
      }
      else{
       this.$maindiv.css({overflowY: 'hidden'}).scrollTop(0)
       this.$arrowimgs.css('left', this.arrowposx)
      }
      this.updatenav($, order)
      this.$uls.eq(0).animate({left:-$targetul.data('specs').x}, typeof disableanimate!="undefined"? 0 : this.speed)
     }

     drilldownmenu.prototype.back=function(){
      if (this.currentul>0){
       var order=this.$uls.eq(this.currentul).parents('ul:eq(0)').data('specs').order
       this.slidemenu(order)
      }
     }

     drilldownmenu.prototype.updatenav=function($, endorder){
      var $currentul=this.$uls.eq(endorder)
      if (this.navdivs.$crumb.length==1){//if breadcrumb div defined
       var $crumb=this.navdivs.$crumb.empty()
       if (endorder>0){//if this isn't the topmost UL (no point in showing crumbs if it is)
        var crumbhtml=''
        while ($currentul && $currentul.data('specs').order>=0){
         crumbhtml=' <img src="'+this.breadcrumbarrow+'" /> <a href="#nav" rel="'+$currentul.data('specs').order+'">'+$currentul.data('specs').title+'</a>'+crumbhtml
         $currentul=($currentul.data('specs').order>0)? this.$uls.eq($currentul.data('specs').parentorder) : null
        }
        $crumb.append(crumbhtml).find('img:eq(0)').remove().end().find('a:last').replaceWith(this.$uls.eq(endorder).data('specs').title)//remove link from very last crumb trail
       }
       else{
        $crumb.append(this.homecrumbtext)
       }
      }
      if (this.navdivs.$backbuttons.length>0){//if back buttons found
       if (!/Safari/i.test(navigator.userAgent))//exclude Safari from button state toggling due to bug when the button is an image link
        this.navdivs.$backbuttons.css((endorder>0)? {opacity:1, cursor:'pointer'} : {opacity:0.5, cursor:'default'})
      }
     }

     drilldownmenu.prototype.uninit=function(){
      if (this.persist.enable)
       drilldownmenu.routines.setCookie(this.menuid, this.currentul)
     }

     drilldownmenu.routines={

      getCookie:function(Name){
       var re=new RegExp(Name+"=[^;]*", "i");//construct RE to search for target name/value pair
       if (document.cookie.match(re))//if cookie found
        return document.cookie.match(re)[0].split("=")[1]//return its value
       return null
      },

      setCookie:function(name, value){
       docume nt.cookie = name+"="+value+"; path=/"
      }

     }
    </script>

    <script type="text/javascript">
     var mymenu=new drilldownmenu({
      menuid: 'drillmenu1',
      menuheight: 'auto',
      breadcrumbid: 'drillcrumb',
      persist: {enable: true, overrideselectedul: true}
     })
    </script>

    <style>
     .drillmenu{ /* main DIV container of menu */
     border: 1px dotted yellow;
     width: 130px; /*width of menu*/
     height: 190px; /*Height of DIV for those with JavaScript disabled*/
     overflow-y: scroll; /*Scrollable DIV for those with JavaScript disabled*/
     background: silver; /*background of menu.*/
     overflow-y: scroll; border:2 #000000 dotted;
     padding: 2px; scrollbar-arrow-color:yellow;scrollbar-face-color:#505050;scrollbar-highlight-color:#333333;
     scrollbar-3dlight-color:#333333;scrollbar-track-color:#333333;scrollbar-shadow-color:#333333;scrollbar-darkshadow-color:#333333; background-color:black;
     background:url(../image/Frame.png) repeat-y;
     }

     .drillmenu ul{ /*menu ULs*/
     font: normal 13px Verdana;
     margin: 0;
     padding: 0;
     list-style-type: none;
     width: 130px;
     margin-left:15px;
     background: #333333; /*background of menu*/
     background:url(../image/Frame.png) no-repeat;
     }

     .drillmenu li a{ /*menu links*/
     display: block;
     color: black;
     text-decoration: none;
     margin-left:50px;
     width: 140px;
     text-align:left;
     padding-bottom:0px;
     }

     * html .drillmenu li{ /*IE6 CSS hack*/
     display: inline-block;
     }

     .drillmenu li a:hover{
     background-color: #4d3c00;
     color: white;
     border-style:dashed; border-color:gold; border-width: 1px;
     }

     li.backcontroltitle{ /*style of top level menu title*/
     background: black;
     color: white;
     padding: 4px;
     margin-bottom:3px;
     }

     li.backcontrol { /*style of back button control that gets added to the top of each sub UL*/
     background: #011054;
     color: white;
     padding: 4px;
     cursor: hand;
     cursor: pointer;
     margin-bottom:3px;
     }

     #drillcrumb{ /*custom, user defined DIV that contains breadcrumb trail*/
     margin-bottom: 5px;
     font: bold 13px Verdana;
     }

     #drillcrumb a{ /*custom element*/
     color: darkred;
     }
    </style>
     
    </HEAD>
     

    <BODY>
     <div id="drillmenu1" class="drillmenu">
      <ul>
       <li><a href="#">Activities</a>
        <ul>
         <li><a href="#">Activities 1</a></li>
            <li><a href="#">Activities 2</a></li>
            <li><a href="#">Activities 3</a></li>
         </ul>      
       </li>
       <li><a href="#">Water Sports 3</a>
        <ul>
         <li><a href="#">Water Sports 3</a></li>
        </ul> 
       </li>
      </ul>

      <br style="clear: left" />
     </div>

     </BODY>

    </HTML>

     ถ้า Code ตามด้านบนนี้ จะแสดงผลได้ตามปกติครับ
    แต่ ถ้า query จาก DB โดยใช้ Code ด้านล่าง
     

    <div id="drillmenu1" class="drillmenu">
      
      <ul>
       <?
       include ("db/connect.php");

       $sql = "select * from main_type where part_main=2";
       $query = mysql_db_query($dbname, $sql);

       while($result = mysql_fetch_array($query))
         {
          $id_main = $result[id_main];
          $logo_main = $result[logo_main];
          ?>
       <li><a href="#"><img src="admin/logo/<?php echo $logo_main;?>" alt="" class="Ul"></a>
        <? 

         $sql1 = "select * from product_type where ref_id_main='$id_main'";
         $query1 = mysql_db_query($dbname, $sql1);   
         
         while($result1 = mysql_fetch_array($query1))
          {
           $id_type = $result1[id_type];
           $logo_type = $result1[logo_type];
           ?>
        <ul>
         <li><a href="product_shotoy.php?id_type=<?php echo $id_type;?>"><img src="admin/sublogo/<?php echo $logo_type;?>" alt="" class="Li"></a></li>
        </ul>
       </li>  
           <?
          }
        }?>

      </ul>
        
      
      <br style="clear: left" />
     </div>

     

    ชั้นที่ 2 ของ List จะแสดงแค่รายการที่มี id_main เดียวกัน แต่จะแสดงแค่รายการเดียว (ใน DB ผมจะมี 3รายการ) โดยจะแสดงแค่id_type ที่มากที่สุด (เช่น id_type มี 1-3) จะแสดงรายการที่ 3 เท่านั้น แต่ถ้าเอา code ส่วนที่เป็ สีฟ้า ออกก็จะแสดงรายการได้ครบตามปกติ แต่จะแสดงแบบปกติ ยาวๆลงมาเป็นรายการหลัก และ ย่อย
    
    รบกวนด้วยนะครับ ขอบคุณมากครับ

4 ความคิดเห็น

ORDER BY id_type DESC LIMIT 1

แสดงรายการที่ id_type มากสุด
1

อ.ครับ ไม่ใช่ครับ คือผมคงเขียนไม่เคลียร์ ผลที่ได้จาก code ผมมันจะแสดงแค่รายการเดียว แต่ผมอยากให้แสดงทุกรายการที่เป็น sub / แต่ถ้าผมเอา code ที่เป็น สีฟ้า ออกมันจะแสดงตามที่ผมต้องการ ที่มันผิดอยู่ มันแสดงให้ผมรายการเดียวนี่แหล่ะครับ 
รบกวน อ. อีกครั้งนะครับ ขอบคุณครับ frown
2

อ้างจากคำตอบที่ #2อ.ครับ ไม่ใช่ครับ คือผมคงเขียนไม่เคลียร์ ผลที่ได้จาก code ผมมันจะแสดงแค่รายการเดียว แต่ผมอยากให้แสดงทุกรายการที่เป็น sub / แต่ถ้าผมเอา code ที่เป็น สีฟ้า ออกมันจะแสดงตามที่ผมต้องการ ที่มันผิดอยู่ มันแสดงให้ผมรายการเดียวนี่แหล่ะครับ 
รบกวน อ. อีกครั้งนะครับ ขอบคุณครับ frown

55+++
ที่อยากจะบอกจริงๆ คือผมไม่ได้ดูโค้ดหรอก มันยาวมาก ทำให้ดูไม่ค่อยรู้เรื่อง.....และข้อมูลที่ให้มาไม่ได้สรุปมาก่อน ดังนั้นคงยากที่จะได้คำตอบไม่ว่าจะไปถามที่ไหน

ผมเดานะ
ตัวลิสต์ สามารถแสดงได้ ดังนั้นที่ผิดก็คงเป็น query ว่าแต่ เงื่อนไข ของ query คืออะไรไม่ได้บอก ถ้าแค่ต้องการรายการที่ไม่ซ้ำกันก็ลอง
DISTINCT field_name ดู จะได้รายการทั้งหมดที่ field_name ไม่ซ้ำกัน หรือไม่ก็ใช้ GROUP BY field_name แทน

ก็เดาๆเอาจากคำอธิบายที่พออ่านรู้เรื่องสั้นๆ ถ้าคำตอบยังไม่ใช่ ลองสรุปให้สั้นๆ และถามใหม่อีกที น่าจะมีผู้ช่วยให้ความคิดเห็นได้ง่ายขึ้น :28:
3

    ผมก็งง ว่าทำไมมันไม่ได้แบบที่ผมต้องการ :44: ผมเปลี่ยนไปใช้อีกแบบแล้วครับ ขอบคุณมากครับ

4
^