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控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Django中处理出错页面的方法
2015/07/15 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python3监控疫情的完整代码
2020/02/20 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
咖啡店自主创业商业计划书
2014/01/22 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
网络营销计划书
2015/01/17 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js