使用语言：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) {
                    alert('操作成功！');
                } 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) {
                    alert('操作成功！');
                } 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}$/, ' ');