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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
javascript获取元素的计算样式
May 24 Javascript
layer扩展打开/关闭动画的方法
Sep 23 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可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python实现远程控制电脑
2019/05/23 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python代码编写计算器小程序
2020/03/30 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Django中FilePathField字段的用法
2020/05/21 Python
python解释器安装教程的方法步骤
2020/07/02 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
新农村建设典型材料
2014/05/31 职场文书
离职报告范文
2014/11/04 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年老干部工作总结
2015/04/23 职场文书
单位提档介绍信
2015/10/22 职场文书