Layui table中显示图片，存session的方式跳转新i

接口返回json并回显的页面

<table class="layui-hide" id="notpatrolpersonlist" lay-filter="notpatrolpersonlist"></table>
<!-- 头工具栏模板 -->
<script type="text/html" id="notpatrolpersonlistTpl">
    <div class="layui-btn-container">   
        <button class="layui-btn layui-btn-sm" id="notpatrolpersonlistadd"><i class="layui-icon">&#xe61f;</i>添加社区</button>
    </div>
</script>

<!-- 行工具栏模板 -->
<script type="text/html" id="notpatrolpersonlistdel">
    <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a> 
    <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>

赋值和删除js

layui.use(["element", "table", "form", "laydate", "upload"], function() {
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    //赋值
    var articleTable = table.render({
        elem: "#notpatrolpersonlist",
        url: $url + "jxkh/S0008F0024",
        limit: 10,
        //page: true,
        method: 'post',
        even: true,
        toolbar: "#notpatrolpersonlistTpl",
        parseData: function(res) {
            console.log(res);
            return {
                "code": 0, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.data.list //解析数据列表
            }

        },
        cols: [
            [{
                    field: 'csqName',
                    title: '社区名称',
                    width: "10%",
                    sort: true,
                    totalRowText: '合计',
                    unresize: true
                }, {
                    field: 'jdName',
                    title: '街道名称',
                    width: "10%",
                    sort: true,
                    totalRow: true
                }, {
                    field: 'cont',
                    title: '介绍',
                    width: "25%",
                    sort: true,
                    totalRow: true
                }
                , {
                    field: 'wgName',
                    title: '网格员名称',
                    width: "10%",
                    sort: true,
                    totalRow: true
                }, {
                    field: '',
                    title: '头像',
                    width: "10%",
                    sort: true,
                    templet: function(d) {
                        return '<div class="person"><img src="' + $url + d.headUrl + '" ></div>';
                    }
                }, {
                    field: 'rate',
                    title: '平均上报率',
                    width: "10%",
                    sort: true,
                    totalRow: true
                },
                {
                    field: 'bool',
                    title: '时间',
                    width: "16%",
                    sort: true,
                    totalRow: true
                }, {
                    field: '',
                    title: '操作',
                    sort: true,
                    templet: "#notpatrolpersonlistdel",
                    totalRow: true
                }
            ]
        ],
        done: function(res, curr, count) {},
    });
    //删除
    table.on('tool(notpatrolpersonlist)', function(obj) {
        var data = obj.data;
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function(index) {
                console.log(data)
                obj.del();
                layer.close(index);
                $.ajax($url + 'jxgl/S0009F0024_2', {
                    data: {
                        wgName: data.wgName,
                    },
                    dataType: 'json', //服务器返回json格式数据
                    type: 'post', //HTTP请求类型
                    timeout: 10000, //超时时间设置为10秒；
                    success: function(data) {
                        if (data.result = 200) {
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 2000
                            }, function() {
                                articleTable.reload();
                            });

                        } else {
                            layer.msg(data.result)
                        }
                    },
                    error: function(xhr, type, errorThrown) {

                    }
                });

            });
        } else if (obj.event === 'edit') {
            var csqName = obj.data.csqName;
            var jdName = obj.data.jdName;
            var wgName = obj.data.wgName;
            var rate = obj.data.rate;
            var headUrl = obj.data.headUrl;
            var bool = obj.data.bool;
            var cont = obj.data.cont;
            console.log(csqName, jdName, wgName, rate, headUrl, bool,cont);
            sessionStorage.setItem('csqName', csqName);
            sessionStorage.setItem('jdName', jdName);
            sessionStorage.setItem('wgName', wgName);
            sessionStorage.setItem('rate', rate);
            sessionStorage.setItem('headUrl', headUrl);
            sessionStorage.setItem('bool', bool);
            sessionStorage.setItem('cont', cont);
            layer.open({
                type: 2,
                title: '编辑排名统计',
                shadeClose: true,
                shade: 0.8,
                maxmin: true,
                area: ['90%', '90%'],
                content: "notpatrolpersonlist-edit.html?id=" + bool,
                success: function(layero, index) {},
                end: function() {
                    location.reload();
                }
            });
        }
    });
    //添加
    $("#notpatrolpersonlistadd").on('click', function() {
        layer.open({
            type: 2,
            title: '添加',
            shadeClose: true,
            shade: 0.8,
            maxmin: true,
            area: ['90%', '90%'],
            content: "notpatrolpersonlist-add.html",
            success: function(layero, index) {},
            end: function() {
                location.reload();
            }
        });
    })
})

