Bootstrap Table使用整理(二)
来源:互联网 发布:网络金融诈骗判多少年 编辑:程序博客网 时间:2024/06/06 03:01
一、行样式修改
<table id="table1" data-row-style="rowStyle"></table>
/** 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 {};}
/** 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")'});
三、排序列定义
/** 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")'});
<table id="table1" data-classes="table table-hover table-condensed" data-sort-name="sno" data-sort-order="desc"></table>
更多:
Bootstrap Table使用整理(一)
阅读全文
0 0
- Bootstrap Table使用整理(二)
- Bootstrap Table使用整理(二)
- Bootstrap Table使用整理(一)
- Bootstrap Table使用整理(三)
- Bootstrap Table使用整理(四)-工具栏
- Bootstrap Table使用整理(一)
- Bootstrap Table使用整理(三)
- Bootstrap Table使用整理(四)-工具栏
- bootstrap-table(二)
- Bootstrap Table使用整理(五)-分页组合查询
- Bootstrap Table使用整理(六)-常用操作
- Bootstrap Table使用整理(五)-分页组合查询
- Bootstrap Table使用整理(六)-常用操作
- bootstrap学习笔记(二)--table
- bootstrap table使用小记
- bootstrap-table使用总结
- Bootstrap Table使用分享
- Bootstrap Table使用分享
- 如何获取域名(网址)对应的IP地址
- 百度网盘2T学习资源分享干货满满
- 基于注解的Spring AOP的配置和使用--转载
- Android Studio 快捷键,配置自定义键映射
- 面向对象设计原则概述
- Bootstrap Table使用整理(二)
- Add zip into GIT Bash on Windows
- 设计模式学习_javascript_观察者模式
- 链表分割
- 欢迎使用CSDN-markdown编辑器
- 人脸属性预测之书山有路
- 小白谈谈对JS原型链的理解
- hibernate查询
- 关于studio中的Run/Debug Configurations不能运行的问题及解决方案