layui中的动态表格

最新推荐文章于 2024-06-18 10:36:47 发布

c脚踏实地d

最新推荐文章于 2024-06-18 10:36:47 发布

阅读量1.7k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/cd13277946310/article/details/112394358

版权

layui动态表格提供丰富功能，如固定表头、排序、多级表头等。本文介绍了如何下载layui插件，如何在HTML中引入并制作动态表格，同时强调了使用过程中需要注意的数据解析和请求参数设置问题。

摘要由CSDN通过智能技术生成

layui中的动态表格

介绍

layui提供了丰富的动态表格的操作,它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能. 但是也存在这一些细节性的问题, 那么下面我就带大家来使用下它的动态表格吧.

使用

下载layui插件

大家可以自己在layui 的官网上面下载layui 的插件,网址: https://www.layui.com

如何在自己的html引入layui的插件

跟一些前端框架比较类似, 不过layui是划分模块的, 所以它的引入方式也分为两种, 这里,就只介绍一种, 如果感兴趣,可以在官方api上面查看更详细的资料;

<!--
这个最好写在html的head里面, 如果用了内联的css,最好是写在内联css的前面
-->
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!--
	这个最好写在body的最下面, 自己的js的上面
-->
<script src="layui/layui.js"></script>

制作自己的动态表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        th {
    
            text-align: center !important;
            font-weight: 600 !important;
        }

        td {
    
            text-align: center !important;
        }

        .layui-table-page {
    
            text-align: center;
        }

        .layui-form .layui-form-item {
    
            margin-top: 10px;
        }

        .layui-form .layui-form-item input {
    
            width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*
                .layui-box.layui-laypage.layui-laypage-default{
                    margin : 0 50%;
                }*/
    </style>
</head>
<body>
<x></x>
<form class="layui-form update-form" action="#" lay-filter="myForm" style="display: none">
    <!--username-->
    <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="title" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-block">
            <input

最低0.47元/天解锁文章

c脚踏实地d

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
layui中的动态表格

layui中的动态表格介绍layui提供了丰富的动态表格的操作,它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能. 但是也存在这一些细节性的问题, 那么下面我就带大家来使用下它的动态表格吧.使用下载layui插件大家可以自己在layui 的官网上面下载layui 的插件,网
复制链接

扫一扫