将图片显示到layui的数据表格上

时间:2024-03-17 08:02:23

 

要实现的效果图

将图片显示到layui的数据表格上

其实要实现上面这个将图片显示到layui的数据表格上,其实很简单。

利用的是layui数据表格里面的templet - 自定义列模板

一开在表格渲染那里定义一个自定义列。

将图片显示到layui的数据表格上

然后给他写进html的代码。

function imagebox(data) {

var PaymentID = data.PaymentID;

var img = "<img src='selectPaymentLog?PaymentID=" + PaymentID + "' alt='Alternate Text' style='width:100px;height:40px;'/>";

return img;

}

我们添加的img的src里面给他放一个跟ID查出对应图片要调用的方法的连接就可以了。

这要只要我们调用那个方法,那个方法就可以把数据库的图片查询出来,然后图片就显示出来了。

下面我们来看一下查询这个图片的方法。

代码如下:

public ActionResult selectPaymentLog(int PaymentID)

        {

            try

            {

                var PaymentLogimg = (from tbPayment in myModel.SZ_Payment

                                     where tbPayment.PaymentID == PaymentID

                                     select new

                                     {

                                         tbPayment.PaymentLog

                                     }).Single();

                byte[] stuImg = PaymentLogimg.PaymentLog;

                return File(stuImg, @"image/jpg");

            }

            catch (Exception e)

            {

                Console.WriteLine(e);

                return Json("failed", JsonRequestBehavior.AllowGet);

            }

        }

这样就可以做到刚开始的那张图片的效果了。