Bootstrap框架下表格组件bootstrapTable的js代码

Posted 2022-08-31 时光-ing

JS代码如下：

$(function()
    window.cellEvents=;
    $('#tb_user').bootstrapTable(
        url:'/user/findAllSimplePage',    // 请求后台的url
        method: 'post',      // 请求方式：post/get
        //striped: true,  // 是否显示行间隔色
        classes: 'table table-bordered table-hover',  // bootstrap的表格样式
        theadClasses: 'bg-info thead-dark', // 表头的背景色
        //toolbar: '#toolbar',  // 工具按钮用哪个容器
        cache: false, // 是否使用缓存，默认为true，一般来说需要设置一下这个属性
        pagination:true, // 是否显示分页
        sortable:true, // 是否启用排序
        sortOrder:'asc', // 排序方式
        sidePaginnation: 'server', //分页方式，clien客户端分页，server服务端分页
        // queryParamsType: '',
        pageNumber: 1, // 初始化加载第几页，默认第一页
        pageSize:5, //每页的记录行数
        pageList: [5,10,20],  // 每页的行数
        search: false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端
        strictSearch: true, // 默认为false，为模糊搜索，true启用全匹配搜索
        showColumns: false,  // 是否显示所有的列
        showRefresh: false, // 是否显示刷新按钮
        minimumCountColumns: 10, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        // height : 500,  // 行高，若未定义，则表格自动根据记录条数设置表格高度
        uniqueId: 'uuid', // 每一行的唯一标识，通常对应表的主键
        showToggle: false, // 是否显示详细试图和列表视图的切换按钮
        cardView: false, // 是否显示详细试图
        detailView: false, // 是否显示父子表
        onClickRow: function(row,$element)   ,  // 行点击事件
        rowStyle: function (row,index)
            var classes=[
                'bg-blue',
                'bg-navy',
                'bg-red'
            ]
            if(index %4 == 0 )  // 判断行号是第几行
                return 
                    classes: classes[0]
                
            
            else if (index %4 == 1)
                return 
                    css:
                        color:'black'
                    
                
            
            else if (index %4 == 2)
                return 
                    classes: classes[2]
                
            
            else 
                return 
            
        ,
        queryParams: function (params)  // 查询的参数
            var param = 
                size : params.limit,  // 一页的行数
                page : (params.offset / params.limit)+1,  // 第几页，从1开始
            ;
            return param;
        ,
        columns: [
            title: '编号',
            formatter:function (value,row,index)
                var pageSize = $('#tb_user').bootstrapTable('getOptions').pageSize;
                var pageNumber = $('#tb_user').bootstrapTable('getOptions').pageNumber;
                return pageSize * (pageNumber-1) +index +1;
            ,
            align: 'center',
            width: 55
        ,
            field: 'uuid',
            title: 'UUID',
            visible: false
        ,
            field: 'username',
            title: '用户名称',
        ,
            field: 'gender',
            title: '用户性别',
            formatter:function (value,row,index)
                var ret = '<span class="badge badge-danger">'+value+'</span>';
                if(value=='男')
                    ret = '<span class="badge badge-success">'+value+'</span>';
                
                else if(value=='女')
                    ret = '<span class="badge badge-warning">'+value+'</span>';
                
                return ret;
            
        ,
            field: 'age',
            title: '用户年龄',
        ,
            field: 'phone',
            title: '用户手机号',
        ,
            field: 'address',
            title: '用户地址',
        ,
            field: 'email',
            title: '用户邮箱',
        ,
            field: 'salary',
            title: '月薪',
            cellStyle:function (value,row,index)
                if(index %3 == 0 )
                    return 
                        classes: 'bg-blue'
                    
                
                else if (index %3 == 1)
                    return 
                        classes: 'bg-green'
                    
                
                else 
                    return 
                
            
        ,
            field: '',
            title: '操作',
            events: cellEvents,
            formatter:function (value,row,index)
                return '<i class="modify fa fa-edit fa-lg text-warning" title="修改记录"></i>&nbsp;&nbsp;&nbsp;'+'<i class="delete fa fa-close fa-lg text-danger" title="删除">'
            
        ]
    );
)

效果展示：