Layui表格内图片渲染以及上传图片到数据库(上)
文献种类:专题技术文献;
开发工具与关键技术:VS
Layui框架是现在用的范围比较广的一个,那么今天实现是在layui表格中渲染图片!
首先看一下我们写的功能实现的一个效果
1.首先我们实现的过程就是html使用layui框架渲染表格
2.需要显示图片的字段先任意命名一个来进行转换得到我们想要的结果
3.控制器也十分简单在实体类任意命名一个来接收数据的图片,使用三目运算符
看完过程的集美不懂的话下面还有源码,欢迎大家点评!!
接下来就看实现的代码过程吧
JS:首先申请变量
var table, layer, form, classId = 0, parentId = 0;
var state = true;//状态
在渲染表格的时候注意一点,吧要渲染照片的字段任意命名一个变量,再在变量里面转换得到图片
表格图片显示
控制器
页面点击layui表格中的某个图片显示大图
代码部分
-------------------- Html部分 ----------------------------------
<div class="layui-fluid contanerBox">
<div class="layui-row">
<div class="layui-col-md12" id="rightBox">
<fieldset class="layui-elem-field" style="float:right" id="Fieldset">
<input type="text" name="studentID" class="layui-input" style="display:none" id="wuziid">
<legend>设置考生</legend>
<div class="layui-field-box" id="TableCss">
<table id="demo" lay-filter="test"></table>
</div>
</fieldset>
</div>
</div>
</div>
--------------------------- JS部分 ------------------------------
var table, layer, form, classId = 0, parentId = 0;
var state