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、後臺就不寫了，就一個更新的操作

各位大哥覺得好的給點個贊