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" οnclick="updateResource('+id+')">修改</button>';
                    result += '<button  class="btn btn-danger btn-sm" οnclick="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);
                }
            });
        }
    });

效果图

 

 

转载于:https://www.cnblogs.com/abo666/p/11161702.html