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 相关文章推荐
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
js模拟百度模糊搜索的实例
Aug 04 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
js实现点击烟花特效
Oct 14 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
js实现打字小游戏
2019/12/17 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
初学python数组的处理代码
2011/01/04 Python
netbeans7安装python插件的方法图解
2013/12/24 Python
处理Python中的URLError异常的方法
2015/04/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python实现简单多人聊天室
2018/12/11 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
如何在python中写hive脚本
2019/11/08 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
物业品质提升方案
2014/06/08 职场文书
部门活动策划方案
2014/08/16 职场文书
大学学生会辞职信
2015/05/13 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
python APScheduler执行定时任务介绍
2022/04/19 Python