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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
动态表格Table类的实现
Aug 26 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
express 项目分层实践详解
Dec 10 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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 stream_get_meta_data返回值
2013/09/29 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python使用matplotlib绘制动画的方法
2015/05/20 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
解决pip install psycopg2出错问题
2020/07/09 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
班主任工作经验交流材料
2014/05/13 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
四风自我剖析材料
2014/09/30 职场文书
六查六看自查报告
2014/10/14 职场文书
部队2015年终工作总结
2015/04/02 职场文书
信用卡工资证明范本
2015/06/19 职场文书
经营场所证明范本
2015/06/19 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Mysql Online DDL的使用详解
2021/05/20 MySQL
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