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 相关文章推荐
简介JavaScript中strike()方法的使用
Jun 08 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
JavaScript canvas实现流星特效
May 20 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中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python yield 小结和实例
2014/04/25 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python super()方法原理详解
2020/03/31 Python
python接入支付宝的实例操作
2020/07/20 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
企业门卫岗位职责
2013/12/12 职场文书
批评与自我批评材料
2014/02/15 职场文书
文明村创建实施方案
2014/03/27 职场文书
村居抓节水倡议书
2014/05/19 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
工厂标语大全
2014/10/06 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
转正申请报告格式
2015/05/15 职场文书
党小组评议意见
2015/06/02 职场文书
早恋主题班会
2015/08/14 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python