Bootstrap Table使用整理（二）

今天药忘吃喽~ 2022-06-14 03:45 158阅读 0赞

**一、行样式修改**

/*
    * data-row-style 扩展方法处理 行样式
    */
    $('#table1').bootstrapTable({
        columns: [
            { field: 'sno', title: '学生编号' },
            { field: 'sname', title: '学生姓名' },
            { field: 'ssex', title: '性别' },
            { field: 'sbirthday', title: '生日' },
            { field: 'class', title: '课程编号' },
        ],
        url:'@Url.Action("GetStudent","DataOne")'
    });
    /**
        * 
        * @@param row  当前行数据对象
        * @@param index 当前行索引
        */
    function rowStyle(row, index) {
        var classes = ['active', 'success', 'info', 'warning', 'danger'];
        if (row.sno.indexOf('2') != -1) {
            return {
                classes:['success']
            }
        }
        return {};
    }

![Center][]

**二、单元格样式定义，对齐方式定义**

/*
    * data-cell-style 扩展方法处理 单元格样式
    * data-align 设置当前列的对齐方式，包括表头
    * data-halign 设置表格标题的对齐方式，优先级大于 align
    */
    $('#table1').bootstrapTable({
        columns: [
            {
                field: 'sno', title: '学生编号',
                align: 'center',
                halign:'right',
                cellStyle: function (value, row, index) {
                    //当前列，奇数单元格显示绿色
                    if (index%2==0)
                        return {
                            classes: 'success'
                        };
    
                    return {};
                }
            },
            { field: 'sname', title: '学生姓名' },
            { field: 'ssex', title: '性别' },
            { field: 'sbirthday', title: '生日' },
            { field: 'class', title: '课程编号' },
        ],
        url:'@Url.Action("GetStudent","DataOne")'
    });

![Center 1][]

**三、排序列定义**

/*
    * data-sortable 设置当前列是否可排序，默认当前显示内容排序
    * data-sort-name 设置默认排序列名
    * data-sort-order 设置默认排序方式 asc/desc
    * data-sorter 可以自定义扩展排序方法
    */
    $('#table1').bootstrapTable({
        columns: [
            { field: 'sno', title: '学生编号', sortable: true },
            { field: 'sname', title: '学生姓名', sortable: true},
            { field: 'ssex', title: '性别', sortable: true },
            { field: 'sbirthday', title: '生日', sortable: true},
            { field: 'class', title: '课程编号', sortable: true},
        ],
        url:'@Url.Action("GetStudent","DataOne")'
    });

![Center 2][]  
  
更多：

[Bootstrap Table使用整理（一）][Bootstrap Table]

[Center]: /images/20220614/c06660e7687944fbb3f82c5b981497a6.png
[Center 1]: /images/20220614/e90fb54e65e746b89d79d4cad9cb2a97.png
[Center 2]: /images/20220614/aa94d5f5c5db408db629cb6d43caeb98.png
[Bootstrap Table]: http://blog.csdn.net/u011127019/article/details/72930427