C#实现Layui表格弹窗增删改查与详情页图片弹窗

于 2023-09-26 09:38:54 发布
阅读量349 收藏 1
点赞数
分类专栏： Layui 文章标签： c# layui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengzhuqingwan/article/details/133295841
版权

实现Layui表格弹窗增删改查

html代码

@model CommunityMasterListModel
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<script src="~/Scripts/jquery.min.js"></script>
<div style="padding: 16px; display: @isShowList;">
    <form class="layui-form layui-form-pane layui-row layui-col-space16">
        <div class="layui-col-md3">
            <div class="layui-input-wrap">
                <input type="text" name="SearchText" placeholder="达人真实姓名/店铺姓名/手机号/店长手机号" class="layui-input" lay-affix="clear" autocomplete="off">
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-inline">
                <label class="layui-form-label">入驻类型：</label>
                <div class="layui-input-inline">
                    @Html.DropDownListFor(model => model.SettleType, Model.SettleTypeList)
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-inline">
                <label class="layui-form-label">店铺状态：</label>
                <div class="layui-input-inline">
                    @Html.DropDownListFor(model => model.Status, Model.StatusList)
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <button class="layui-btn layui-btn-radius" lay-submit lay-filter="demo-table-search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <button type="button" style="display: @isShowInfo;" class="layui-btn layui-btn-sm layui-btn-radius " lay-event="info">查看详情</button>
        <button type="button" style="display: @isPass;" class="layui-btn layui-btn-sm  layui-btn-radius {{d.Status!=0&&d.Status!=1?"isNotShow":""}}" lay-event="pass">审核通过</button>
        <button type="button" style="display: @isTurnDown;" class="layui-btn layui-btn-sm  layui-btn-radius layui-btn-warm {{d.Status!=0&&d.Status!=1?"isNotShow":""}}" lay-event="turnDown">驳回</button>
        <button type="button" style="display: @isCloseShop;" class="layui-btn layui-btn-sm  layui-btn-radius layui-btn-danger {{d.Status==4?"isNotShow":""}}" lay-event="closeShop">关闭店铺</button>
    </div>
</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.SitePhoto}}" style="width:78px;height:78px;" />
</script>


