相关阅读：

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

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

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

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

二、列显示控制，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> 

三、单选处理 -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> 

四、多选处理-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> 

五、多选框单选模式

<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  # 使用整理  # Bootstrap Table使用整理(二)  # Bootstrap Table使用整理(一)  # Bootstrap Table使用整理(五)之分页组合查询  # BootstrapTable refresh 方法使用实例简单介绍  # Bootstrap table使用方法详细介绍  # 值得分享的Bootstrap Table使用教程  # DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序  # 过滤  # 分页等）  # BootStrap table使用方法分析  # Bootstrap Table使用整理（四）之工具栏  # 多选  # 单选  # 绑定  # 小编  # 单元格  # 行数  # 在此  # 给大家  # 分页  # 设置为  # 所述  # 给我留言  # 感谢大家  # 默认为  # 疑问请  # 有任何  # 单选框  # return  # lt  # row 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么判断请求类型_Laravel Request isMethod用法  javascript读取文本节点方法小结  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  利用python获取某年中每个月的第一天和最后一天  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何在腾讯云服务器上快速搭建个人网站？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  如何在新浪SAE免费搭建个人博客？  如何在七牛云存储上搭建网站并设置自定义域名？  如何快速生成高效建站系统源代码？  实例解析angularjs的filter过滤器  JavaScript如何实现音频处理_Web Audio API如何工作？  教你用AI将一段旋律扩展成一首完整的曲子  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  Laravel如何使用Livewire构建动态组件？（入门代码）  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  LinuxCD持续部署教程_自动发布与回滚机制  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  如何快速搭建高效服务器建站系统？  网易LOFTER官网链接 老福特网页版登录地址  如何快速使用云服务器搭建个人网站？  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Python文件异常处理策略_健壮性说明【指导】  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  JavaScript如何实现倒计时_时间函数如何精确控制  如何快速搭建高效WAP手机网站？  在线制作视频的网站有哪些,电脑如何制作视频短片？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  文字头像制作网站推荐软件,醒图能自动配文字吗？  JavaScript Ajax实现异步通信  如何快速搭建高效简练网站？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  公司网站制作需要多少钱,找人做公司网站需要多少钱？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  高防服务器如何保障网站安全无虞？  香港服务器选型指南：免备案配置与高效建站方案解析  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  图册素材网站设计制作软件,图册的导出方式有几种？