修改信息的页面

<form class="layui-form ok-form" enctype="multipart/form-data" id="signupForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">社区名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="csqName" placeholder="请输入单位名称" id="csqName" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">街道名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="jdName" placeholder="街道名称" id="jdName" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网格员名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="wgName" placeholder="请输入网格员名称" id="wgName" autocomplete="off" class="layui-input"lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <input type="hidden" id="hidden_tmp_index">
                            <div class="layui-upload-list" id="imgDiv">
                                <img class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">平均上报率</label>
                    <div class="layui-input-block">
                        <input type="text" name="rate" placeholder="请输入平均上报率" id="rate" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="bool" placeholder="请输入时间" id="bool" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="cont" id="cont"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="edit" id="edit">立即提交</button>
                    </div>
                </div>
            </form>

修改信息的JS

var forcsqName = sessionStorage.getItem('csqName');
var forjdName = sessionStorage.getItem('jdName');
var forwgName = sessionStorage.getItem('wgName');
var forrate = sessionStorage.getItem('rate');
var forheadUrl = sessionStorage.getItem('headUrl');
var forbool = sessionStorage.getItem('bool');
var forcont = sessionStorage.getItem('cont');
console.log(forcsqName, forjdName, forwgName, forrate, forheadUrl, forbool, forcont)
var headimg = $url + forheadUrl;
$('#demo1').attr('src', headimg);
$("input[name='csqName']").val(forcsqName);
$("input[name='jdName']").val(forjdName);
$("input[name='wgName']").val(forwgName);
$("input[name='rate']").val(forrate);
$("input[name='bool']").val(forbool);
$("textarea[name='cont']").val(forcont);
layui.use(['layer', 'form', 'element', 'upload'], function() {
    var layer = layui.layer;
    form = layui.form;
    upload = layui.upload;
    element = layui.element;
    var uploadInst = upload.render({
        elem: '#test1',
        url: $url + 'jxgl/S0009F0024',
        acceptMime:"image/*",
        auto: true,
        choose: function(obj) {
            this.data = {
                csqName: $("#csqName").val(),
                jdName: $("#jdName").val(),
                wgName: $("#wgName").val(),
                rate: $("#rate").val(),
                bool: $("#bool").val(),
                file:$("#hidden_tmp_index").val(),
                cont: $("#cont").val(),
              }
            obj.preview(function(index, file, result) {
                $('#demo1').attr('src', result);
            });
        },
        done: function(res) {
            console.log(res)
            layer.close(layer.index); 
            if (res.code > 0) {
                return layer.msg('上传失败');
            }
        },
        error: function() {
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function() {
                uploadInst.upload();
            });
        }
    });
    form.on('submit(edit)', function(data) {
        $.ajax($url + "jxgl/S0009F0024", {
            data: {
                csqName: data.field.csqName,
                jdName: data.field.jdName,
                wgName: data.field.wgName,
                rate: data.field.rate,
                bool: data.field.bool,
                cont:data.field.cont
            },
            dataType: 'json',
            type: 'post',
            timeout: 10000,
            success: function(data) {
                if (data.result = 200) {
                    layer.msg('修改成功', {
                        icon: 1,
                        time: 2000
                    }, function() {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    });
                } else {
                    layui.msg(data.result);
                }
            },

            error: function(xhr, type, errorThrown) {

            }
        });
        return false;
    });
});