<script>
    function isNotEmptyStr(s) {
        if (typeof s == 'string' && s.length > 0) {
            return true
        }
        return false
    }
    if ("@isShowList" == "block") {
        layui.use(function () {
            var table = layui.table;
            var form = layui.form;
            var util = layui.util;

            // 创建渲染实例
            table.render({
                elem: '#test'
                , url: '@Url.Action("GetCommunityMasterList")' // 此处为静态模拟数据，实际使用时需换成真实接口
                //, toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print']
                , showIcon: true
                , cellMinWidth: 'auto'
                , height: 'full-80' // 最大高度减去其他容器已占有的高度差
                , page: true
                , cols: [[
                    { field: 'StoreID', title: 'ID', hide: true }//hide: true 隐藏列
                    , { field: 'MemberID', title: 'MemberID', hide: true }
                    , { field: 'CategoryMapID', title: 'CategoryMapID', hide: true }
                    , { align: 'center', title: '序号', type: 'numbers' }
                    , { field: 'CategoryName', title: '项目分类', width: 100 }
                    , { field: 'SitePhoto', title: '门头照片', templet: "#imgtmp", width: 120 }
                    , { field: 'StoreName', title: '店铺名称' }
                    , { field: 'RealName', title: '店长姓名' }
                    , { field: 'BossMobile', title: '店长手机号', width: 120 }
                    , { field: 'Address', title: '门店地址' }
                    , { field: 'LibaoPrice', title: '礼包价格' }
                    , { field: 'SettleTypeName', title: '入驻类型' }
                    , { field: 'StatusName', title: '店铺状态' }
                    , { field: 'CreateDateString', title: '提交时间', width: 150 }
                    , { field: 'AuditDateString', title: '审核时间', width: 150 }
                    , { title: '操作', toolbar: '#barDemo', width: 310 }
                ]]
                , error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            //table.on('toolbar(test)', function (obj) {
            //    var id = obj.config.id;
            //    var checkStatus = table.checkStatus(id);
            //    switch (obj.event) {
            //        //case 'getCheckData':
            //        //    var data = checkStatus.data;
            //        //    layer.msg(layui.util.escape(JSON.stringify(data)));
            //        //    break;
            //    };
            //});

            // 触发单元格工具事件
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var trData = obj.data; // 获得当前行数据
                //var layEvent = obj.event; // 获得 lay-event 对应的值
                //var trElem = obj.tr;
                //console.log(trData);
                //var tableId = obj.config.id;
                switch (obj.event) {
                    case 'info':
                        layer.open({
                            id: trData.StoreID,
                            icon: 16,
                            type: 2,
                            title: '【' + trData.StoreName + '】达人店铺信息',
                            area: ['80%', '80%'],
                            btn: ['关闭'],
                            shade: 0.6, // 遮罩透明度
                            shadeClose: true, // 点击遮罩区域，关闭弹层
                            maxmin: true, // 允许全屏最小化
                            anim: 0, // 0-6 的动画形式，-1 不开启
                            move: false,
                            content: '/CommunityMaster/Info?id=' + trData.StoreID
                        });
                        break;
                    case 'pass':
                        layer.confirm("是否确定审核通过【" + trData.StoreName + "】达人店铺信息", { icon: 6 }, function (index) {
                            $.ajax({
                                url: "@Url.Action("Pass")",
                                type: "post",
                                dataType: "json",
                                data: {
                                    storeID: trData.StoreID,
                                },
                                success: function (res) {
                                    layer.msg('审核成功', { icon: 1 });
                                    location.reload(1);
                                    layer.close(index);
                                }
                            });
                        });
                        break;
                    case 'turnDown':
                        layer.prompt({ title: "请填写驳回【" + trData.StoreName + "】达人店铺信息原因" }, function (value, index, elem) {
                            if (value === '') return elem.focus();
                            //layer.msg('获得：' + util.escape(value)); // 显示 value
                            $.ajax({
                                url: "@Url.Action("TurnDown")",
                                type: "post",
                                dataType: "json",
                                data: {
                                    storeID: trData.StoreID,
                                    auditMemo: util.escape(value)
                                },
                                success: function (res) {
                                    layer.msg('驳回成功', { icon: 1 });
                                    location.reload(1);
                                    // 关闭 prompt
                                    layer.close(index);
                                }
                            });
                        });
                        break;
                    case 'closeShop':
                        layer.prompt({ title: "请填写关闭【" + trData.StoreName + "】达人店铺信息原因" }, function (value, index, elem) {
                            if (value === '') return elem.focus();
                            //layer.msg('获得：' + util.escape(value)); // 显示 value
                            $.ajax({
                                url: "@Url.Action("CloseShop")",
                                type: "post",
                                dataType: "json",
                                data: {
                                    storeID: trData.StoreID,
                                    cancelMemo: util.escape(value)
                                },
                                success: function (res) {
                                    layer.msg('关闭店铺成功', { icon: 1 });
                                    location.reload(1);
                                    // 关闭 prompt
                                    layer.close(index);
                                }
                            });
                        });
                        break;
                }
            });

            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('test', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                    , where: field // 搜索的字段
                });
                layer.msg('搜索成功', { icon: 1 });
                return false; // 阻止默认 form 跳转
            });
        });
    }
</script>
<style>
    .isNotShow {
        display: none;
    }

    .layui-table-cell {
        height: auto;
    }
</style>

后台代码

