编程语言
首页 > 编程语言> > cakephp + AJAX打造多级动态树形菜单~~

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`类；
如果类别不存在则创建表（
  id 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; 
函数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（）;        
   } 
   其他{ 
    showHide（）; 
   } 
}

函数getChildTree（）{ 
 var url =“ / admin / listcates /” + childNodeId +“？timestamp =” + new Date（）。getTime（）; 
 
 var myAjax = new Ajax.Request（
  url，{ 
   方法：“ GET”，
   onComplete：showResponse 
   } 
 ）; 
}

函数showResponse（xmlHttp）{ 
 var tmp =“ node” + childValue +“” + childNodeId; 
 var tmpimg =“ img” + childValue +“” + childNodeId; 
 $（tmp）.innerHTML = xmlHttp.responseText; 
 $（tmpimg）.src =“ ../img/common/tree/open.gif”; 
}

函数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，{ 
     方法：'get'，
     参数：pars，
     onComplete：viewadd 
    } 
   ）; 
  } 
} 
函数viewadd（xmlHttp）{ 
 alert（xmlHttp.responseText）; 
}

函数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>

后台主要代码如下：

函数listcates（$ parentid）{ 
  $ condition = array（'parentid'=> $ parentid）; 
  $ db_cates = $ this-> Cate-> findAll（$ condition）; 
  // pr（$ db_cates）; 
  标头（'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}'/>
      

    }    }    if（$ parentid！= 0）echo“ <li onclick ='addsubject（{$ parentid}）'> <img src ='/ img / common / tree / add.gif'/>＆nbsp; <small>增加分类</ small> </ li>”；   回显“ </ ul>”；  }

  出口（）; 
 }

http://www.abc100.com/kindeditor/attached/file/20200522/20200522065527_9228.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065644_2031.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065758_1952.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065608_5761.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522070024_5126.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065721_6757.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065833_7050.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522065520_7910.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522070018_4199.html
http://www.abc100.com/kindeditor/attached/file/20200522/20200522070011_2001.html
http://www.cere.cc/editor/attached/file/20200522/20200522065718_2698.html
http://www.cere.cc/editor/attached/file/20200522/20200522065524_4573.html
http://www.cere.cc/editor/attached/file/20200522/20200522065830_3323.html
http://www.cere.cc/editor/attached/file/20200522/20200522065516_8792.html
http://www.cere.cc/editor/attached/file/20200522/20200522065641_6917.html
http://www.cere.cc/editor/attached/file/20200522/20200522070015_8948.html
http://www.cere.cc/editor/attached/file/20200522/20200522065754_8011.html
http://www.cere.cc/editor/attached/file/20200522/20200522070008_6605.html
http://www.cere.cc/editor/attached/file/20200522/20200522065605_1917.html
http://www.cere.cc/editor/attached/file/20200522/20200522070022_0042.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522070011541154.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065576737673.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065663926392.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522070037553755.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065769466946.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065761986198.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522070045404540.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065685148514.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522070014661466.html
http://www.chenxi120.com/uploadfile/file/20200522/20200522065560976097.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065629_5633.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522070041_5661.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522070006_0931.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522070020_0331.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522070013_7360.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065819_1163.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065522_1955.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065743_6042.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065706_0666.html
http://www.chinagreenland.com/kindeditor/attached/file/20200522/20200522065551_9300.html

标签：www,http,attached,html,AJAX,树形,file,cakephp,20200522
来源： https://www.cnblogs.com/99876w/p/12936721.html