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 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
小程序接口的promise化的实现方法
Dec 11 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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 反向排序和随机排序代码
2010/06/30 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python构建网页爬虫原理分析
2017/12/19 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
中专毕业生自荐信
2013/11/16 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
学生周末长期请假条
2014/02/15 职场文书
中秋客户感谢信
2015/01/22 职场文书
教师自荐信范文
2015/03/06 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python