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 以对象为索引的关联数组
May 19 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
js图片预加载示例
Apr 30 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php语法检查的方法总结
2019/01/21 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
js查找父节点的简单方法
2008/06/28 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python中pika模块问题的深入探究
2018/10/13 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
银行求职自荐信范文
2015/03/04 职场文书
老公出轨后的保证书
2015/05/08 职场文书
黄埔军校观后感
2015/06/10 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript