Bootstrap Table使用整理（二）

一、行样式修改

[html] view
plain copy

 print?

<table id="table1"  

       data-row-style="rowStyle"></table>  

[javascript] view
plain copy

 print?

/* 

* 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 {};  

}  



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

[javascript] view
plain copy

 print?

/* 

* 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")'  

});  



三、排序列定义

[javascript] view
plain copy

 print?

/* 

* 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")'  

});  

[html] view
plain copy

 print?

<table id="table1"  

       data-classes="table table-hover table-condensed"  

       data-sort-name="sno"  

       data-sort-order="desc"></table>