springboot+idea+bootstrap的带有图片的表格编辑操作

前面已经写了 批量导入，图片显示，现在写的是批量修改，后面会写用echarts+springboot 做折线图，有时间贴上

1、jsp代码如下，编辑按钮

 formatter: function (value, row, index) {
                            var edit = '<input class="btn btn-primary" type="button" value="编辑" οnclick="edit(\'' + row.noticeid + '\')" />';
                            return edit;
                        }

2、创建编辑模态框

<!--编辑操作模态框-->
<div class="modal fade" id="my1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabe1">新闻编辑</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" action="" method="post">
                    <div class="item">
                        <h3>新闻编辑</h3>
                    </div>
                    <div class="item">
                        <input type="hidden" name="noticeid" id="noticeid1">
                        新闻标题:
                        <input type="text" class="form-control" name="title" id="title1"
                               placeholder="请输入标题"/><span
                            class="state1"></span></div>

                    <div class="item">
                        新闻内容:
                        <textarea class="form-control" name="content" id="content1" rows="3">新闻内容</textarea>
                        <span
                                class="state1"></span></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">新闻图片</label>
                        <div class="col-sm-10">
             
                            <img src=""  id="imagepath1" name="imagepath" style="width: 120px;height: 80px"><input type="file" name="imagepath" data-ref="url2"
                                                                                class="col-sm-10 myfile" value=""/> <input type="hidden"
                                                                                                                           name="url2" id="imagepath1" value="">
                        </div>
                    </div>

                    <div class="item">
                        <button type="button" id="editBtn1" class="btn btn-primary" data-dismiss="modal"><span
                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                                class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

3、点击编辑：需要选择一行数据，获取当前行的所有数据并就进行回显

这主要注意给图片赋值这：是attr 不在是val了
$("#imagepath1").attr(“src”,row.imagepath);

        //编辑操作
        function edit(id) {
            var vals = [];
            $('input:checkbox:checked').each(function (index, item) {
                    vals.push($(this).val());
                }
            );
            if(vals.length<1||vals.length>=2) {
                $("#editButton").removeAttr("data-target");
                alert("请选择一条数据");
            } else {
                //打开修改模态框
                $('#my1').modal();
                var rows = $('#noticeTable').bootstrapTable('getSelections');
                var row = rows[0];
                $("#noticeid1").val(row.noticeid);
                $("#title1").val(row.title);
                $("#content1").val(row.content);
                //显示图片操作
                $("#imagepath1").attr("src",row.imagepath);

             // var a =   $("#imagepath1").val(row.imagepath);

            }
        }

4、点击编辑效果如下

点击选择，重新选择一个图片 在点击上传就替换掉原来的图片并返回一个图片名称，点击保存后台获取前台的所有数据，包括图片名称更新到数据库，完毕了，下面把其他代码贴上

5、点击操作操作的js

    //编辑新闻
    $('#editBtn1').click(function () {
        var title = $("#title1").val();
        var content = $("#content1").val();
        var imagepath = $("#imagepath1").val();
        var noticeid = $("#noticeid1").val();

        $.ajax({
            type: "post",
            datatype: "json",
            url: "/noticeManager/notice/save",
            data:{"title":title,"content":content,"imagepath":imagepath,"noticeid":noticeid},
            async: true,
            success: function (result) {
                if (result.flag == 'success') {
                //刷新当前table
                    $("#noticeTable").bootstrapTable('refresh');
                    toastr.success("修改成功!");
                } else {
                    toastr.error("修改失败!");
                }
            }
        });

    });

6、后台就不写了，就一个更新的操作

各位大哥觉得好的给点个赞