bootstraptable行內操作editable,行顯示圖片

//回車
$("#title").keydown(function (e) {
    if (e.keyCode == 13) {
            $("#searchBut").trigger("click");
    }
});
    //刷新
    $("#refresh").click(function () {
        $('#brandListTab').bootstrapTable('refresh');
    });
    //search
    $("#searchBut").click(function () {
        $('#brandListTab').bootstrapTable('filterBy', queryParams);
    });

$('#parameterTab').bootstrapTable({
        url: '/internal/resource/list',
        method: 'GET',
        contentType: 'application/json',
        striped: true,              //隔行變色效果
        pagination: true,           //顯示分頁信息
        cache: false,
        pageSize: 10,               //每頁顯示數據
        pageNumber: 1,              //頁碼
        pageList: [10, 20, 50,100,'All'],//設置分頁條數
        sidePagination: 'server',   //設置為服務器端分頁
        queryParamsType: 'limit',
        uniqueId: 'id',
        queryParams: queryParams,
        columns: [
            {field: 'id', align: "center", title: '編號'},
            {field: 'parentId', align: "center", title: '父級菜單id'},
            {field: 'name', align: "center", title: '名稱'},
            {field: 'type', align: "center", title: '資源類型', formatter: function (value) {
                    if (value == 1) {
                        return "目錄";
                    }else if (value == 2) {
                        return "菜單";
                    }else if (value == 3) {
                        return "按鈕";
                    }
                }},

            {field: 'url', align: "center", title: 'url'},
            {field: 'permission', align: "center", title: '權限配置'},
            {field: 'sort', align: "center", title: '菜單排序字段'},
            {field: 'icon', align: "center", title: '資源圖標'},
            {field: 'userName', align: "center", title: '創建人'},
            {field: 'createTime', align: "center", title: '創建時間'},
            {field: 'updateBy', align: "center", title: '修改人'},
            {field: 'updateTime', align: "center", title: '修改時間'},
            {field: 'available', align: "center", title: '啟用狀態', editable:{
                    type: "select",
                    source: [{value: 0, text: "未啟用"},{value:1, text: "啟用"}],
                    disabled: false,
                    mode: "popup",
                    validate: function (value) { //字段驗證
                        if (!$.trim(value)) {
                            return '不能為空';
                        }
                    },
                }},
            {field: 'isDelete', align: "center", title: '狀態', editable: {
                    type:"select",
                    source:[{value:0,text:"未凍結"},{value:1,text:"已凍結"}],
                    disabled: false,
                    mode: "popup",
                    validate: function (value) { //字段驗證
                        if (!$.trim(value)) {
                            return '不能為空';
                        }
                    },

                }},
        {
                field: "url", align: "center", title: "圖片", formatter: function (value, row, index) {
                    var image = '<div class="photos">'
                        + '<a target="_blank" href="' + row.url + '"><img style="width: 120px;height: 60px;margin: auto" alt="image" class="feed-photo" src="' + row.url + '"></img></a>'
                        + '</div>';
                    return image;
                }
            },
            {field:"id",align:"center",title:"操作", formatter: function (value,row,index) {
                    var id = value;
                    var result = "";
                    result += '<button  class="btn btn-info btn-sm" onclick="updateResource('+id+')">修改</button>';
                    result += '<button  class="btn btn-danger btn-sm" onclick="deleteResource('+id+')">刪除</button>';
                    return result;
                }}

        ],
        onEditableSave: function (field, row, oldValue, $el) {
            var param = {
                resourceId: row.id
            };
            var url;
            if(field == "available"){
                url="/internal/resource/setAvailable";
                param.available = row[field];
            }else if(field == "isDelete"){
                url="/internal/resource/setIsDelete";
                param.isDelete = row[field];
            }else {
                return false;
            }
            $.ajax({
                type: "post",
                url: url,
                data:param,
                success: function (data) {
                    if (data.success) {
                        toastr.success(data.module);
                    }else {
                        toastr.error(data.errorMessage)
                    }
                    $('#parameterTab').bootstrapTable('filterBy', queryParams);
                }
            });
        }
    });

效果圖