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实现等比例缩放图片效果插件
Jul 24 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
python manage.py runserver流程解析
2019/11/08 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
请说出几个常用的异常类
2013/01/08 面试题
大学生工作推荐信范文
2013/12/02 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
合作协议书范本
2014/10/25 职场文书
2014年底工作总结
2014/12/15 职场文书
预备党员自我评价范文
2015/03/04 职场文书
电工生产实习心得体会
2016/01/22 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python简易开发之制作计算器
2022/04/28 Python