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 相关文章推荐
奇妙的js
Sep 24 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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显示指定目录下子目录的方法
2015/03/20 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
工作交流会欢迎词
2014/01/12 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
销售顾问工作计划书
2014/08/15 职场文书
公积金具结保证书
2015/05/11 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
小学记事作文之200字
2019/08/06 职场文书