Layui项目实战

黄瓜炒鸡蛋emm

已于 2023-06-15 11:49:56 修改

阅读量1.2k

点赞数

分类专栏： Layui 文章标签： layui 前端 javascript

于 2023-06-12 13:55:31 首次发布

本文链接：https://blog.csdn.net/wuyanedwardelrid/article/details/131165687

版权

该文章展示了使用C#,Js,Html,MVC,Layui,jQuery等技术实现的前端交互功能，包括列表的刷新、删除、增加和修改操作。通过Layui表格和弹出子窗体进行数据操作，同时在后台C#中处理相应的增删改查逻辑。

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

使用语言：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=' +