<%--
  Created by IntelliJ IDEA.
  User: hkw
  Date: 2018/10/31
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" import="com.itheima.po.Dormitory" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  <!-- 引入JSTL核心标签库 -->

<html>
<head>
    <title>后台登录</title>  <!-- 设置页面的标题 -->
    <meta name="renderer" content="webkit|ie-comp|ie-stand">  <!-- 设置浏览器渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 设置浏览器兼容模式 -->
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />  <!-- 设置视口，适应不同设备 -->
    <%--<meta http-equiv="Cache-Control" content="no-siteapp" />--%> <!-- 缓存控制，暂时注释掉 -->

    <link rel="icon" href="/images/favicon.ico" sizes="32x32" />  <!-- 网站图标 -->
    <link rel="stylesheet" href="./css/font.css">  <!-- 引入字体样式 -->
    <link rel="stylesheet" href="./css/xadmin.css">  <!-- 引入后台管理页面的CSS样式 -->
    <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>  <!-- 引入jQuery -->
    <script src="lib/layui/layui.js"></script>  <!-- 引入layui框架 -->
    <script type="text/javascript" src="./js/xadmin.js"></script>  <!-- 引入自定义的xadmin.js -->
    <style type="text/css">
        .layui-table{
                text-align: center;  <!-- 设置表格内容居中显示 -->
            }
        .layui-table th{
            text-align: center;  <!-- 设置表头文字居中显示 -->
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">  <!-- 显示当前位置 -->
        <a href="">首页</a>
        <a href="/findClassStudent">班级学生</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/findClassStudent" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>  <!-- 刷新按钮 -->
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="/findClassStudent" >  <!-- 搜索表单 -->
            <input class="layui-input" placeholder="请输入班级编号" name="c_classid" id="c_classid">  <!-- 输入班级编号 -->
            <input class="layui-input" placeholder="请输入班级名" name="c_classname" id="c_classname">  <!-- 输入班级名 -->

            <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>  <!-- 搜索按钮 -->
        </form>
    </div>

    <%--表格数据--%>
    <table class="layui-table" id="tb">  <!-- 定义表格 -->
        <thead>
        <tr>
            <th>班级编号</th>
            <th>班级名</th>
            <th>辅导员</th>
            <th>学生学号</th>
            <th>学生姓名</th>
            <th>电话</th>
            <th>宿舍编号</th>
        </thead>
        <tbody>

        <!-- 使用JSTL标签<c:forEach>循环遍历班级数据 -->
        <c:forEach items="${cs}" var="c">
                <c:set value="${c.students}" var="cc" />  <!-- 设置班级的学生列表 -->
                <c:forEach items="${cc}" var="sc">  <!-- 循环遍历每个班级的学生数据 -->
                    <tr>
                    <td>${c.c_classid}</td>  <!-- 显示班级编号 -->
                    <td>${c.c_classname}</td>  <!-- 显示班级名 -->
                    <td>${c.c_counsellor}</td>  <!-- 显示辅导员姓名 -->
                    <td>${sc.s_studentid}</td>  <!-- 显示学生学号 -->
                    <td>${sc.s_name}</td>  <!-- 显示学生姓名 -->
                    <td>${sc.s_phone}</td>  <!-- 显示学生电话 -->
                    <td>${sc.s_dormitoryid}</td>  <!-- 显示学生宿舍编号 -->
                    </tr>
                </c:forEach>
        </c:forEach>
        </tbody>
    </table>

</div>

<script>
    <!-- JavaScript代码被注释掉，可能是曾经计划采用Ajax提交表单来进行异步刷新 -->
    // layui.use(['jquery','form','layer','laydate'], function(){
    //     var form = layui.form,
    //         $ = layui.jquery,
    //         laydate = layui.laydate;
    //
    //     form.on('submit(search)', function(data){
    //
    //         var param = data.field;
    //         console.log(JSON.stringify(param));
    //
    //         $.ajax({
    //             url: '/findClassStudentlist',
    //             type: 'post',
    //             data:JSON.stringify(param),
    //             dataType: 'json',
    //             async: false,
    //             contentType: "application/json; charset=utf-8",
    //             success: function (dd) {
    //
    //                 var s= '';
    //                 for(var i in dd){
    //                    var c_classid = dd[i].c_classid;
    //                    var c_classname = dd[i].c_classname;
    //                    var c_counsellor = dd[i].c_counsellor;
    //                    var students = dd[i].students;
    //                 }
    //
    //                 for(var j in students){
    //                     var s_studentid = students[j].s_studentid;
    //                     var s_name = students[j].s_name;
    //                     var s_phone = students[j].s_phone;
    //                     var s_dormitoryid = students[j].s_dormitoryid;
    //                     s += '<tr><td>'+c_classid+'</td><td>'+c_classname+'</td><td>'+c_counsellor+'</td><td>'+
    //                         s_studentid+'</td><td>'+s_name+'</td><td>'+s_phone+'</td><td>'+s_dormitoryid+'</td></tr>';
    //                 }
    //
    //                 setTimeout(function () {window.location.href='/findClassStudent';},2000);
    //                 console.log(s);
    //                 $('#tbb').append(s);
    //
    //             },
    //             error: function () {
    //                 setTimeout(function () {window.location.href='/findClassStudent';},2000);
    //             }
    //         });
    //     });
    // });
</script>

</body>
</html>
