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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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中计算时间差的几种方法
2009/12/31 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python入门教程之运算符与控制流
2016/08/17 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
2014四风问题对照检查材料范文
2014/09/15 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
营销计划书范文
2015/01/17 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
MySQL批量更新不同表中的数据
2022/05/11 MySQL