Layui项目实战

已于 2023-06-15 11:49:56 修改
阅读量1.1k 收藏
点赞数
分类专栏： Layui 文章标签： layui 前端 javascript
于 2023-06-12 13:55:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyanEdwardElrid/article/details/131165687
版权

使用语言：C#，Js，Html
使用框架：MVC，Layui
使用插件：JQuery，Layui

一.Layui父窗体前端代码：

在这里插入图片描述
1.Html代码：

<div class="layui-col-md12" style="padding: 8px;">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">
                <blockquote class="layui-elem-quote quoteBox">
                    <form class="layui-form">
                        <div class="layui-inline">
                            <a class="layui-btn" onclick="RefreshData()">
                                <label class="x">刷新</label>
                            </a>
                            <a class="layui-btn" onclick="UnlockconfInfo('','','','','','','')">
                                <label class="x">增加</label>
                            </a>
                        </div>
                    </form>
                </blockquote>


                <div class="layui-card">
                    <p class="layui-card-header">列表标题</p>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <table id="unlocknearby" lay-filter="unlocknearby"></table>
                    </div>
                </div>



            </div>

        </div>
    </div>
</div>

2.Js代码：

申明Layui公共变量：

<script type="text/javascript">
        var form,
            layer,
            table,
            laydate;

RefreshData方法，列表刷新：

        function RefreshData() {
            table.reload("newListTable", {
                where: {
                    'userId': 0
                }
            });
        }

Del方法，列表参数删除方法：

        //删除
        function Del(Id, OperatorId) {
            if (confirm("确定要删除当前设置吗？")) {
                $.ajax({
                    url: '/Circle/DelUnlocknearby',
                    data: { 'Id': Id, 'OperatorId': OperatorId },
                    type: 'post',
                    success: function (res) {
                        if (res.code == 0) {
                            RefreshData();
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000, shade: [0.3, '#000', true] });
                        }
                    }
                });
            }
        };

UnlockconfInfo方法，打开子窗体界面，增加或者修改：

        //增加|修改
        function UnlockconfInfo(Id, Country, Sex, Num, Fee, State, OperatorId) {
            layer.open({
                type: 2,
                title: Id == "" ? "增加设置" : "修改设置",
                shadeClose: true,
                shade: 0.5,
                skin: 'layui-layer-rim',
                closeBtn: 1,
                area: ['550px', '550px'],
                content: '/Circle/UnlockconfInfo?ID=' + Id + '&country=' + Country + '&sex=' + Sex + '&num=' + Num + '&fee=' + Fee + '&state=' + State + '&operatorId=' + OperatorId
                , end: function () {	//子窗体关闭方法
                    RefreshData();
                }

            });
        };

Layui绑定列表：

        layui.use(['form', 'layer', 'table', 'laydate'], function () {
            form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                table = layui.table,
                laydate = layui.laydate;

            //列表数据初始化加载
            var tableIns = table.render({
                elem: '#unlocknearby'
                , url: '/Circle/GetUnlockconfList', //数据接口
                page: true,
                height: "full-220",
                id: "newListTable",
                totalRow: true,
                limit: 10,
                toolbar: true,
                limits: [10, 25, 50, 100, 1000, 10000],
                cols: [[ //表头
                    {
                        type: 'numbers', title: '序号', totalRowText: '合计', width: "4%", templet: function (d) {
                            return d.numbers + 1;
                        }
                    },
                    { field: 'Country', title: '国家', align: "center" },
                    {
                        field: 'Sex', title: '性别', align: "center"
                        , templet: function (d) {
                            return d.Sex == 1 ? '男' : d.Sex == 2 ? '女' : '其他';
                        }
                    },
                    { field: 'Num', title: '解锁人数', align: "center", totalRow: true },
                    { field: 'Fee', title: '价格/h币', align: "center" },
                    {
                        field: 'State', title: '状态', align: "center"
                        , templet: function (d) {
                            if (d.State == 1) {
                                return '开启';
                            } else if (d.State == 0) {
                                return '关闭'; 
                            }
                        }
                    },
                    {
                        field: 'Time', title: '操作时间', align: "center",
                        templet: function (d) {
                            console.log(d.Time);
                            var date = new Date(parseInt(d.Time) * 1000);
                            return date.toLocaleString().replace(/:\d{1,2}$/, ' ');
                        }
                    },
                    { field: 'OperatorId', title: '操作人', align: "center" },
                    {
                        title: '操作', width: "10%", fixed: "right", align: "center"
                        , templet: function (d) {
                            var str = "";
                            str += ' <a class="layui-btn layui-btn-xs" onclick="UnlockconfInfo(' + d.Id + ",'" + d.Country + "'," + d.Sex + ',' + d.Num + ',' + d.Fee + ',' + d.State + ',' + d.OperatorId + ')">编辑</a>';
                            str += ' <a class="layui-btn layui-btn-xs layui-btn-danger" onclick="Del(' + d.Id + ',' + d.OperatorId + ')">删除</a>';
                            return str;
                        }
                    }
                ]]
            });

搜索刷新列表：

            //搜索框检索
            $('.search-btn').on("click", function () {
                RefreshData();
            });

        });
 </script>

