TP5.1 layui 分类二级列表(同页显示)
Posted Q神
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TP5.1 layui 分类二级列表(同页显示)相关的知识，希望对你有一定的参考价值。
控制器代码
/**
* 类别列表
*/
public function category()
$sotitle=input(sotitle);
$sotype=input(sotype);
$limit=input(limit);
$limit=$limit?$limit:10;
$this->assign(sotype,$sotype);
$this->assign(sotitle,$sotitle);
$this->assign(limit,$limit);
if($sotitle)
//模糊查询
if($sotype=="title" || $sotype=="")
$where = [
[title, like, "%".$sotitle."%"],
];
else
$where[$sotype] = $sotitle;
else
$where[level] = 1;
$rs=Db::name(product_category)->where($where)->order([sort=>desc])->paginate($limit,false,[query => request()->param()]);
//$rs = Db::name(product_category)->where(level,1)->order(sort desc)->select();
$data="";
foreach($rs as $k => $v)
//2级
$res2 = Db::name(product_category)->where("pid=".$v[id])->select();
$data2="";
foreach($res2 as $k2 => $v2)
$data2[$k2][id]=$v2[id];
$data2[$k2][title]=$v2[title];
$data2[$k2][sort]=$v2[sort];
$data2[$k2][level]=$v2[level];
$data2[$k2][time]=$v2[time];
//$data2[$k2][title]=$v2[title];
$data2[$k2][child]=$v2[title];
$data[$k][id]=$v[id];
$data[$k][title]=$v[title];
$data[$k][sort]=$v[sort];
$data[$k][level]=$v[level];
$data[$k][time]=$v[time];
$data[$k][child]=$data2;
$this->assign(name,$data);
$page = $rs->render();
$this->assign(page, $page);
$this->assign(rs,$rs);
return $this->fetch(category);
模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>产品管理</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<script src="__STATIC__/layui/layui.js"></script>
<link rel="stylesheet" href="__ADMIN__/css/index.css" media="all">
</head>
<body style="background-color: #FFFFFF;">
<!-- 你的HTML代码 -->
<!-- 表格 -->
<div class="layui-fluid">
<form action=":url(category)" method="post" style="margin-top: 20px;">
<div class="layui-inline">
<input class="layui-input" name="limit" style="width: 50px;" placeholder="行数" value="empty name="limit"10else /$limit/empty" >
</div>
<div class="layui-inline layui-form">
<select name="sotype" lay-search>
<option value="">请选择搜索类型</option>
<option value="title" if $sotype == "title" selected /if>标题</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="sotitle" value="$sotitle">
</div>
<button class="layui-btn" id="sear" data-type="reload">搜索</button>
</form>
<div class="layui-btn-group demoTable" style="margin-top: 10px;">
<button id="add" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>添加</button>
<button class="layui-btn" data-type="delAll">批量删除</button>
</div>
<table lay-filter="demo" lay-data="id:idTest">
<thead>
<tr>
<th lay-data="field:id,type:checkbox"></th>
<th lay-data="field:id, width:70">ID</th>
<th lay-data="field:sort, width:70">排序</th>
<th lay-data="field:title">标题</th>
<th lay-data="field:level, width:60">层次</th>
<th lay-data="field:time, width:180">添加时间</th>
<th lay-data="fixed: right, width:120, align:center, toolbar: #barDemo">操作</th>
</tr>
</thead>
<tbody>
volist name="name" id="vo"
<tr>
<td>$vo.id</td>
<td>$vo.id</td>
<td>$vo.sort</td>
<td>$vo.title</td>
<td>$vo.level</td>
<td>$vo.time</td>
</tr>
volist name="vo.child" id="vo2"
<tr>
<td>$vo2.id</td>
<td></td>
<td></td>
<td>—— ——$vo2.title</td>
<td>$vo2.level</td>
<td>$vo2.time</td>
</tr>
/volist
/volist
</tbody>
</table>
<div >
$page|raw
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" οnclick=":url(del,array(id=>$admin[id])))">删除</a>
</script>
</div>
<!-- 表格end -->
<script>
layui.use([layer, form,element,jquery,layer,table], function()
var layer = layui.layer
,form = layui.form
,element = layui.element
,$= layui.$
,table=layui.table;
//转换静态表格
table.init(demo,
height: //设置高度
,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
);
//监听工具条
table.on(tool(demo), function(obj)
var data = obj.data;
if(obj.event === edit)
//layer.alert(编辑行：<br>+ JSON.stringify(data))
layer.ready(function()
layer.open(
type: 2,
title: 编辑,
maxmin: false,
area: [80%, 70%],
content: :url(category_edit)?id=+data.id,
cancel: function() //刷新网页
//table.reload(idTest);//重新加载表格数据
self.location=:url(index);
);
);
else if(obj.event === del)
layer.confirm(真的删除行么, function(index)
obj.del();
id= data.id;
layer.close(index);
$.ajax(
url::url(category_del),
type:"post",
data:id:id,
async:true,
success:function(data)
if(data[0]==1)
layer.msg(成功！);
// table.reload(idTest);//重新加载表格数据
table.render();//重新渲染
else
layer.msg(失败！+data[1]);
table.render();//重新渲染
,
error:function()
layer.msg(页面跳转失败！);
);
);
);
var $ = layui.$, active =
delAll: function() //批量删除
var checkStatus = table.checkStatus(idTest)
var dataall=;
data = checkStatus.data;
//循环把所有要删除的ID整成12,13,545
for(var i=0;i<checkStatus.data.length;i++)
dataall += data[i].id+",";
dataall=dataall.substring(0,dataall.length-1)
//layer.alert(dataall);
layer.confirm(真的删除行么, function(index)
//obj.del();
//id= data.id;
layer.close(index);
$.ajax(
url::url(category_del),
type:"post",
data:id:dataall,
async:true,
success:function(data)
if(data[0]==1)
layer.msg(成功！);
self.location=:url(index);
else
layer.msg(失败！+data[1]);
//table.render();//重新渲染
,
error:function()
layer.msg(页面跳转失败！);
);
);
,getCheckData: function() //获取选中数据
var checkStatus = table.checkStatus(idTest)
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
,getCheckLength: function() //获取选中数目
var checkStatus = table.checkStatus(idTest)
,data = checkStatus.data;
layer.msg(选中了：+ data.length + 个);
,isAll: function() //验证是否全选
var checkStatus = table.checkStatus(idTest);
layer.msg(checkStatus.isAll ? 全选: 未全选)
;
$(.demoTable .layui-btn).on(click, function()
var type = $(this).data(type);
active[type] ? active[type].call(this) : ;
);
//“方法级渲染”配置方式
table.render( //其它参数在此省略
skin: line //行边框风格
,even: true //开启隔行背景
,size: sm //小尺寸的表格
);
//增加
$(#add).on(click, function()
layer.ready(function()
layer.open(
type: 2,
title: 增加,
maxmin: true,
area: [80%, 70%],
content: :url(category_add),
cancel: function() //刷新网页
//重新加载表格数据
self.location=:url(category);
);
);
);
);
</script>
</body>
</html>
以上是关于TP5.1 layui 分类二级列表(同页显示)的主要内容，如果未能解决你的问题，请参考以下文章
tp5.1 layui 数据太多造成列表读取错误(内存溢出)