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功能函数详解
Feb 01 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
element中的$confirm的使用
Apr 26 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实现无限分类实例详解
2015/01/15 PHP
PHP导入导出Excel代码
2015/07/07 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
9个比较实用的php代码片段
2016/03/15 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
详解vue高级特性
2020/06/09 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python 重定向获取真实url的方法
2018/05/11 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
超市重阳节活动方案
2014/02/10 职场文书
《燕子》教学反思
2014/02/18 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
法人委托书范本
2014/09/15 职场文书
小学生毕业评语
2014/12/26 职场文书
关于倡议书的范文
2015/04/29 职场文书
提档介绍信范文
2015/10/22 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL