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 相关文章推荐
node.js中的http.response.end方法使用说明
Dec 14 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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获取后台Job管理的实现代码
2011/06/10 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
js loading加载效果实现代码
2009/11/24 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
用python与文件进行交互的方法
2018/03/01 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
2014年个人委托书范本
2014/10/13 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年业务工作总结
2014/11/17 职场文书
2014年招商工作总结
2014/11/22 职场文书
会议开幕词
2015/01/28 职场文书
端午节寄语2015
2015/03/23 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技