Layui表格内图片渲染以及上传图片到数据库(上)

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 
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值