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 = true;//状态
        $(function () {
            loadLayuiModel();//方法调用
            //设备内容盒子的宽高
            var rightBox = $("#rightBox").width();
            $("#Fieldset").css("width", (rightBox - 20) + "px");
            $("#TableCss").css("width", (rightBox - 40) + "px");
        });

        window.onresize = function () {
            var rightBox = $("#rightBox").width();
            $("#Fieldset").css("width", (rightBox - 20) + "px");
            $("#TableCss").css("width", (rightBox - 40) + "px");
        }
         //加载layui组件
        function loadLayuiModel() {
            layui.use(['table', 'layer', 'form'], function () {
                table = layui.table;
                layer = layui.layer, form = layui.form;
                //第一个实例
                table.render({
                    elem: '#demo'
                    , id: 'idTest'
                    , url: 'GetWuZiXinXi' //数据接口
                    , where: {
                        Pro: $('#productText').val(),
                        classID: 1,
                        state: state//状态
                    },
                    cols: [[ //表头
                        { type: 'checkbox', fixed: "left" },
                        { type: 'numbers', title: '序号', fixed: "left" },
                        { field: "studentID", title: "studentID", hide: true },
                        { field: "UserID", title: "userID", hide: true },
                        { field: "StudentNumber", title: "学号", align: "center", width: '7%', fixed: "left", style: "height:50px;" },
                        { field: "StudentName", title: "姓名", width: 100, align: "center" },
                        { field: "StudentIDNum", title: "身份证号", align: "center", width: '12%' },
                        { templet: setPic, title: '学生照片', align: 'center', width: '12%' },
                        { field: "StudentSex", title: "性别", width: 70, align: "center" },
                        { field: "AcademeName", title: "学院", width: 150, align: "center" },
                        { field: "SpecialtyName", title: "专业", width: 150, align: "center" },
                        { field: "GradeName", title: "年级", width: 80, align: "center" },
                        { field: "ClassName", title: "班级", align: "center" },
                        { field: "UserNuber", title: "账号", align: "center" },
                        { title: "操作", templet: setMenuOperate, align: "center", width: '10%', fixed: "right", style: "height:50px;" }
                    ]],
                    page: {
                        limit: 8,//指定每页显示的条数
                        limits: [8, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数
                    }, 
                    data: [],
                });
            });
        }
        //表格操作按钮
        function setMenuOperate(data) {
            return '<a class="layui-btn layui-btn-warm layui-btn-xs" οnclick="update(' + data.studentID + ')">编辑</a>';
        }

        //表格图片显示
        function setPic(data) {
            if (data.hasFile) {
                return '<div class="photoKuan"><img src="/Areas/SB_shebei/img/photoload.gif" /><img class="tableImg" src="GetImage?id=' + data.studentID + '" οnclick="showImg(this,' + data.studentID + ')" οnlοad="show(this)" οnerrοr="photoerroe(this)" /></div>';
            } else {
                return '<a style="cursor: pointer;" οnclick="TableUpload(' + data.studentID + ')">上传</a>';
            }
        }

 //显示
        function show(t) {
            $(t).prev().remove();
            $(t).fadeIn();
        }
        function photoerroe(t) {
            $(t).prev().remove();
            $(t).attr("src", "/Areas/SB_shebei/img/photoerro.jpg");//一张空图片的样式
            $(t).fadeIn();
            $(t).removeAttr("onclick");
        }
        //点击表格图片显示大图
        function showImg(t, id) {
            window.event.stopPropagation();
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['800px', '500px'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img src="GetImage?id=' + id + '" width="100%" height="100%" />'
            });
        }

---------------------------- 控制器部分 -------------------------------

这里表格数据查询根据自己需求即可，就不显示源码了！

 /// <summary>
        /// 获取图片
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public FileContentResult GetImage(int id)//获取图片
        {
            try
            {
                var anModel = myModels.PW_Student.Where(m => m.studentID == id).Select(m => m).SingleOrDefault();
                if (anModel != null)
                {
                    return File(anModel.StudentPicture, @"image/jpg");
                }
                return null;
            }
            catch (Exception)
            {
                return null;
            }
        }