tp新闻实战笔记四（多级菜单和datatables体验）

一、菜单

1. 主要是两个表，由于我的数据库是去掉“13_”的，所以看了一下调整auth_role和auth_rule两个表就可以

2. 扩展功能库实现，在extend下建”扩展功能库”文件夹里，再建“规则.php”实现多级分层

   <?php
   namespace 扩展功能库;
   class 规则
   {
    static public function 多级分层($一维规则,$规则号 = 0)
    {
        $多层数组 = array();
        foreach($一维规则 as $一条规则)
        {
            if($一条规则['pid']==$规则号){
                $一条规则['child'] = self::多级分层($一维规则,$一条规则['id']);
                $多层数组[] = $一条规则;
            }
        }
        return $多层数组;
    }
   }

3. 引用类库

   use 扩展功能库\规则;

4. 在admin\controller\index.php\index方法中，使用多级分层；加入到前台中数据信息中。

   $菜单信息分层 = 规则::多级分层($菜单信息);
   $前台可用信息 = ['uid'=>$用户号,
                    'uname'=>$用户名,
                    'rlist'=>$菜单信息分层];
        return view('index', $前台可用信息);

5. 删除“Widgets”菜单
6. volist来前台生成菜单,只生成两级，注意if语句，用来换icon字体图标

   {volist name = "rlist" id = "rcat" key = "k"}
              <li class="nav-item has-treeview">
                <!-- 去掉类 active 不激活 -->
                <a href="javascript:;" class="nav-link">
                  <i
                    class="nav-icon fas {if $k%4 == 0} fa-tachometer-alt {elseif $k%4 == 1} fa-th {elseif $k%4 == 2} fa-tree {else /} fa-edit {/if}"
                  ></i>
                  <p>
                    {$rcat.title}
                    <i class="right fas fa-angle-left"></i>
                  </p>
                </a>
                <ul class="nav nav-treeview">
                  {volist name = "rcat.child" id = "rcats" key="key"}
                  <li class="nav-item">
                    <!-- 去掉类 active 不激活 -->
                    <a href="/{$rcats.name}" target="conFrame" class="nav-link">
                      <i
                        class="far fa-circle nav-icon {if $key%3 == 0} text-danger {elseif $key%3==1}text-info {else/} text-warning {/if}"
                      ></i>
                      <p>{$rcats.title}</p>
                    </a>
                  </li>
                  {/volist}
                </ul>
              </li>
              {/volist}

7. 删除页主体内容部分,并写好iframe,脚本里设置iframe高度

   <!-- Main content -->
        <section class="content">
          <!-- /.container-fluid -->
          <div class="container-fluid">
            <iframe
              id="conFrame"
              name="conFrame"
              src="{:url('/index/welcome')}"
              style="overflow: visible; width: 100%"
              frameborder="no"
              scrolling="yes"
            >
            </iframe>
          </div>
        </section>
   <script type="text/javascript">
      $("#conFrame").height(window.innerHeight - 190);
   </script>

8. 在admin\controller\index.php\加welcome方法

   public function welcome()
    {
        return view('welcome');
    }

9. 在app\admin\view\index\下建welcome.html页，删除除主体内容外其他部分

   <!-- Content Wrapper. Contains page content -->
      <!-- 去掉 类 content-wrapper 有左边距 -->
      <div class="">
        <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            ...
          </div>
          <!-- /.container-fluid -->
        </section>
      </div>

10. 删除index.html和welcome.html里多余的js,只剩下5个,welcome.html里没用的脚本也删除

    <!-- jQuery -->
    <script src="{__ADMINLTE__}plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="{__ADMINLTE__}plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="{__ADMINLTE__}dist/js/adminlte.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{__ADMINLTE__}dist/js/demo.js"></script>
    <!-- layui js -->
    <!-- <script src="/static/layui/layui.js"></script> -->
    <script src="{__LAYUI__}layui.js"></script>

    二、dataTables

11. views/添加auth目录, 在views/auth/index.html中将public/static/almasaeed2010/adminlte/pages/tables/data.html全盘复制过来做修改:
    将<div class="wrapper"></div>中只保留<div class="content-wrapper"> </div>,其余全部删掉,
    我这里要删除<!-- Content Header (Page header) -->
    ../../替换{ADMINLTE}
    删除第一个数据表,<div class="card">

    <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">
                <div class="card">

    接着别的细节修改以课件中的 views/auth/index.html为准
12. 加welcome.html和auth\index.html <!-- Content Header (Page header) --> 去掉 index\index.html的
13. 改 $(“#conFrame”).height(window.innerHeight - 125);为125
14. datatables明天再写

谢谢老师和大家