cakephp+AJAX打造多級動態樹形菜單~~

說是用cakephp，其實也沒用到cakephp的ajax helper，只是喜歡cakephp的MVC和ORM功能~

敏捷開發日益被人關注~比起JAVA的struts、hibernate無比復雜的配置文件，cakephp的mvc和orm功能僅需要滿足它的一些約定就行了~就像RoR的“約定大于配置”一樣~

都說ajax是過渡時期的產品，我覺得很奇怪，ajax不就只是一個XMLHttpRequest么？難道JAVASCRIPT對DOM的操作也屬于AJAX？如果是這樣的話AJAX怎么會只是過渡時期的產品？

不說廢話了，來看看我們的AJAX+CAKEPHP多級動態樹形菜單吧~~

先建立數據庫表,mysql下

DROP TABLE IF EXISTS `categorys`;
CREATE TABLE IF NOT EXISTS `categorys` (
  `id` int(10) unsigned NOT NULL auto_increment,//主鍵
  `parentid` int(10) unsigned NOT NULL,//樹形菜單，父結點ID號
  `path` varchar(200) NOT NULL,//訪問路徑
  `ordernum` int(11) NOT NULL,//排序號，可能用得上
  `subscount` int(10) unsigned NOT NULL,//子結點個數
  `name` varchar(15) NOT NULL,//結點名字
  `contentable` tinyint(1) NOT NULL,//該結點下是否有非結點內容標記
  `workable` tinyint(1) NOT NULL,//該結點是否工作標記
  PRIMARY KEY  (`id`),
  UNIQUE KEY `path` (`path`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM  DEFAULT CHARSET=gbk AUTO_INCREMENT=53 ;

將樹形菜單存放數據按上面字段注釋的要求填入~

下面這個是前臺代碼：

<script src="../js/prototype.js"></script>
<script type="text/javascript">
var childNodeId;
var childValue;
function gettype(nodeId,nodeValue){
 childNodeId = nodeId;
 childValue = nodeValue;
 var temp;
 temp=$("node"+nodeValue+""+nodeId).innerHTML;
   if (temp==""){
     $("node"+nodeValue+""+nodeId).innerHTML="<span align=/"center/"><img src='../img/common/tree/load.gif' />    數據讀取中...</span><br>";
     getChildTree();        
   }
   else {
    showHide();
   }
}

function getChildTree(){
 var url = "/admin/listcates/"+childNodeId+"?timestamp="+new Date().getTime();
 
 var myAjax = new Ajax.Request(
  url,{
   method:"GET",
   onComplete: showResponse
   }
 );
}

function showResponse(xmlHttp){
 var tmp = "node"+childValue+""+childNodeId; 
 var tmpimg = "img"+childValue+""+childNodeId;
 $(tmp).innerHTML = xmlHttp.responseText; 
 $(tmpimg).src = "../img/common/tree/open.gif";
}

function showHide(){
 var tmp = "node"+childValue+""+childNodeId; 
 var tmpimg = "img"+childValue+""+childNodeId;
 if($(tmp).style.display=="block" || $(tmp).style.display==""){
  $(tmp).style.display = "none";
  $(tmpimg).src="../img/common/tree/close.gif";
 }
 else{
  $(tmp).style.display ="block";
  $(tmpimg).src="../img/common/tree/open.gif";
 }
}

function addsubject(parentid){
 var tmpvalue=prompt('請輸入新的分類名','');
  if(tmpvalue){
   var url = "/admin/newsubject/"+tmpvalue;
   var pars = "parentid="+parentid+"&timestamp="+new Date().getTime();
   var ajax = new Ajax.Request(
    url,{
     method: 'get',
     parameters: pars,
     onComplete:viewadd
    }
   );
  }
}
function viewadd(xmlHttp){
 alert(xmlHttp.responseText);
}

function delsubject(parentid){
 var tmpvalue=confirm('確定刪除這個分類嗎？');
 if(tmpvalue){
  alert(parentid);
 }
}
</script>

<table>
 <div id="treebody">
  <span id="node00"></span>
  <script language="javascript">gettype(0,0)</script>
 </div>
</table>

后臺主要代碼如下：

function listcates($parentid){
  $condition = array('parentid'=>$parentid);
  $db_cates = $this->Cate->findAll($condition);
  //pr($db_cates);
  header('Content-Type:text/html;charset=GB2312');
  //$parentid+=1;
  if($db_cates != null){
   echo "<ul style='list-style-type:none;'>";
   foreach($db_cates as $key=>$db_cate){    
    if($db_cate['Cate']['subscount']!=0){
     $tmpimg = "/img/common/tree/close.gif";
     echo "
     <li onclick='gettype({$db_cate['Cate']['id']},{$parentid})'>
      <img id='img{$parentid}{$db_cate['Cate']['id']}' src='{$tmpimg}' />&nbsp;{$db_cate['Cate']['name']}
      
     </li>
     <div id='node{$parentid}{$db_cate['Cate']['id']}'></div>
     ";
    }
    else{
     $tmpimg = "/img/common/tree/file.gif";
     echo "
     <li>
      <img id='img{$parentid}{$db_cate['Cate']['id']}' src='{$tmpimg}' />&nbsp;{$db_cate['Cate']['name']}
      &nbsp;<img src='/img/common/tree/new.gif' onclick='addsubject({$db_cate['Cate']['id']})'/>
      &nbsp;<img src='/img/common/tree/del.gif' onclick='delsubject({$db_cate['Cate']['id']})'/>
     </li>  
      
     ";
    }
   }
   if($parentid!=0) echo "<li onclick='addsubject({$parentid})'><img src='/img/common/tree/add.gif'/>&nbsp;<small>增加分類</small></li>";
   echo "</ul>";
  }
  exit(); 
 }

解釋就懶得寫了，如果誰有興趣的話，代碼有啥不懂的可以提出來~~不過這上面的代碼挺簡單的，應該沒啥問題吧~~

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