Bootstrap Table使用整理(二)


Posted in Javascript onJune 09, 2017

相关阅读:

Bootstrap Table使用整理(一) https://3water.com/article/115789.htm

Bootstrap Table使用整理(三)  https://3water.com/article/115795.htm

Bootstrap Table使用整理(四)之工具栏 https://3water.com/article/115798.htm

Bootstrap Table使用整理(五)之分页组合查询 https://3water.com/article/115785.htm

一、行样式修改

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

Bootstrap Table使用整理(二)

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

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

Bootstrap Table使用整理(二)

三、排序列定义

/* 
* 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使用整理(二)

以上所述是小编给大家介绍的Bootstrap Table使用整理(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
Node.js实现数据推送
Apr 14 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
JS实现的视频弹幕效果示例
Aug 17 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
Bootstrap Table使用整理(一)
Jun 09 #Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 #Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 #Javascript
jQuery为某个div加入行样式
Jun 09 #jQuery
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 #Javascript
node.js中cluster的使用教程
Jun 09 #Javascript
vue bootstrap小例子一枚
Jun 09 #Javascript
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
支部书记四风问题自我剖析材料
2014/09/29 职场文书
思想品德评语大全
2014/12/31 职场文书
师德师风培训感言
2015/08/03 职场文书
信息技术课教学反思
2016/02/23 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书