Bootstrap Table使用整理(三)


Posted in Javascript onJune 09, 2017

相关阅读:

Bootstrap Table使用整理(一) https://3water.com/article/115789.htm 

Bootstrap Table使用整理(二)  https://3water.com/article/115791.htm

Bootstrap Table使用整理(四)之工具栏 https://3water.com/article/115798.htm

Bootstrap Table使用整理(五)之分页组合查询 https://3water.com/article/115785.htm 

一、单元格内容格式化

/* 
* data-formatter 扩展处理单元格内容 
*/ 
$('#table1').bootstrapTable({ 
 columns: [ 
  { 
   field: 'sno', title: '编号', formatter: function (value, row, index) { 
    //return index + 1; 
    return '<span class="badge">'+(index+1)+'</span>'; 
   } 
  }, 
  { 
   field: 'sno', title: '学生编号', formatter: function (value) { 
    return '<a href="#" rel="external nofollow" >'+ value + '</a>'; 
   } 
  }, 
  { field: 'sname', title: '学生姓名' }, 
  { 
   field: 'ssex', title: '性别', formatter: function (value) { 
    return '<i class="glyphicon glyphicon-star"></i>' + value; 
   } 
  }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '课程编号' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
<table id="table1" 
  data-classes="table table-hover table-condensed"></table>

Bootstrap Table使用整理(三)

二、列显示控制,CardView面板显示

/* 
* data-show-columns 设置是否开启显示列,默认为false 
* data-switchable 设置是否参与显示隐藏 
* data-visible 设置默认是否显示 
* data-height 设置table表格固定高度 
* data-card-view 设置table 的显示方式是否是card view 
*/ 
var $table= $('#table1').bootstrapTable({ 
 columns: [ 
  { field: 'sno', title: '学生编号', switchable: false }, 
  { field: 'sname', title: '学生姓名' }, 
  { field: 'ssex', title: '性别' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '课程编号', visible:false }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
<table id="table1" 
  data-classes="table table-hover" 
  data-show-columns="true" 
  data-height="300" 
  data-card-view="true"></table>

Bootstrap Table使用整理(三)

三、单选处理 -radio

/* 
* data-click-to-select 设置行点击是否选中 
* data-select-item-name 设置选中项的值 
* data-radio 设置列是否显示为radio单选框 
* click-row.bs.table 绑定行点击事件 
* getData 获取指定索引的行数据对象 
*/ 
var $table= $('#table1').bootstrapTable({ 
 columns: [ 
  { field: 'sno', title: '学生编号' ,radio:true}, 
  { field: 'sname', title: '学生姓名' }, 
  { field: 'ssex', title: '性别' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '课程编号' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
$table.on('click-row.bs.table', function (e, row, $element) { 
 $('.success').removeClass('success'); 
 $($element).addClass('success'); 
}); 
$('#btn1').click(function () { 
 //获取选中行索引 
 var index = $table.find('tr.success').data('index'); 
 //获取选中行数据对象 
 var result = $table.bootstrapTable('getData')[index]; 
 console.info(result); 
 alert(result.sname); 
}); 
<button class="btn btn-primary" id="btn1">获取表格选中结果</button> 
<table id="table1" 
  data-classes="table table-hover" 
  data-show-columns="true" 
  data-click-to-select="true" 
  data-select-item-name="sno"></table>

Bootstrap Table使用整理(三)

四、多选处理-checkbox

/* 
* data-click-to-select 设置行点击是否选中 
* data-checkbox 设置列为多选框,特别说明:设置为checkbox的列不能绑定字段,否则全为选中状态 
* formatter 中返回对象的diabled属性控制是否禁用多选框,checked属性控制当前是否被选中 
*/ 
var $table= $('#table1').bootstrapTable({ 
 columns: [ 
  { 
   fileid: 'state', checkbox: true, formatter: function (value, row, index) { 
    if (index === 2) { 
     return { 
      disabled: true, 
      checked:true 
     } 
    } 
    if (index === 0) { 
     return { 
      disabled: true, 
      checked: true 
     } 
    } 
    console.info(value); 
    return value; 
   } 
  }, 
  { 
   field: 'sno', title: '学生编号' 
  }, 
  { field: 'sname', title: '学生姓名' }, 
  { field: 'ssex', title: '性别' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '课程编号' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
$table.on('click-row.bs.table', function (e, row, $element) { 
 $('.success').removeClass('success'); 
 $($element).addClass('success'); 
}); 
$('#btn1').click(function () { 
 //获取选中结果行,返回数组 
 //返回结果中包括多选框字段 state=true 
 var result = $table.bootstrapTable('getSelections'); 
 console.info(result); 
 var ids = []; 
 for (var i = 0; i < result.length; i++) { 
  var item = result[i]; 
  ids.push(item.sno); 
 } 
 alert(ids); 
}); 
<button class="btn btn-primary" id="btn1">获取表格选中结果</button> 
<table id="table1" 
  data-classes="table table-hover" 
  data-show-columns="true" 
  data-click-to-select="true" 
  ></table>

Bootstrap Table使用整理(三)

五、多选框单选模式

<button class="btn btn-primary" id="btn1">获取表格选中结果</button> 
<table id="table1" 
  data-classes="table table-hover" 
  data-show-columns="true" 
  data-click-to-select="true" 
  data-single-select="true" 
  > 
 <thead> 
  <tr> 
   <th data-field="state" data-checkbox="true" data-formatter="checkHandle">选择框</th> 
   <th data-field="sno" >编号</th> 
   <th data-field="sname">姓名</th> 
   <th data-field="ssex">性别</th> 
   <th data-field="sbirthday">生日</th> 
   <th data-field="class">课程编号</th> 
  </tr> 
 </thead> 
</table> 
/** data-click-to-select 设置行点击是否选中 
* data-checkbox 设置列为多选框 
* data-formatter 中返回对象的diabled属性控制是否禁用多选框,checked属性控制当前是否被选中 
* data-single-select 指定单选模式,即使使用多选框也是单选模式 
*/ 
var $table= $('#table1').bootstrapTable({ 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
$table.on('click-row.bs.table', function (e, row, $element) { 
 $('.success').removeClass('success'); 
 $($element).addClass('success'); 
}); 
$('#btn1').click(function () { 
 //获取选中结果行,返回数组 
 //返回结果中包括多选框字段 state=true 
 var result = $table.bootstrapTable('getSelections'); 
 console.info(result); 
 var ids = []; 
 for (var i = 0; i < result.length; i++) { 
  var item = result[i]; 
  ids.push(item.sno); 
 } 
 alert(ids); 
}); 
function checkHandle(value, row, index) { 
 if (index === 2) { 
  return { 
   disabled: true 
  }; 
 } 
 if (index === 0) { 
  return { 
   disabled: true, 
   checked: true 
  } 
 } 
 return value; 
}

Bootstrap Table使用整理(三)

以上所述是小编给大家介绍的Bootstrap Table使用整理(三),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
Bootstrap Table使用整理(二)
Jun 09 #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
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
js实现随机点名
2021/01/19 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python字符转换
2008/09/06 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python语言进阶知识点总结
2019/05/28 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
心理健康教育心得体会
2013/12/29 职场文书
园艺师求职信
2014/03/10 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
用JS创建一个录屏功能
2021/11/11 Javascript