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/115795.htm

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

一、启用默认支持的工具栏

/* 
* data-search 是否显示搜索框 
* data-show-refresh 是否像是刷新按钮,注:刷新操作会重新请求数据,并带着请求参数 
* data-show-toggle 是否显示面板切换按钮 
* data-show-columns 是否显示列控制按钮 
*/ 
$('#table1').bootstrapTable({ 
 columns: [ 
 { field: 'sno', title: '学生编号' }, 
 { field: 'sname', title: '学生姓名' }, 
 { field: 'ssex', title: '性别' }, 
 { field: 'sbirthday', title: '生日' }, 
 { field: 'class', title: '课程编号' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
<table id="table1" 
 data-classes="table table-hover " 
 data-search="true" 
 data-show-refresh="true" 
 data-show-toggle="true" 
 data-show-columns="true"></table>

Bootstrap Table使用整理(四)之工具栏

二、扩展工具栏使用

/* 
* data-toolbar 用于指定id的div扩展工具栏,这种方式类似EaseUI中的datagird 
* queryParams 请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含 
  limit, offset, search, sort, order 否则, 需要包含: 
  pageSize, pageNumber, searchText, sortName, sortOrder. 
  返回false将会终止请求 
*/ 
var $table1= $('#table1').bootstrapTable({ 
 columns: [ 
 { field: 'sno', title: '学生编号' }, 
 { field: 'sname', title: '学生姓名' }, 
 { field: 'ssex', title: '性别' }, 
 { field: 'sbirthday', title: '生日' }, 
 { field: 'class', title: '课程编号' }, 
 ], 
 url: '@Url.Action("GetStudent","DataOne")', 
 queryParams: function (params) { 
 params.name = '张三丰'; 
 //特别说明,返回的参数的值为空,则当前参数不会发送到服务器端 
 params.sex = $('input[name="sex"]:checked').val(); 
 return params; 
 } 
}); 
//刷新方法 
$('#heartBtn').click(function () { 
 ////刷新处理,指定query 的参数,注:此地方指定的参数,仅在当次刷新时使用 
 //$table1.bootstrapTable('refresh', { 
 // query: { 
 // name: '张三' 
 // } 
 //}); 
 $table1.bootstrapTable('refresh'); 
}); 
<table id="table1" 
 data-classes="table table-hover " 
 data-search="true" 
 data-show-refresh="true" 
 data-show-toggle="true" 
 data-show-columns="true" 
 data-toolbar="#toolbar"></table> 
<div id="toolbar"> 
 <div class="btn-group"> 
 <button class="btn btn-default"> 
  <i class="glyphicon glyphicon-plus"></i> 
 </button> 
 <button class="btn btn-default"> 
  <i class="glyphicon glyphicon-heart" id="heartBtn"></i> 
 </button> 
 <button class="btn btn-default"> 
  <i class="glyphicon glyphicon-trash"></i> 
 </button> 
 </div> 
 <div class="form-group"> 
 <label class="control-label">性别:</label> 
 <label class="radio-inline"> 
  <input type="radio" name="sex" value="男" /> 男 
 </label> 
 <label class="radio-inline"> 
  <input type="radio" name="sex" value="女" /> 女 
 </label> 
 </div> 
</div>

Bootstrap Table使用整理(四)之工具栏

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

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JavaScript Array对象详解
Mar 01 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
JavaScript设计模式之策略模式详解
Jun 09 #Javascript
Bootstrap Table使用整理(三)
Jun 09 #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
You might like
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP7变量处理机制修改
2021/03/09 PHP
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Vue实现简易计算器
2020/02/25 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python应用库大全总结
2018/05/30 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
公司员工检讨书
2014/02/08 职场文书
中学生打架检讨书
2014/02/10 职场文书
公司晚会策划方案
2014/05/17 职场文书
党性观念心得体会
2014/09/03 职场文书
世界气象日活动总结
2015/02/27 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android