layui 静态html table 表头会固定在顶部

浪淘沙1年前前端68
@page
@model xxtsoft.Web.Entry.Pages.sysadmins.mb.mbModel
@{
    Layout = "_LayoutAdmin";
    ViewData["Title"] = "日目标管理";
}
<div class="layui-fluid">
    <blockquote class="layui-elem-quote">
        如当天不需要上报计划目标,空着即可。

    </blockquote>
</div>
<form class="layui-form layui-form-pane" method="post">
    <div class="layui-fluid paneltop20">



        <div class="layui-form-item">


            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-greenbg">月份</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="rq" id="rq" value="@Model.yf" autocomplete="off" lay-affix="clear" class="layui-input" placeholder="yyyy-MM">
                </div>
            </div>



            <div class="layui-inline">
                <input type="hidden" name="fst" id="fst" value="@Request.Query["fst"]" class="layui-input">
                <button class="layui-btn layuiadmin-btn-list btn-block" type="submit" asp-page-handler="sear">
                    搜索
                </button>
                <button type="button" class="layui-btn layui-btn-primary btn-block1" onclick="javascript:location.href='mb?fst=@Request.Query["fst"]';return false;">
                    重置
                </button>
            </div>
        </div>


    </div>
    <div class="layui-fluid paneltop35">
        <div class="layui-panel layui-padding-3">
            <style>
                /* 表格容器固定高度,启用滚动 */
                .table-container {
                    max-height: 550px; /* 设置容器最大高度 */
                    overflow-y: auto; /* 垂直滚动 */
                }

                /* 表头固定样式 */
                table {
                    border-collapse: collapse;
                    width: 100%;
                }

                thead tr {
                    position: sticky;
                    top: 0;
                    background: #f2f2f2; /* 表头背景色 */
                    z-index: 10; /* 确保表头在内容上方 */
                }

                th, td {
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    text-align: left;
                }
            </style>

            <div class="table-container">

                <table id="xxt-tbl" lay-filter="xxt-tbl" class="layui-table" lay-even>
                    <tr class="layui-bg-green">
                        <td>日期</td>
                        <td>有效拜访次数</td>
                        <td>未合作学校有效拜访次数</td>
                        <td>请客吃饭次数</td>
                        <td>教育主管部门拜访次数</td>
                        <td>领导交谈次数</td>
                        <td>班主任演示次数</td>
                        <td>项目复盘表完成个数</td>
                    </tr>
                    @Html.Raw(Model.sb.ToString())

                </table>
            </div>
            <br />
            <button type="submit" class="layui-btn layui-btn-lg" asp-page-handler="mb">提交</button>

        </div>
    </div>

</form>


<script>
    layui.config({
        base: '/layui/' // 静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(function () {

        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#rq',
            type: 'month'
        });


    });

</script>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

using OfficeOpenXml.FormulaParsing.Excel.Functions.DateTime;

using System.Security.Claims;
using System.Text;

using xxtsoft.Common;
namespace xxtsoft.Web.Entry.Pages.sysadmins.mb
{  //登录判断
    [Authorize]
    public class mbModel : PageModel
    {

        public string loginxm = "";//登录用户名
        public string loginRole = "";//登录角色
        public string loginSid = "";//登录id
        public StringBuilder sb = new StringBuilder();
        public string yf;
        private readonly SqlSugar.ISqlSugarClient _db;
        public mbModel(SqlSugar.ISqlSugarClient db)
        {
            this._db = db;
            //_db.ChangeDatabase("1");
        }

        public void OnGet()
        {
            #region 登录信息
            loginxm = User.Identity.Name;
            loginRole = User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Role)?.Value;
            loginSid = User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Sid)?.Value;
            #endregion

            yf = Request.Query["rq"];
            if (string.IsNullOrEmpty(yf))
            {
                yf = DateTime.Now.ToString("yyyy-MM");
            }
            DateTime _yf = DateTime.Parse(yf);

            int daysInMonth = DateTime.DaysInMonth(_yf.Year, _yf.Month);
            for (int i = 1; i <= daysInMonth; i++)
            {
                sb.AppendLine("<tr>");
                sb.AppendLine("    <td>"+ _yf.Month+"-"+i.ToString() + "</td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("    <td><input type=\"text\" name=\"\" placeholder=\"请输入\" class=\"layui-input\" lay-affix=\"number\"></td>");
                sb.AppendLine("</tr>");
            }
            //MessageHelper.Show(yf);
        }
        public IActionResult OnPostSear()
        {
            string yf = Request.Form["rq"];

            if (string.IsNullOrEmpty(yf))
            {
                MessageHelper.ShowLocation("请输入月份");
            }
            Response.Redirect("mb?rq=" + yf + "&fst=" + Request.Query["fst"]);
            return Page();
        }
        public IActionResult OnPostMb()
        {

            MessageHelper.ShowLocation("2222");
            return Page();
        }
    }
}


相关文章

Element Plus 步骤条el-steps 设置simple时,箭头换成横线

@page @model xxtsoft.Web.Entry.Pages.hr.regModel @{     Layout =&nb...

layui 下拉搜索,多选,form提交

https://codecp.tech/static/xm-select/?lalalalalala=1#/basic/use<div style="margin:100px...

layui给form 字段绑定返回值

 $.ajax({      url: "/api/feedback/readByID/" +&n...

Layui卡片式 新完整页面

<div class="layui-fluid">     <blockquote class=&q...

layui 静态表格弹出传值、弹出页面

layui 静态表格弹出传值、弹出页面

<script>     layui.config({     base: '/lay...

layui select 下拉多选 xm-select

<div class="layui-fluid">     <div id="demo1&...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。