public ActionResult Index()
        {
            var model = new CommunityMasterListModel();
            return View(model);
        }

        /// <summary>
        /// 获取达人店铺信息列表
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult GetCommunityMasterList(CommunityMasterListModel model)
        {
            int total;
            var list = _communityMasterService.GetCommunityMasterList(model.SearchText, model.Status, model.SettleType, model.Page, model.Limit, out total);
            return new JsonResult()
            {
                Data = new
                {
                    code = 0,
                    msg = string.Empty,
                    count = total,
                    data = list
                },
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }

        /// <summary>
        /// 获取达人店铺信息详情
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult Info(string id)
        {
            var info = _communityMasterService.GetCommunityMasterInfo(id);
            if (info == null)
                return RedirectToAction("Index");
            info.SettleTypeName = info.SettleType == "Unique" ? "独家达人" : "普通达人";
            return View(info);
        }

        /// <summary>
        /// 驳回达人店铺信息
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult TurnDown(TurnDownCommunityMaster model)
        {
            _communityMasterService.TurnDown(model.StoreID, model.AuditMemo);
        }

        /// <summary>
        /// 审核通过达人店铺信息
        /// </summary>
        /// <param name="storeID"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Pass(string storeID)
        {
            _communityMasterService.Pass(storeID);
        }

        /// <summary>
        /// 关闭达人店铺
        /// </summary>
        /// <param name="storeID"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult CloseShop(string storeID, string cancelMemo)
        {
            var res = _communityMasterService.CloseShop(storeID,cancelMemo);
            if (res.Item1)
            {
                return Json(new { code = 200 });
            }
            else
            {
                return Json(new { code = 201, msg = res.Item2 });
            }
        }

Layui图片点击弹窗大图

<div class="layui-form-item  layui-form-text">
                        <label class="layui-form-label">商家上传图片： </label>
                        <div id="ID-photos-demo" class="class-photos-demo layui-textarea" disabled="disabled">
                            <div id="ID-photos-demo" class="class-photos-demo">
                                @foreach (var item in Model.ServicePic.Split(',').ToList())
                                {
                                    <img src="@item" layer-src="@item" layer-pid="" alt="">
                                }
                            </div>
                        </div>
                    </div>
                    <style>
    .class-photos-demo img {
        width: 160px;
        height: 100px;
        cursor: pointer;
        margin: 5px;
    }

    .layui-layer-photos .layui-layer-phimg img {
        width: 45%;
    }
</style>
<script>
    layui.use(function () {
        var layer = layui.layer;
        // 图片层
        layer.photos({
            photos: '#ID-photos-demo'
        });
    });
</script>
风竹罄晚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C#winform进度条弹窗实例
qq_30725967的博客
06-14 2114
MethodInvoker 是位于System.Windows.Forms下的元数据，表示一个委托，该委托可以执行托管代码中声明为void且不接受任何参数的任何方法。在对控件的 invoke 方法进行调用时或需要一个简单委托又不想自己定义时可以使用该委托。项目中，使用MethodInvoker跨线程UI控件调用，使用了委托实现主窗体与进度条窗体之间的进度传递，使用了多线程进行刷新进度,当然也可以使用BackgroundWorker组件。解决跨线程调用UI控件的问题。本文实例讲解进度条弹窗实现过程。
Layui点击添加按钮弹出带编辑框的对话框
ifyouwjk的博客
05-18 9572
点击添加按钮 <button id="addnotebook" type="button" class="layui-btn layui-btn-normal">添加</button> 准备一个弹框notebook_add.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加笔记</title> <link rel="st
layui搜索php,layui实现显示数据表格、搜索和修改功能示例
weixin_42481708的博客
03-10 668
本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考，具体如下：搜索layui.use('table', function(){var table = layui.table;table.render({elem: '#test',url:'/getdata.php',cellminwidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,pag...
layui表格弹窗修改_layui 实现弹出层编辑表格
weixin_32943857的博客
02-26 4024
摘要：这节课学习了用 layui 实现点击添加按钮弹出一个信息编辑页面的功能,主要用到 layui 的 form 组件和下拉框元素.效果:需要注意的地方:1:用某个组件或功能之前需要了解文档,把其依赖的模块引入到代码中,比如 layui form需要引入layui.use(这节课学习了用 layui 实现点击添加按钮弹出一个信息编辑页面的功能,主要用到 layui 的 form 组件和下拉框元素...
C#写入模板excel数据
清雨小竹
05-30 2955
public ReturnNode exportReviewResult() { List<ReplaceExcelData> repData = new List<ReplaceExcelData>(); repData.Add(new ReplaceExcelData(3, 2, "名称1")); repData.Add(new ReplaceExcelData(3, 7, ...
C#MVC后端Layui布局写的数据表格|JSON
05-30
用layui前端布局， C#MVC后端调用数据写的数据表格，后端往前端传入json格式数据，动态绑定，局部刷新，分页，数据库用的petapoco，功能虽小，涉及的东西不少，可以研究研究，只需将web.config里的服务器地址的数据库修改一下即可
C#窗体弹出方式总结
最新发布
IO14122的博客
09-06 4897
本文主要接收C# show和showdialog区别和各自的优缺点、使用场景等等；还有相关的代码示例提供参考。
C# 服务程序 弹窗
weixin_42176639的博客
04-10 3393
C#服务程序编写
layui中Table双击行事件 弹出页面
yatou123858的博客
11-30 2050
layui中Table双击行事件 弹出页面
C# 短消息提示 窗口位置
钢铁男儿
12-01 4690
窗口位置
C# SQLite3增删改查Demo
07-14
适合刚入门的小白，对sqlite运行过程有个完整的理解。 Demo中包含的辅助类，非常好用，可以直接copy到自己的项目中，按照Demo中的操作方法直接操作Sqlite
C#实现XML文档的增删改查功能示例
08-31
主要介绍了C#实现XML文档的增删改查功能,结合实例形式分析了xml文档的创建及C#针对xml文档的加载及增删改查等操作技巧,需要的朋友可以参考下
C#连接MySQL实现增删改查(详细步骤)
03-09
如何实现用C#连接数据库，手把手一步步教你操作，看完绝对会！
C#基于DBContext(EF)实现通用增删改查的REST方法实例
09-04
主要介绍了C#基于DBContext(EF)实现通用增删改查的REST方法实例,是C#程序设计中非常实用的技巧,需要的朋友可以参考下
C#操作Excel增删改查源代码+截图.rar
12-19
很粗糙，基本能用，是帮同学赶出来的草版。C#也是自己靠java印象+ 百度摸索的。 其中修改完后，不会自动刷新界面，请手动点击查询全部，查看修改结果。 还有里面设置的性别枚举，完全没用，只是为了凑题目。
layui如何实现编辑弹出框
u013931283的博客
12-26 2111
实现编辑弹出框 源码: 代码获取地址,点击跳转 效果图:支持数据回显
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后修改成功后表格数据自动更新
热门推荐
Hui_Hong_TaiLang的博客
10-31 6万+
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后表单数据自动刷新 （1）主界面 本系统没有采用分页数据请求，直接取出后台全部数据 （2）点击编辑按钮，编辑功能界面展示 （3）代码实现 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&
C#弹出打开资源对话框（OpenFileDialog）并读取Excel表格（office2007或office2010）
mailun的专栏
12-30 1万+
最近需要把Excel表格里面的数据导入到数据库里面，就研究了一下Excle，怎样把所有表单里面的数据读取出来，下面是代码：  private void button_leadIn_Click(object sender, EventArgs e)         {             OpenFileDialog ofd = new OpenFileDialog();
layui点击按钮弹出编辑框--三个案例可以学习
u013931283的博客
12-26 2632
案例一:数据可回显(类似弹框编辑个人资料的效果) 个人资料编辑效果,点击查看代码 备注弹框效果,点击查看代码 备注弹框效果-无数据回显,点击查看代码
C#DataGridView实现数据的增删改查
07-13
您可以使用C#的DataGridView控件来实现数据的增删改查。 数据的增加： 您可以通过在DataGridView中添加新的行来实现数据的增加。可以使用DataGridView的Rows属性来获取行的集合，然后使用Add方法添加新的行。例如：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值