二.C#后台代码：

注意：业务逻辑层代码不予展示，请根据自己的业务去写。

父窗体界面：

/// <summary>
    /// 解锁配置界面
    /// </summary>
    /// <returns></returns>
    public ActionResult Unlockconf()
    {
        return View();
    }

子窗体界面（增加|修改）：

    /// <summary>
    /// 增加|修改 解锁配置界面 
    /// </summary>
    /// <returns></returns>
    public ActionResult UnlockconfInfo(string ID, string country, string sex, string num, string fee, string state, string operatorId)
    {
        ViewBag.ID = ID;
        ViewBag.Country = country;
        ViewBag.Sex = sex;
        ViewBag.Num = num;
        ViewBag.Fee = fee;
        ViewBag.State = state;
        ViewBag.OperatorId = operatorId;
        return View();
    }

搜索方法，绑定列表：

    /// <summary>
    /// 解锁配置列表
    /// </summary>
    /// <param name="userId"></param>
    /// <returns></returns>
    public ActionResult GetUnlockconfList(string userId, GridPager d)
    {
        int total = 0;
        var list = new LiveProider().GetUnlockconfList(userId);

        if (list != null)
        {
            if (list.Count > 0)
            {
                total = list.Count;
                list = list.OrderByDescending(t=>t.Time).Skip((d.page - 1) * d.limit).Take(d.limit).ToList();
            }
        }

        return Json(new
        {
            code = 0,
            msg = "",
            count = total,
            data = list
        }, JsonRequestBehavior.AllowGet);
    }

增加方法：

    /// <summary>
    /// 添加附近解锁设置
    /// </summary>
    /// <param name="country"></param>
    /// <param name="sex"></param>
    /// <param name="num"></param>
    /// <param name="fee"></param>
    /// <param name="state"></param>
    /// <param name="refresh"></param>
    /// <param name="operatorId"></param>
    /// <returns></returns>
    public ActionResult AddUnlocknearby(string country, string sex, string num, string fee, string state,  string operatorId)
    {
        var res = new LiveProider().AddUnlocknearby(country, sex, num, fee, state, operatorId);
        return Json(res);
    }

修改方法：

    /// <summary>
    /// 修改附近解锁设置
    /// </summary>
    /// <param name="country"></param>
    /// <param name="sex"></param>
    /// <param name="num"></param>
    /// <param name="fee"></param>
    /// <param name="state"></param>
    /// <param name="refresh"></param>
    /// <param name="operatorId"></param>
    /// <returns></returns>
    public ActionResult EditUnlocknearby(string ID, string country, string sex, string num, string fee, string state, string operatorId)
    {
        var res = new LiveProider().EditUnlocknearby(ID, country, sex, num, fee, state,operatorId);
        return Json(res);
    }

