삽질 끝에 트리를 만들었다.

낯설은 자바스크립트를 다루다 보니 삽질이 끝이 없다.

꽤 기분이 좋다.

스윙 프레임을 처음 띄어본 기분이랄까...ㅋ

input 태그 엘리먼트들을 가져온 뒤 checkbox 인지 검사하고, 체크되었는지 검사하였다.

체크되어있다면 display : none 을 해제하고,

체크되어있지 않다면 display 를 none 으로 하여서 트리메뉴를 완성했다.

별거 아닌거 같지만 완전 뿌듯.ㅋㅋ

- index.js -

function collapse()
{
    var input = document.getElementsByTagName("input");
    for(var i = 0 ; i < input.length ; i++)
    {
      if(input[i].type == "checkbox" && input[i].checked)
      {
        if(document.getElementById(input[i].value).style.display == "none")
        {
          document.getElementById(input[i].value).style.display = "";
        }
      }
      else if(input[i].type == "checkbox" && !input[i].checked)
      {
        if(document.getElementById(input[i].value).style.display == "")
        {
          document.getElementById(input[i].value).style.display = "none";
        }
      }
    }
 }

- treemenu.php -

<script type="text/javascript" src="../scripts/step4/index.js"></script>
<?
 // DB 연결
 include "../include/dbcon.php";
 // 사업번호 불러오기
 $pidx = $_SESSION["pidx"];
 
 $sql = "select [층번호] from arch_floor where 사업번호=6 order by [층번호] desc;";
 
 $rs = $db_conn->query( $sql );

  while($rs->moveNext())
  { 
?>
      <div style="font-size : 12px; border : solid 1px; padding-left : 10px;">
        <input type="checkbox" value="floor<? echo $rs->get(0); ?>" id="check<? echo $rs->get(0)?>" onclick="javascript:collapse()" />
        <? if($rs->get(0) > 0) echo "지상 ".$rs->get(0); else echo "지하 ".(-1) * $rs->get(0)?> 층
         <div id="floor<? echo $rs->get(0);?>" style="padding-left : 20px; display : none;">
        <? $sql = "select r.[사업번호], f.[층번호], [실이름] from arch_rooms as r , arch_floor as f where r.사업번호=6 and r.사업번호=f.사업번호 and r.층ID=f.층ID and f.층번호=".$rs->get(0)." order by f.[층번호] desc;";
           $roomrs = $db_conn->query( $sql );
           while($roomrs->moveNext())
           {
             ?>
            
          <table width="100%">
             <tr><input type="radio" name="room" value=<? echo $roomrs->get(2); ?> /><? echo $roomrs->get(2); ?></tr>
          </table>
          <?
          }
          ?>
         
        </div>    
      </div>
<?
  }
?>

라디오버튼을 이용한 것.

function collapse()
{

    var input = document.getElementsByTagName("input");
    for(var i = 0 ; i < input.length ; i++)
    {
      if(input[i].type == "radio" && input[i].checked && input[i].name == "floornum")
      {
        if(document.getElementById("floor" + input[i].value).style.display == "none")
        {
          document.getElementById("floor" + input[i].value).style.display = "";
        }

      parent.form1.curfloor.value = input[i].value;
      parent.buildtable.location.href = 'object_iframe.htm?floor=' + input[i].value;

      }
     
      else if(input[i].type == "radio" && !input[i].checked && input[i].name == "floornum")
      {
        if(document.getElementById("floor" + input[i].value).style.display == "")
        {
          document.getElementById("floor" + input[i].value).style.display = "none";
        }
      }
     
    }
}

 

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요