Bootstrap Table使用整理(二)

 更新时间:2017年06月09日 10:09:48   作者:天马3798  
这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下

相关阅读:

Bootstrap Table使用整理(一) https://www.jb51.net/article/115789.htm

Bootstrap Table使用整理(三)  https://www.jb51.net/article/115795.htm

Bootstrap Table使用整理(四)之工具栏 https://www.jb51.net/article/115798.htm

Bootstrap Table使用整理(五)之分页组合查询 https://www.jb51.net/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 {}; 
} 

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

/* 
* 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使用整理(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js之完全兼容ie与firefox的拖动层代码[测试好用]

    js之完全兼容ie与firefox的拖动层代码[测试好用]

    经测试,这个拖到效果不错,多浏览器支持。方便做网站的朋友使用
    2008-10-10
  • Javascript 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用)

    这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
    2015-06-06
  • JavaScript控制语句及搭建前端服务器的过程详解

    JavaScript控制语句及搭建前端服务器的过程详解

    这篇文章主要介绍了JavaScript控制语句及搭建前端服务器,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 非常不错的一个JS分页效果代码,值得研究

    非常不错的一个JS分页效果代码,值得研究

    非常不错的一个JS分页效果代码,值得研究...
    2007-06-06
  • js 函数的副作用分析

    js 函数的副作用分析

    函数副作用 指当调用函数时,除了返回函数值之外,还对主调用函数产生附加的影响。例如修改全局变量(函数外的变量)或修改参数。
    2011-08-08
  • ECMAScript 基础知识

    ECMAScript 基础知识

    ECMAScript 基础知识...
    2007-06-06
  • Dom加载让图片加载完再执行的脚本代码

    Dom加载让图片加载完再执行的脚本代码

    当大家使用window.onload执行一个函数时,必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多,所以需要很多时间下载。更令人尴尬的是,当网页文档(或者说Dom)已经加载完毕,而图片尚未加载完毕,很多用户已经开始浏览网页,但这时很多由window.onload所触发的函数不能执行,这就导致一部分功能不能完美地给用户使用,更严重的是会给用户留下不好的印象!
    2008-05-05
  • JavaScript实现随机点名程序

    JavaScript实现随机点名程序

    这篇文章主要为大家详细介绍了JavaScript实现随机点名程序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Bootstrap 组件之按钮(二)

    Bootstrap 组件之按钮(二)

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。本文给大家介绍Bootstrap 组件之按钮的相关知识,感兴趣的朋友一起学习吧
    2016-05-05
  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论