Bootstrap Table使用整理(二)

2024-11-30 01:26:02

相关阅读：

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

Bootstrap Table使用整理（三） http://www.jb51.net/article/115795.htm

Bootstrap Table使用整理（四）之工具栏 http://www.jb51.net/article/115798.htm

Bootstrap Table使用整理(五)之分页组合查询 http://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使用整理(二)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Bootstrap Table使用整理(五)之分页组合查询

推荐阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/1
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免
BootStrap table使用方法分析

本文实例为大家分享了BootStrap table的使用方法,供大家参考,具体内容如下 bootstrap table git address:https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="
Bootstrap table使用方法详细介绍

bootstrap-table是一个非常好用的表格插件,提供了很多工具及分页.搜索等功能. 首先我们需要下面几个文件, <span style="font-size:18px;"> <script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js&q
Bootstrap Table使用整理（四）之工具栏

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/articl
BootstrapTable refresh 方法使用实例简单介绍

本文就bootstrapTable refresh 方法如何传递参数做简单举例说明.下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../libs/bootstrap
值得分享的Bootstrap Table使用教程

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j
Bootstrap Table使用整理（三）

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/art
Bootstrap Table使用整理(一)

相关阅读: Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/ar
Bootstrap Table使用整理(二)

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/art
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法. bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap t
BootStrap table删除指定行的注意事项(笔记整理)

这里一定要做一个笔记,这个问题花了好几个小时,问题虽小,但是从中获得一定经验. 问题:对于table指定行的数据进行删除,仅仅是前端实现! 方法有两种: 1.使用官方文档的数据(反正我试了2个小时都不行,如有大神请指导下):使用events和operate相结合的方式 2.不使用events,在formatter里面定义事件的实现. 上面的例子只是一个细节点,bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现从数据库中提取数据到前端进行相应操作的功能,很好用!
JS表格组件神器bootstrap table详解（强化版）

一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot
JS组件系列之Bootstrap table表格组件神器【终结篇】

bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap

Bootstrap Table使用整理(二)

相关推荐

随机推荐