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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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 字符串压缩方法比较示例
2014/01/23 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
自动更新作用
2006/10/08 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
js css自定义分页效果
2017/02/24 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python with标签使用方法解析
2020/01/17 Python
Python 绘制可视化折线图
2020/07/22 Python
python实现取余操作的简单实例
2020/08/16 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
历史专业学生的自我评价
2014/02/28 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
环卫工作汇报材料
2014/10/28 职场文书
保安2014年终工作总结
2014/12/06 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
企业宣传稿范文
2015/07/23 职场文书
Spring 使用注解开发
2022/05/20 Java/Android