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中的关联数组分析
Apr 09 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
Vue拖拽组件开发实例详解
2018/05/11 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python中的pprint折腾记
2015/01/21 Python
浅谈Python中的数据类型
2015/05/05 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python各层级目录下import方法代码实例
2020/01/20 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
给儿子的表扬信
2014/01/15 职场文书
作文评语集锦大全
2014/04/23 职场文书
革命电影观后感
2015/06/18 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server