layui查看图片

最新推荐文章于 2025-02-18 13:47:36 发布

油仔仔

最新推荐文章于 2025-02-18 13:47:36 发布

阅读量2k

点赞数

文章标签： c#

本文链接：https://blog.youkuaiyun.com/weixin_44549330/article/details/107898568

版权

这篇博客介绍了如何在layui框架中创建一个自定义列，用于在表格中加载和展示图片，主要针对C#开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在layui初始化加载放入一个自定义列
在这里插入图片描述

定义该列

function customUserPicture(rowData) {
//获取查询到的图片
var picture = rowData.picture;
//一个条件判断如果有图片则显示查询按钮，没有图片则显示未上传
if (picture != undefined && picture != null && picture != "") {
return '<button type="button" class="layui-btn layui-btn-xs" οnclick="openUserPicture(\'' + picture + '\')">查看</button>';
} else {
return "未上传";
}}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200809192624405.png)

```clike
//查看按钮绑定点击事件
function openUserPicture(picture) {
            //图片url
            var pictureUrl = "@Url.Content("~/Document/userPicture/")" + picture;
            //图片元素
            var img = '<img src="' + pictureUrl + '" style="max-width: 300px;max-height: 300px;">';
            //使用layer显示图片
            layer.open({
                type: 1,// 页面层
                title: false,//关闭标题
                closeBtn: 0,//不显示关闭按钮
                shadeClose: true,//点击遮罩层关闭弹窗
                content: img //弹窗显示内容
            });
        }

//接下来到控制器查询图片根据用户id查询出对应的图片
public ActionResult SelectUserByID(int userID)
        {
            try
            {
                UserVo user = (from tabUser in myModel.S_User
                               where tabUser.userID==userID
                               select new UserVo()
                               {
                                   userID=tabUser.userID,//用户iD
                                   userTypeID=tabUser.userTypeID,//用户角色Id
                                   userGroupID=tabUser.userGroupID,//用户组ID
                                   jobNumber=tabUser.jobNumber,//工号
                                   userName=tabUser.userName,//姓名
                                   userEmail=tabUser.userEmail,//邮箱地址
                                   isEnable=tabUser.isEnable,//是否启用
                                   picture=tabUser.picture,//用户头像
                               }).Single();

                return Json(user, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                return null;
            }
        }

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200809192701690.png)