thinkphp实现无限分类(使用递归)


Posted in Javascript onDecember 19, 2015

本文实例为大家分享了thinkphp实现无限分类的详细代码,希望对大家学习无限分类有所启发。

数据库:test
数据表:(tp_category):

thinkphp实现无限分类(使用递归)

Common/conf/config.php

'DB_CONFIG2' => array(
 'db_type' => 'mysql',
 'db_user' => 'root',
 'db_pwd' => '',
 'db_host' => 'localhost',
 'db_port' => '3306',
 'db_name' => 'test',
 'DB_PREFIX' => 'tp_', // 数据库表前缀
 'DB_CHARSET'=> 'utf8', // 字符集
 'DB_DEBUG' => TRUE, // 数据库调试模式 开启后可以记录SQL日志 3.2.3新增
),

Common/function.php 遍历函数loop

/*
 * 递归遍历
 * @param $data array
 * @param $id int
 * return array
 * */
function recursion($data, $id=0) {
 $list = array();
 foreach($data as $v) {
 if($v['pid'] == $id) {
 $v['son'] = recursion($data, $v['id']);
 if(empty($v['son'])) {
 unset($v['son']);
 }
 array_push($list, $v);
 }
 }
 return $list;
}

Controller/IndexController.class.php

public function test() {
 $category = M('category', '', C('DB_CONFIG2'))->select();
 $result = loop($category);
 var_dump($result);
 $this->assign('list', $result);
 $this->display();
}

在模板(View/Index/test.html)中输出(仅支持2级分类,如果想全部显示,建议先把数组转换成JSON格式,然后通过AJAX请求,JS生成)

<ul>
 <volist name="list" id="vo">
 <li>
 {$vo.category}
 <notempty name="vo['children']">
 <ul>
  <volist name="vo['children']" id="cate">
  <li>{$cate.category}</li>
  </volist>
 </ul>
 </notempty>
 </li>
 </volist>
</ul>

后续(ajax请求,递归显示所有分类):

thinkphp实现无限分类(使用递归)

方法 Controller/IndexController.class.php 

public function test() {
 $this->display();
}

public function resultCategory() {
 $category = M('category', '', C('DB_CONFIG2'))->select();
 $result = loop($category);
 $this->ajaxReturn(array('data'=>$result,'status'=>'1','info'=>'获取列表成功'));
}

模板View/Index/test.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>分类测试</title>
 <script src="__PUBLIC__/js/jquery.min.js"></script>
</head>
<body>
<ul id="menu"></ul>

<script>
 $(function() {

 // 递归列表函数
 function recursion(selector,data)
 {
 if(!data) return false;

 for(var i=0;i<data.length;i++)
 {
 var li=$('<li>'+data[i]['category']+'</li>');

 if(data[i]['children'] && data[i]['children'].length>0)
 {
  var ul=$('<ul></ul>');
  recursion(ul,data[i]['children']);
  li.append(ul);
 }

 selector.append(li);
 }
 }

 // ajax请求 用$.post() 会更方便
 $.ajax({
 url: "{:U('resultCategory')}",
 type: 'post',
 dataType: 'json',
 error: function(res) {
 console.log(res);
 },
 success: function(res) {
 recursion($('#menu'),res['data']);

 console.log(res['data']);
 }
 });
 });
</script>

</body>
</html>

另一种无限级分类:

thinkphp实现无限分类(使用递归)

/**
 * 无限极分类
 * @param [type] $cate [description]
 * @param integer $pid [description]
 * @param integer $level [description]
 * @param string $html [description]
 * @return [type] [description]
 */
function sortOut($cate,$pid=0,$level=0,$html='--'){
 $tree = array();
 foreach($cate as $v){
 if($v['pid'] == $pid){
 $v['level'] = $level + 1;
 $v['html'] = str_repeat($html, $level);
 $tree[] = $v;
 $tree = array_merge($tree, sortOut($cate,$v['id'],$level+1,$html));
 }
 }
 return $tree;
}

JS递归(特殊):

thinkphp实现无限分类(使用递归)

这个函数相当于实现php的str_repeat函数

/* 字符串重复函数 */
if(!String.str_out_times) {
 String.prototype.str_out_times = function(l) {
 return new Array(l+1).join(this);
 }
}
// 定位到当前选择
function recursion(selector, data, j, pid) {
 var space = ' ┠ ';
 if(!data) return false;
 $.each(data, function(i, item) {
 var opt = $('<option value="'+item.id+'">'+space.str_out_times(j)+item.name+'</option>');selector.append(opt);
 if(item.son && (item.son).length>0) {
 recursion(selector, item.son, ++j);
 j=0; 
 }
 });

 // 当前是哪个分类
 selector.find('option').each(function() {
 if($(this).val() == pid) {
 $(this).attr('selected', 'selected');
 }
 });
}

为什么j=0呢。因为执行顺序感觉与php不同,这里是从上到下加载。。

ajax请求数据:

$('.btn-edit').click(function() {
 var id = $(this).data('id');
 $.post("{:U('Article/editArticle')}", {id: id}, function(res) {

 // 分类
 $('[name="pid"]').html('');
 recursion($('[name="pid"]'), res.sort, 0, res.pid);

 $('[name="id"]').val(res.id);
 $('[name="title"]').val(res.title);
 $('[name="summary"]').val(res.summary);
 $('#thumbnailImg').attr('src', "__UPLOAD__"+'/thumbnail/'+res.thumbnail);
 ue.setContent(res.content);

 $('#modal-edit').modal('show');
 });
});

以上就是thinkphp实现无限分类的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
15个常用的jquery代码片段
Dec 19 #Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 #Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 #Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python flask中动态URL规则详解
2019/11/22 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
资料员岗位职责
2013/11/17 职场文书
安全教育实施方案
2014/03/02 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2015年教研组工作总结
2015/05/04 职场文书
自我检讨书怎么写
2015/05/07 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js