layui表格数据的渲染

最新推荐文章于 2023-07-06 18:42:51 发布

plsao

最新推荐文章于 2023-07-06 18:42:51 发布

阅读量252

点赞数

分类专栏：前端文章标签： html layui css

本文链接：https://blog.csdn.net/weixin_42458556/article/details/115761693

版权

本文详细介绍了如何利用layui框架进行HTML表格的数据渲染，包括数据加载、样式定制及交互功能的实现，帮助提升前端展示效果和用户体验。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字典管理</title>
    <link rel="stylesheet" href="../../statics/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../statics/style/admin.css" media="all">
</head>

<body>

<!-- 主体部分 -->
<div class="layui-card">
    <div class="layui-card-header">字典管理</div>

    <div class="layui-card-body">

        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">字典名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="dictName" name="dictName" placeholder="字典名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">字典类型</label>
                    <div class="layui-input-inline">
                        <input type="text" id="dictType" name="dictType" placeholder="字典类型" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btn_search" class="layui-btn layui-icon  layui-icon-search" data-type="search">查询
                    </button>
                </div>

            </div>

        </div>

        <table id="manage_table" lay-filter="manage_table"></table>
    </div>
</div>

<script type="text/html" id="tableToolBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-icon layui-icon-add-1" lay-event="add">新增</button>
    </div>
</script>

<!-- 表格基本操作按钮 -->
<script type="tex