微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap Table使用整理(二)

相关阅读:

Bootstrap Table使用整理(一)

Bootstrap Table使用整理(三)

Bootstrap Table使用整理(四)之工具栏

Bootstrap Table使用整理(五)之分页组合查询

一、行样式修改

rush:js;"> 方法处理 行样式 */ $('#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 {}; }

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

rush:js;"> /* * 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 {}; 

}
},"DataOne")'
});

三、排序列定义

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

以上所述是小编给大家介绍的Bootstrap Table使用整理(二)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