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下的keyCode键码值表
Apr 10 Javascript
DIV菜单层实现代码
Nov 19 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS排序之选择排序详解
Apr 08 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 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/13 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
angular多语言配置详解
2019/05/16 Javascript
原生JS实现留言板
2020/03/26 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
软件测试英文面试题
2012/10/14 面试题
探矿工程师自荐信
2014/01/24 职场文书
优秀学生获奖感言
2014/02/15 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
php访问对象中的成员的实例方法
2021/11/17 PHP
Python实现双向链表
2022/05/25 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers