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

要实现的效果图

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

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

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

然后给他写进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);

}

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

将图片显示到layui的数据表格上相关推荐

layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器以图 ...
layui框架数据表格的批量删除
layui框架数据表格的批量删除操作此文献为layui框架的数据表格的批量删除,批量删除顾名思义就是把大量的数据进行删除操作由于有点项目数据繁多,如果在要删除的时候一个一个的删除的话,就会很麻烦. ...
html表格的隐藏列,layui实现数据表格隐藏列的示例
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${p ...
layui分页数据表格渲染
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来先说前端HTML和js代码 <script src= ...
【Layui】数据表格（与后台交互获取数据）
html <table id="userList" lay-filter="userList"></table> js //用户列表 v ...
springboot整合layui实现数据表格的分页操作
第一步,引入依赖文件 <link rel="stylesheet" href="./layui/css/layui.css"> <script ...

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

将图片显示到layui的数据表格上相关推荐

最新文章

热门文章