提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

thinkphp6学习（10）跳转到的GB页面的界面设计

学习 10 页面 跳转 GB ThinkPHP6 界面设计
2023-06-13 09:13:57 时间

thinkphp6学习（10）跳转到的GB页面的界面设计

设计思路模型如下

模板界面代码如下

<!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">

    <script src="/static/layui/layui.js"></script>

</head>

<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div class="layui-header layui-bg-black">

        <div class="layui-logo">XXX查询系统</div>

      <!--   头部区域（可配合layui已有的水平导航）

      <ul class="layui-nav layui-layout-left">

          <li class="layui-nav-item"><a href="">控制台</a></li>

          <li class="layui-nav-item"><a href="">商品管理</a></li>

          <li class="layui-nav-item"><a href="">用户</a></li>

          <li class="layui-nav-item">

              <a href="javascript:;">其它系统</a>

              <dl class="layui-nav-child">

                  <dd><a href="">邮件管理</a></dd>

                  <dd><a href="">消息管理</a></dd>

                  <dd><a href="">授权管理</a></dd>

              </dl>

          </li>

      </ul> -->

        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">

                <a href="javascript:;">

                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">

                    贤心

                </a>

                <dl class="layui-nav-child">

                    <dd><a href="">基本资料</a></dd>

                    <dd><a href="">安全设置</a></dd>

                </dl>

            </li>

            <li class="layui-nav-item"><a href="">退了</a></li>

        </ul>

    </div><!-- header end-->

    <div class="layui-side layui-bg-black">

        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

            <ul class="layui-nav layui-nav-tree"  lay-filter="test">

                <li class="layui-nav-item ">

                    <a class="" href="javascript:;">在编教师</a>

                    <dl class="layui-nav-child">

                        <dd><a href="{:url('qflist')}" target="option">区发工资</a></dd>

                        <dd><a href="{:url('weblist2')}" target="option">镇发工资</a></dd>

                        <dd><a href="" target="option">四险一金</a></dd>

                        <dd><a href="" target="option">公积金</a></dd>

                    </dl>

                </li>

                <li class="layui-nav-item">

                    <a href="javascript:;">镇聘教师</a>

                    <dl class="layui-nav-child">

                        <dd><a href="javascript:;" target="option">镇聘教师工资</a></dd>

                        <dd><a href="javascript:;" target="option">社保数据</a></dd>

                        <dd><a href="javascript:;" target="option">公积金</a></dd>

                    </dl>

                </li>

                <li class="layui-nav-item">

                    <a href="UVList.html" target="option">访问量</a>

                </li>

                <li class="layui-nav-item">

                    <a href="SerachUVList.html" target="option">可搜索访问量</a>

                </li>

            </ul>

        </div>

    </div><!-- 左导航 end-->

    <div class="layui-body">

        <!-- 内容主体区域 -->

        <div style="padding: 10px; height:100%">

            <iframe id="option" name="option" src="" onload="SetWinHeight(this)" scrolling="no" frameborder="no" width="100%" height="100%"></iframe>

       </div> 

    </div>

</div>  <!-- layui-layout-admin  end-->

<script>

    //JavaScript代码区域

    layui.use(['element','jquery','layer'], function(){

        var element = layui.element

        ,$=layui.jquery

        ,layer=layui.layer;

    });

    function SetWinHeight(obj) 

        { 

            var win=obj; 

            if (document.getElementById) 

            { 

                if (win && !window.opera) 

                { 

                if (win.contentDocument && win.contentDocument.body.offsetHeight) 

                win.height = win.contentDocument.body.offsetHeight; 

                else if(win.Document && win.Document.body.scrollHeight) 

                win.height = win.Document.body.scrollHeight; 

                } 

            } 

        } 

 </script>

</body>

</html>

效果图不上了，说明：

1.用layui前端设计，分上部、左部、内容

2.内容是用来放iframe的，

遇到的坑：

1.界面在调动iframe是一开始用跳转，后来用了target=”option” 与iframe中用name=”option”就不用了

2.因为不同的iframe最初是width=100%,height=100%,但不同的内容有不同的高度，所以要对加载进来的后再进行高度的重置

这东西用不了少的时间哦

3.左菜单中点击的herf=”{}”是助手函数的方法，所以虽然不全页面没有跳转，只是加载的iframe变化，但还是要在控制器中写相应的方法，这样也可以传递不同的数据进来。

控制器代码如下

传递两个变量1是页面的标题2.是数据表中查询到的数据

控制器qflist指向的模板文件代码如下

<body>

  <div class="zheader">

<span>{$z_title}</span>

</div>

  <table class="layui-table">

          <thead>

              <th>ID</th>

              <th>姓名</th>

              <th>身份证号</th>

              <th>发放年月</th>

              <th>操作</th>

          </thead>

           <tbody>

                {volist name="data" id="d"}

                <tr>

                    <td>{$d['id']}</td>

                    <td>{$d['gbqf_name']}</td>

                    <td>{$d['gbqf_idcard']}</td>

                    <td>{$d['gbqf_yymm']}</td>

                    <td><button class="layui-btn layui-btn-xs" onclick="chk({$d['id']})">查看</button></td>

                 </tr>

                {/volist}

            </tbody>

    </table>

<script>

    layui.use('layer', function(){

        var layer = layui.layer;

    }); 

    function chk(id){

        layer.open({

            type: 2,

            title: '查看工资情况',

            shade: 0.3,

            area: ['440px', '700px'],

            content: '/index/Gbteacher/qflistfind?id='+id

        });

    }

</script>

</body>

</html>

说明：

1.layui前端设计，两部分内容（1）标题（2）table

2.table的最后一列是一个“查看”button，点击弹出一下layer。引入页面指向一个控制器方法qflistfind

控制器qflistfind方法

控制器qflistfind方法指向的模板文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="/static/layui/css/layui.css">

    <script src="/static/layui/layui.js"></script>

    <style>

.center {

text-align: center;

}

</style>

</head>

<body >

<div class="center">

　　<table class="layui-table">

{volist name="data" id="vo" key="k"}

<tr>

<td>{$COM[$k-1]}</td>

<td>{$vo}</td>

</tr>

{/volist}

</table>

</div>

</body>

</html>

整体效果图

相关文章