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(); 
 }

解释就懒得写了，如果谁有兴趣的话，代码有啥不懂的可以提出来~~不过这上面的代码挺简单的，应该没啥问题吧~~

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