layui数据表格实现的源代码

最新推荐文章于 2024-07-24 18:20:33 发布

置顶

「已注销」

最新推荐文章于 2024-07-24 18:20:33 发布

阅读量1.6k

点赞数 1

分类专栏： layui 文章标签： layui

本文链接：https://blog.csdn.net/m0_52560366/article/details/110203917

版权

这几天一直在使用layUI进行开发，下面我的一个界面，源代码分享给大家，希望大家少走弯路。先上图片，下面的所有功能都实现了。前端源代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,

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

这几天一直在使用layUI进行开发，下面我的一个界面，源代码分享给大家，希望大家少走弯路。

先上图片，下面的所有功能都实现了。
在这里插入图片描述
转载请添加原文链接：https://blog.csdn.net/m0_52560366/article/details/110203917 谢谢

前端源代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>学生信息（木心小白菜）</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
</head>
<body>
<!--搜索框和table表结构-->
<blockquote class="layui-elem-quote news_search">
    <div class="layui-row">
        <form class="layui-form" id="complain_search">
            姓名:<div class="layui-input-inline">
                <input type="text" name="name11" id="name11" placeholder="姓名" class="layui-input">
            </div>
            性别:<div class="layui-input-inline">
                <select name="sex11" id="sex11">
                    <option value="10">所有</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>自我评价:
            <div class="layui-input-inline">
                <input type="text" name="pingjia11" id="pingjia11" placeholder="自我评价" class="layui-input">
            </div>
            <button id="search" class="layui-btn" lay-submit lay-filter="provinceSearch">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>
    <!--table列表，查看、编辑、删除-->
    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</blockquote>

<!--添加和修改显示的弹框（添加和修改我使用的是一个弹框）-->
<form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id" placeholder="请输入ID" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学号</label>
        <div class="layui-input-inline">
            <input type="text" name="userno" id="userno" lay-verify="required" placeholder="请输入学号" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
layui数据表格实现的源代码

这几天一直在使用layUI进行开发，下面我的一个界面，源代码分享给大家，希望大家少走弯路。先上图片，下面的所有功能都实现了。前端源代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录