删除方法：

    /// <summary>
    /// 删除附近解锁设置
    /// </summary>
    /// <param name="ID"></param>
    /// <param name="operatorId"></param>
    /// <returns></returns>
    public ActionResult DelUnlocknearby(string ID, string operatorId)
    {
        var res = new LiveProider().DelUnlocknearby(ID, operatorId);
        return Json(res);
    }

三.子窗体前端代码：

在这里插入图片描述
1.Html代码：

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>NearbypeopleInfo</title>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: auto;
        width: 80%;
        height: 80vh;
    }

    p {
        height: 20px;
        margin: 20px 10px;
    }
</style>
</head>
<body>
<div>
    <div class="box">
        <table>
            <tr>
                <td><p>ID：</p></td>
                <td><p><input class="layui-input ID" type="number" name="name" value="@ViewBag.ID" autocomplete="off" /> </p></td>
            </tr>
            <tr>
                <td><p>国家：</p></td>
                <td>
                    <p>
                        <select class="Country layui-input">
                            <option value="">全部</option>
                            <option value="中国">中国</option>
                            <option value="俄罗斯">俄罗斯</option>
                            <option value="越南">越南</option>
                            <option value="其他">其他</option>
                        </select>
                    </p>
                </td>
            </tr>
            <tr>
                <td><p>性别：</p></td>
                <td>
                    <p>

                        <select class="Sex layui-input">
                            <option value="">全部</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </p>
                </td>
            </tr>
            <tr>
                <td><p>解锁数量：</p></td>
                <td><p><input class="layui-input Num" type="number" name="name" value="@ViewBag.Num" autocomplete="off" /></p></td>
            </tr>
            <tr>
                <td><p>价格/h币：</p></td>
                <td><p><input class="layui-input Fee" type="number" name="name" value="@ViewBag.Fee" autocomplete="off" /></p></td>
            </tr>

            <tr>
                <td><p>状态：</p></td>
                <td>
                    <p>
                        <select class="State layui-input">
                            <option value="">关闭</option>
                            <option value="1">开启</option>
                        </select>
                    </p>
                </td>
            </tr>
            <tr>
                <td><p>操作人：</p></td>
                <td><p><input class="layui-input OperatorId" type="number" name="name" value="@ViewBag.OperatorId" autocomplete="off" /></p></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input class="layui-btn Add" onclick="AddUnlocknearby()" value="增加" /><input class="layui-btn Edit" onclick="EditUnlocknearby()" value="修改" />
                </td>
            </tr>
        </table>

    </div>
</div>、

2.Js代码：

Load方法，窗体加载：

<script>
    function Load() {
        var Id = $('.ID').val();

        if (Id == "") {
            $('.Edit').css('display', 'none');
        } else {
            $('.Add').css('display', 'none');
        }

        $('.ID').attr('readonly', 'readonly');

        var Country = '@ViewBag.Country';
        $('.Country').val(Country);

        var Sex = '@ViewBag.Sex';
        $('.Sex').val(Sex);

        var State = '@ViewBag.State';
        $('.State').val(State);
    }

    Load();

AddUnlocknearby方法，添加方法：

    //添加
    function AddUnlocknearby() {
        var Country = $('.Country').val();
        var Sex = $('.Sex').val();
        var Num = $('.Num').val();
        var Fee = $('.Fee').val();
        var State = $('.State').val();
        var OperatorId = $('.OperatorId').val();
        $.ajax({
            url: '/Circle/AddUnlocknearby',
            data: { 'country': Country, 'sex': Sex, 'num': Num, 'fee': Fee, 'state': State, 'operatorId': OperatorId },
            type: 'post',
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                	//子窗体自动关闭
                    var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引 　　
                    parent.layer.close(index);//再执行关闭
                } else {
                    alert(res.msg);
                }
            },
        });
    }

