Bootstrap table的基本使用总结
最近在学习BootStrap构建页面，现记录BootStrap table 的一些基本使用如下：
HTML文件：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-body">
<div class="fixed-table-toolbar">
<div class="columns pull-left">
<button type="button" class="btn btn-primary" onclick="add()">
<i class="fa fa-plus" aria-hidden="true"></i>添加
</button>
<button type="button" class="btn btn-danger"
onclick="batchRemove()">
<i class="fa fa-trash" aria-hidden="true"></i>删除
</button>
</div>
<div class="columns pull-right">
<button class="btn btn-success" onclick="reLoad()">查询</button>
</div>
<div class="columns pull-right">
<input id="searchName" type="text" class="form-control"
placeholder="">
</div>
</div>
<table id="exampleTable" data-mobile-responsive="true">
</table>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript"
src="/js/appjs/common/job/job.js"></script>
</body>
</html>
JS文件：
$('#exampleTable')
.bootstrapTable(
{
method: 'get', // 服务器数据的请求方式 get or post
url: prefix + "/list", // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
// showColumns : true,
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 设置为true会有隔行变色效果
dataType: "json", // 服务器返回的数据类型
pagination: true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect: false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize: 10, // 如果设置了分页，每页数据条数
pageNumber: 1, // 如果设置了分布，首页页码
// search : true, // 是否显示搜索框
showColumns: false, // 是否显示内容下拉框（选择显示的列）
sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
// "server"
queryParams: function (params) {
return {
// 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
limit: params.limit,
offset: params.offset
// name:$('#searchName').val(),
// username:$('#searchName').val()
};
},
// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns: [
{
checkbox: true
},
{
field: 'id',
title: 'id'
},
{
field: 'jobName',
title: '任务名称'
},
{
field: 'jobGroup',
title: '任务分组'
},
{
field: 'beanClass',
title: '任务类'
},
{
field: 'cronExpression',
title: 'cron表达式'
},
{
visible: false,
field: 'methodName',
title: '方法名称'
},
{
visible: false,
field: 'isConcurrent',
title: '任务是否有状态'
},
{
visible: false,
field: 'description',
title: '任务描述'
},
{
visible: false,
field: 'updateBy',
title: '更新者'
},
{
visible: false,
field: 'createDate',
title: '创建时间'
},
{
visible: false,
field: 'updateDate',
title: '更新时间'
},
{
visible: false,
field: 'createBy',
title: '创建者'
},
{
visible: false,
field: 'springBean',
title: 'Spring bean'
},
{
field: 'jobStatus',
title: '停起操作',
formatter: function (value, row, index) {
var e = '<a class="btn btn-success btn-xs" href="#" mce_href="#" title="点击开启" onclick="changeStatus(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-hourglass-start"></i>开启</a> ';
var f = '<a class="btn btn-danger btn-xs" href="#" mce_href="#" title="点击关闭" onclick="changeStatus(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-square-o">关闭</i></a> ';
if (row.jobStatus == 0) {
return e;
} else {
return f;
}
}
},
{
title: '操作',
field: 'id',
align: 'center',
formatter: function (value, row, index) {
var e = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="编辑" onclick="edit(\''
+ row.id + '\',\'' + row.jobStatus
+ '\')"><i class="fa fa-edit"></i></a> ';
var d = '<a class="btn btn-warning btn-sm" href="#" title="删除" mce_href="#" onclick="remove(\''
+ row.id
+ '\')"><i class="fa fa-remove"></i></a> ';
var f = '<a class="btn btn-success btn-sm" href="#" title="开启" mce_href="#" onclick="resetPwd(\''
+ row.id
+ '\')"><i class="fa fa-key"></i></a> ';
return e + d;
}
}]
});
效果如下：
这里关于分页，特别强调一下：
服务器分页/客户端分页的转换，table刷新
bootstrap默认是客户端分页 ，可通过html标签
data-side-pagination:"client"或者js中的
sidePagination: 'server'指定。注意，这两种后台传过来的json数据格式也不一样
client : 正常的json array格式 [{},{},{}]
server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。
有事需要根据情况改变分页方式，就要用到Methods中的
‘refreshOptions’ //设置更新时候的options
‘refresh’ //设置更新时的 url ,query(往后台传参数)
$("#tablelist").bootstrapTable('refreshOptions', {
sidePagination: 'client' //改为客户端分页
});
$("#tablelist").bootstrapTable('refresh', {
url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
});Bootstrap table的基本使用总结的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件：一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table Examples
The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...
随机推荐
- ddmlib问题总结——同步获取设备信息
通过IDevice.getProperty(String name)得到响应的设备属性.在实际的使用过程中发现,我的manufacturer总是获取不到,为null(获取代码如下),而剩下的属性都可以 ...
- HDU4267 树状数组
题意描述: 给定一个数组,有两种操作: 操作一:a b k c 对于区间a~b之间的元素如果下标满足(i-a)%k=0则给元素i加上c 操作二:a 查询下标为a的元素当前值 解题思路 ...
- Django 2.1版本与Django 1.8.3的一些区别（转）
Django 2.1版本与Django 1.8.3的一些区别 我在刚开始学习的时候使用的Django版本是1.8.3的,后来在安装其它软件的时候,可能需要2.1的版本,自动帮我更新了Djang ...
- centos7 firewall 相关
1.centos 6 是iptables, 7 开始就以firewalld代替iptables; 2.systemctl stop firewalld.service 停 systemctl sta ...
- SOA和Web Servcie的区别
soa(Service-Oriented Architecture)是服务对服务的,web service是服务对客户端的. 都提供服务. 服务接口都是基于开发的. 服务接口和服务的具体实现都是分 ...
- UOJ.386.[UNR #3]鸽子固定器(贪心 链表)
题目链接 \(Description\) 选最多\(m\)个物品,使得它们的\((\sum vi)^{dv}-(s_{max}-s_{min})^{du}\)最大. \(Solution\) 先把物品 ...
- BZOJ.4514.[SDOI2016]数字配对(费用流SPFA 二分图)
BZOJ 洛谷 \(Solution\) 很显然的建二分图后跑最大费用流,但有个问题是一个数是只能用一次的,这样二分图两部分都有这个数. 那么就用两倍的.如果\(i\)可以向\(j'\)连边,\(j\ ...
- Codeforces 576D Flights for Regular Customers 矩阵快速幂+DP
题意: 给一个$n$点$m$边的连通图 每个边有一个权值$d$ 当且仅当当前走过的步数$\ge d$时 才可以走这条边 问从节点$1$到节点$n$的最短路 好神的一道题 直接写做法喽 首先我们对边按$ ...
- 使用 IntraWeb (16) - 基本控件之 TIWList、TIWListbox、TIWComboBox、TIWOrderedListbox
TIWList //列表; 它对应 Html 中的 OL.LI(某些选项下会用表格模拟); TIWListbox 和 TIWComboBox 则对应 Html 在的 Option TIWListbox ...
- MikroTik RouterOS 5.x使用HunterTik 2.3.1进行破解
一.加载光驱: 二.一路回车: 三.说明: 1.可以不安装Debian内核,但如果在无缝升级到6.6的版本,此项就一定要选择. 2.6版本的破解必须小于等于1G的空间,不然无法破解成功,亲测有效,如果 ...