bootstrap table配置参数例子


Posted in Javascript onJanuary 05, 2017

bootstrap-table的一些配置参数:

$('#reportTable').bootstrapTable({ 
 method: 'post', 
 url: '/qStock/AjaxPage', 
 dataType: "json", 
 striped: true, //使表格带有条纹 
 pagination: true, //在表格底部显示分页工具栏 
 pageSize: 22, 
 pageNumber: 1, 
 pageList: [10, 20, 50, 100, 200, 500], 
 idField: "ProductId", //标识哪个字段为id主键 
 showToggle: false, //名片格式 
 cardView: false,//设置为True时显示名片(card)布局 
 showColumns: true, //显示隐藏列 
 showRefresh: true, //显示刷新按钮 
 singleSelect: true,//复选框只能选择一条记录 
 search: false,//是否显示右上角的搜索框 
 clickToSelect: true,//点击行即可选中单选/复选框 
 sidePagination: "server",//表格分页的位置 
 queryParams: queryParams, //参数 
 queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求 
 toolbar: "#toolbar", //设置工具栏的Id或者class 
 columns: column, //列 
 silent: true, //刷新事件必须设置 
 formatLoadingMessage: function () { 
 return "请稍等,正在加载中..."; 
 }, 
 formatNoMatches: function () { //没有匹配的结果 
 return '无符合条件的记录'; 
 }, 
 onLoadError: function (data) { 
 $('#reportTable').bootstrapTable('removeAll'); 
 }, 
 onClickRow: function (row) { 
 window.location.href = "/qStock/qProInfo/" + row.ProductId; 
 }, 
});

bootstrap-table带参到后台去的代码

function queryParams(params) { //配置参数 
 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 
 pageSize: params.limit, //页面大小 
 pageNumber: params.pageNumber, //页码 
 minSize: $("#leftLabel").val(), 
 maxSize: $("#rightLabel").val(), 
 minPrice: $("#priceleftLabel").val(), 
 maxPrice: $("#pricerightLabel").val(), 
 Cut: Cut, 
 Color: Color, 
 Clarity: Clarity, 
 sort: params.sort, //排序列名 
 sortOrder: params.order//排位命令(desc,asc) 
 }; 
 return temp; 
 }

参考:https://3water.com/article/93246.htm

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
一些mootools的学习资源
Feb 07 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
js实现滑动进度条效果
Aug 21 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 #Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 #Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 #Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 #Javascript
jQuery选择器实例应用
Jan 05 #Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 #Javascript
You might like
php获取远程文件内容的函数
2015/11/02 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
React中常见的动画实现的几种方式
2018/01/10 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python操作xml文件详细介绍
2014/06/09 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python进行文件对比的方法
2018/12/24 Python
python实现连连看游戏
2020/02/14 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
吸烟检讨书2000字
2014/02/13 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
征兵宣传标语
2014/06/20 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
小学生校园广播稿
2014/09/28 职场文书
先进党组织事迹材料
2014/12/26 职场文书
蜗居观后感
2015/06/11 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL