tp5 layui树形表格

发布时间：2021-07-02作者：小灵龙点击：179

html代码：
<style type="text/css">
       .cataloghide{
           display: none;
       }.catalogshow{
           display: table-row;
       }
   </style>
<table>
{volist name="list" id="vo"}
    <tr>
       <td onclick="loadSon(this,'catalog{$vo.id}')">
         <span class=" layui-icon layui-icon-addition" ></span>
   </td>
      <td>{$vo.typename}</td>

      <td>
        <a href="__URL__/addSonType/parent_id/{$vo.id}/channel_type/{$vo.channel_type}" class="layui-btn layui-btn-sm">增加子栏目</a>
    </td>

    </tr>
{eq name="$vo.is_exist" value="1"}
    {volist name="$vo.id|getsub" id="vos"}

       <tr class="catalog{$vo.id} cataloghide">
          <td></td>
          <td>{$vos.typename}</td>

         <td>
              <a href="__URL__/editType/id/{$vos.id}" class="layui-btn layui-btn-sm">修改</a>

         </td>

     </tr>
    {/volist}
{else/}

{/eq}
{/volist}

</table>

{$list->render()}

<script type="text/javascript">
       function loadSon(e,biao){
           console.log(biao);
           if($("."+biao).css('display')=='none'){
               $("."+biao).addClass('catalogshow').removeClass('cataloghide');

               $(e).find('span').removeClass('layui-icon-addition').addClass('layui-icon-subtraction');
           }else{
               $("."+biao).addClass('cataloghide').removeClass('catalogshow');

               $(e).find('span').addClass('layui-icon-addition').removeClass('layui-icon-subtraction');

           }


       }

   </script>

后台php代码：

// 加载文章栏目列表页面
   public function indexType(){
       //从数据库获取顶级栏目数据
       $mm=Db::name('arctype')->where('parent_id',0)->order('id','asc')->paginate(1);
       $mm_all=$mm->all();
       foreach ($mm_all as $k=> &$value) {
           //判断当着顶级栏目有没有子栏目，
           $subcatalog=Db::name('arctype')->where('parent_id',$value['id'])->select();
           $value['is_exist']=0;//没有子栏目
           if($subcatalog){
               $value['is_exist']=1;//有子栏目
           }
           $mm[$k]=$value;
       }
       //分配变量
       $this->assign(["list"=>$mm]);
       return view();
   }

标签：

阿里云免费试用