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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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
php 进度条实现代码
2009/03/10 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python实现挑选出来100以内的质数
2015/03/24 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python实现文法左递归的消除方法
2020/05/22 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
2014年大学学生会工作总结
2014/12/02 职场文书
银行招聘自荐信
2015/03/06 职场文书
毕业论文致谢信
2015/05/14 职场文书
会议主持人开场白台词
2015/05/28 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书