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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JavaScript 指导方针
2007/04/05 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python实现FTP循环上传文件
2020/03/20 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
如何用python写个模板引擎
2021/01/14 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
学习委员自我鉴定
2014/01/13 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2014年团工作总结
2014/11/27 职场文书
财产保全担保书
2015/01/20 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python