thinkphp5+layui的动态表格对数据进⾏⽆限极分类
我百度了好久，没有到很⽅便对layui 动态表格进⾏⽆极限分类 的，所以，我只能⾃⼰写，可能写的不是很好，但能实现功能就⾏
对数据库的数据进⾏⽆限极分类
1. tp5 源码
```php
<?php
/**
* ⽆限极排序
* Created by PhpStorm.
* User: 86166
* Date: 2020/3/16
* Time: 11:24
*/
class InfiniteSort
{
/**
* ⽆限极分类
* @param $data  数据
* @return array|bool
*/
public static function sortTree($data)
{
return  self::executSort($data);
}
/**
对数据进⾏⽆极限分类
**/
public static function executSort($data = [], $pid = 0, $level = 0)
{
if (!$data){
return false;
}
static $arr = [];
foreach ($data as $k => $v) {
if ($v['pid'] == $pid) {
$v['level'] =$level;
$arr[]= $v;
unset($data[$k]);
self::executSort($data, $v['id'], $level+1);
}
}
return $arr;
}
}
layui
layui.use(['table','form'],function(){
var table = layui.table,
form =layui.form;
elem:'#test'
,url:"{:url('Category/index')}"
,where:{key:'get'}//如果⽆需传递额外参数，可不加该参数
,method:'get'//如果⽆需⾃定义HTTP类型，可不加该参数
,toolbar:'#toolbarDemo'//开启头部⼯具栏，并为其绑定左侧模板
,defaultToolbar:['filter','exports','print',{//⾃定义头部⼯具栏右侧图标。如⽆需⾃定义，去除该参数即可                title:'提⽰'
,layEvent:'LAYTABLE_TIPS'
,icon:'layui-icon-tips'
}]
,even:true
,title:'⽂章分类数据表'
,height:'full-150'
,cols:[[
{type:'checkbox', fixed:'left'}
{type:'checkbox', fixed:'left'}
,{field:'id', title:'ID', width:80, fixed:'left', unresize:true, sort:true}
,{field:'cate_name', title:'⽂章分类名称', width:200}
,{field:'thumb', title:'⽂章分类LOGO', width:180, templet:function(res){
return '<img width="42" height="30
" src="' + res.thumb +'">'
}}
,{field:'cate_type', title:'⽂章分类类型', width:250}
,{field:'desc', title:'⽂章分类描述', width:200,edit:'text'}
,{field:'status', title:'状态', minWidth :95, templet:'#switchStatus', unresize :true}
,{field:'sort', title:'排序', width:60, edit:'text'}
,{field:'isshowtonav', title:'是否显⽰到导航', width:150}
,{field:'create_time', title:'加⼊时间', width:150, sort:true}
,{field:'update_time', title:'最后变更时间', width:150}
,{fixed:'right', title:'操作', toolbar:'#barDemo', width:150}
]]
//动态表格添加下⾯的代码
**,done:function(res,curr,count){
var data =res.data;
$("th").css({'color':'black'});
console.log(data);
for(var i in  data){
$("tr[data-index='"+ i+"']").attr('cate-id',data[i].id);
$("tr[data-index='"+ i+"']").attr('pid',data[i].pid);
$("tr[data-index='"+ i+"']").attr('data-name',data[i].cate_name);
$("tr[data-index='"+ i+"']").attr('onclick',"showTree(this)");
$("tr[data-index='"+ i+"']").attr('status',"true");
$("tr[data-index='"+ i+"']").attr('level',data[i].level);
if(data[i].pid==0){
$("tr[data-index='"+ i+"']").find("td[data-field='cate_name']")
.children().html('<i class="layui-icon x-show"></i>'+ data[i].cate_name);**
}
}
$("tbody tr[pid!='0']").hide();
}
//  ------------------
});
// 这⾥是对数据进⾏操作的，代码有点冗余，⽐较直⽩，有空我再来进⾏封装，没有注释什么的，请见谅function showTree(e){
if($(e).attr('status')=='true'){
$(e).find(".x-show").html('')
$(e).attr('status','false');
cateId =$(e).attr('cate-id');
$arr =[];
$("tbody tr[pid="+cateId+"]").each(function(index, el){
id =$(el).attr('cate-id');
console.log("id"+id);
if($arr[0]==id){
return false;
}
$arr.push(id);
var child_cateId =$("tbody tr[pid="+id+"]").attr('cate-id');
var level =$("tbody tr[cate-id="+id+"]").attr('level');
var space =printSpace(level);
if(typeof(child_cateId)!="undefined"){
$("tbody tr[cate-id="+id+"]").find("td[data-field='cate_name']").children()
.html(space +'<i class="layui-icon x-show"></i>'+$("tbody tr[cate-id="+id+"]").attr('data-name'));
}else{
}else{
$("tbody tr[cate-id="+id+"]").find("td[data-field='cate_name']").children()
.html(space +'<i class="layui-icon x-show"> |--</i>'+$("tbody tr[cate-id="+id+"]").attr('data-name'));
$("tbody tr[cate-id="+id+"]").attr('onclick','');
}
});
$("tbody tr[pid="+cateId+"]").show();
}else{
cateIds =[];
$(e).find(".x-show").html('')
$(e).attr('status','true');
cateId =$(e).attr('cate-id');
getCateId(cateId);
for(var i in cateIds){
$("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('').attr('status','true');表格网站php源码
}
}
}
var cateIds =[];
function getCateId(cateId){
$("tbody tr[pid="+cateId+"]").each(function(index, el){
id =$(el).attr('cate-id');
if(cateIds[0]==id){
return false;
}
cateIds.push(id);
getCateId(id);
});
}
// 打印空格
function printSpace(level){
var str =" ";
if(level>0){
for(var i=0;i<level *6;i++){
str = str +" ";
}
}
return str;
}
简单总结⼀下，就是在你原有的源码上加⼊以下的代码就可以显⽰我实现的效果
done:function(…){
// TODO …
}
和 function showTree 函数下⾯的代码就可以啦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。