EditUnlocknearby方法，修改方法：

    //修改
    function EditUnlocknearby() {
        var Id = $('.ID').val();
        var Country = $('.Country').val();
        var Sex = $('.Sex').val();
        var Num = $('.Num').val();
        var Fee = $('.Fee').val();
        var State = $('.State').val();
        var OperatorId = $('.OperatorId').val();
        $.ajax({
            url: '/Circle/EditUnlocknearby',
            data: { 'ID': Id, 'country': Country, 'sex': Sex, 'num': Num, 'fee': Fee, 'state': State,  'operatorId': OperatorId },
            type: 'post',
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                	//子窗体自动关闭
                    var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引 　　
                    parent.layer.close(index);//再执行关闭
                } else {
                    alert(res.msg);
                }
            },
        });
    }


</script>

四.扩展：

Js时间戳与日期的相互转换：
1.日期转时间戳：

//$(".startDate")是一个日期文本框
var sjc = new Date($(".startDate").val()).valueOf()/1000;

2.时间戳转日期：

//d.joinTime是一个时间戳
var date = new Date(parseInt(d.joinTime) * 1000);
return date.toLocaleString().replace(/:\d{1,2}$/, ' ');
黄瓜炒鸡蛋emm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 项目实战.md
03-26
一个又一个夜晚，踩过 layui 一个又一个坑，特此纪念
Layui项目实战干货总结
我是一只蘑菇17的博客
10-22 399
layer弹出层显示在top顶层
Layui的基本使用(Idea)
weixin_60096751的博客
03-27 3558
官网下载：在线示例 - Layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这..
LayUI之树形菜单的实现（详细描述附带项目案例）
weixin_74352229的博客
07-11 1037
树形菜单是一种常见的网页导航菜单形式，它使用树形结构来展示菜单项之间的层级关系。树形结构是一种层次化的数据结构，它由一个或多个节点组成，每个节点可以有零个或多个子节点。在树形菜单中，每个菜单项都对应树中的一个节点，菜单项之间通过父子关系来表示层级关系。树形菜单通常以一个根节点开始，根节点的子节点对应一级菜单项，每个一级菜单项又可以有自己的子节点，形成多级菜单结构。用户可以通过点击菜单项的展开/折叠按钮或者点击菜单项本身来展开或收起下级菜单项。
LayUI项目学习
努力的nana
11-11 4494
layui项目初尝试
layUi项目实战
你要十分努力，才能看起来毫不费力！
06-03 1119
右击页面，检查 @layout("/common/_container.html", {js:["/assets/userinfo/system_account_batch_add.js"]}){ <div class="layui-body-header"> <span class="layui-body-header-title">系统账户批量生成</span> </div> <div class="layui-fluid">
实战中的Layui
qq_46258819的博客
03-09 192
前言 最近经常遇到需要使用layui的地方，走了些许弯路终于理顺了一点点，写个博客备忘。 Laypage laypage是layui提供的实现分页效果的方法，能够快速而且美观地实现分页，下面是个小示例。 官方文档：https://layui.11dz.cn/demo/laypage.html laypage.render({ elem: 'demo_1',//容器 count: count, //数据总数，从服务端得到 theme: '#1890ff',//主题
LayUI项目
weixin_66202611的博客
07-21 896
1.为了更好的展现前台效果，我们需要借助工具类formSelectshttps下载地址https怎么下载formSelects点击以上提供的网址里的dist,开元的源码都在里面dist里都是需要导入的插件点击code即可下载下载完毕之后导入项目中导入完毕后，下一步就是引入，引入代码如下，切记引入代码时注意路径问题,还有就是注意导入顺序的问题，先引入fromSelects在引入JavaScript...
Spring mybatis shiro layui项目实战物业管理系统视频讲解
欣茂Java学院技术专栏
04-03 305
SpringMVC、MyBatis、Shiro物业管理系统项目演示
Layui-1-第一个Layui项目
huiguo_的博客
11-11 324
Layui第一次学习1.首先去官网下载压缩包2.导入配置2.1如果是web项目正常解压放在web-content的目录下2.2在页面进行关联 1.首先去官网下载压缩包 https://www.layui.com/ 2.导入配置 2.1如果是web项目正常解压放在web-content的目录下 2.2在页面进行关联 <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css"> <!-- 这里采用模块化引入 -->
ssm+layui项目
10-27
使用了layui+SSM技术，可以了解layui前端技术的开发以及ssm项目技术的锻炼，内涵数据库文件
layui封装项目
08-23
layui封装layui封装 有任何问题可以和我留言
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
宿舍管理系统（附源码）SpringBoot+Layui+Mybatis完整项目
03-18
关注公众号获取项目sql：javachengshen，回复：宿舍管理系统。 这份资源是一个基于Spring Boot、Layui和MyBatis的宿舍管理系统，它包含了多个模块，涵盖了学生管理、宿舍管理、公告管理、表格统计等多个方面。采用了...
Python开发基于Flask的在线学习笔记练手项目流程实战_编程案例实例详解课程教程.pdf
03-19
Python开发基于Flask的在线学习笔记练手项目流程实战_编程案例实例详解课程教程.pdf
asp.net core webapi+layui基础实例程序源码.zip
08-17
asp.net core webapi+layui基础实例程序源码.zip
jfinal实战项目-内部管理项目
02-09
jfinal实战项目-企业内部管理项目，jfinal+layui，里面含有sql，导入eclipse里面就可以运行
Layui入门及案例演示
ChatYU的博客
07-10 381
Layui是一个前端开发框架，它提供了一套简洁易用的界面元素和强大的接口，帮助开发者快速构建出美观、功能丰富的网页。Layui的设计初衷是提供一种轻量、模块化的解决方案，让开发者能够更加高效地进行前端开发工作。Layui提供了丰富的UI组件，包括按钮、表单、表格、上传、弹层等常用的页面元素，同时也提供了一些实用的工具组件，如日期选择器、分页组件等。这些组件都经过精心设计和优化，使用起来非常方便，并且可以灵活地定制样式。
LayUI轻量级前端开发框架实战讲解
欣茂Java学院技术专栏
04-23 548
LayUI前端框架开发视频讲解（欣茂Java学院） 在html中都使用过这样的场景。使用input或者button定义按钮。这些都是 原生的样式，定义出来都不是那么好看。 范例：使用html定义按钮 <button type="button">html按钮&...
springboot layui项目实战
最新发布
03-08
Spring Boot是一个用于创建独立的、基于Spring的应用程序的框架，它简化了Spring应用程序的开发过程。而Layui是一款简单易用、灵活的前端框架，它提供了丰富的UI组件和强大的功能，可以帮助开发者快速构建美观、易用的Web应用。 在Spring Boot和Layui的结合中，可以使用Spring Boot提供的特性和功能来构建后端服务，同时使用Layui来构建前端界面。下面是一个简单的Spring Boot和Layui项目实战步骤： 1. 创建Spring Boot项目：使用Spring Initializr创建一个新的Spring Boot项目，选择所需的依赖项，如Spring Web、Spring Data JPA等。 2. 配置数据库：在application.properties或application.yml文件中配置数据库连接信息，如数据库URL、用户名和密码等。 3. 创建实体类：根据业务需求创建相应的实体类，并使用注解标记实体类与数据库表之间的映射关系。 4. 创建数据访问层：创建Repository接口，并继承Spring Data JPA提供的接口，以实现对数据库的增删改查操作。 5. 创建业务逻辑层：创建Service接口和实现类，处理业务逻辑，并调用数据访问层进行数据操作。 6. 创建控制器：创建Controller类，处理HTTP请求，并调用业务逻辑层进行业务处理。 7. 创建前端页面：使用Layui提供的UI组件和模板语法，创建前端页面，如列表展示页面、表单提交页面等。 8. 前后端交互：通过Ajax等方式，实现前后端数据的交互，如前端发送请求获取数据，后端返回JSON格式的数据。 9. 部署运行：将项目打包成可执行的jar文件，并部署到服务器上运行。 以上是一个简单的Spring Boot和Layui项目实战的步骤，具体的实现过程会根据具体的业务需求而有所不同。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值