TP5.1 layui 分类二级列表(同页显示)

最新推荐文章于 2022-07-14 21:42:46 发布

我是高手高手高高手

最新推荐文章于 2022-07-14 21:42:46 发布

阅读量6.5k

点赞数 1

分类专栏： thinkphp5 layui插件

本文链接：https://blog.csdn.net/haibo0668/article/details/80856510

版权

thinkphp5 同时被 2 个专栏收录

264 篇文章 5 订阅

订阅专栏

layui插件

86 篇文章 6 订阅

订阅专栏

控制器代码

	/**
	 * 类别列表
	 */
    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"}10{else /}{$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>