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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Vue组件开发初探
Feb 14 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Vue如何实现变量表达式选择器
Feb 18 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP 远程关机实现代码
2009/11/10 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
js 作用域和变量详解
2017/02/16 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JS实现放烟花效果
2020/03/10 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
大学生求职工作的自我评价
2014/02/13 职场文书
热情服务标语
2014/10/07 职场文书
我是特种兵观后感
2015/06/11 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