官方网站:
http://bootstrap-table.wenzhixin.net.cn/
参考文档:http://issues.wenzhixin.net.cn/bootstrap-table/index.html
中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table

在开发项目的时候,发现了一款JS组件系列——表格组件神器
,官方文档也比较简单,总结了一些常遇到的问题

一:实现一个简单的表格和分页

图片.png
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head> <body>
<table id="mytab" class="table table-hover"></table>
<script>
$('#mytab').bootstrapTable({
url: 'data1.json',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
columns: [{
field: 'id',
title: '登录名'
},
{
field: 'name',
title: '昵称'
},
{
field: 'price',
title: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
}, ]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
</script>
</body> </html>

json数据:

    [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
},
{
"id": 11,
"name": "Item 11",
"price": "$11"
},
{
"id": 12,
"name": "Item 12",
"price": "$12"
},
{
"id": 13,
"name": "Item 13",
"price": "$13"
},
{
"id": 14,
"name": "Item 14",
"price": "$14"
},
{
"id": 15,
"name": "Item 15",
"price": "$15"
},
{
"id": 16,
"name": "Item 16",
"price": "$16"
},
{
"id": 17,
"name": "Item 17",
"price": "$17"
},
{
"id": 18,
"name": "Item 18",
"price": "$18"
},
{
"id": 19,
"name": "Item 19",
"price": "$19"
},
{
"id": 20,
"name": "Item 20",
"price": "$20"
}
]

二:说一说BootstrapTable的属性一览表


url: '/Home/GetDepartment', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
}]

三:bootstrap-table如何设置首行变色,其他行不变色

其实很简单,在代码之中找到首行对应的代码,然后添加属性即可

图片.png
#mytab  thead{background: #5488c4;}

四:添加删除数据之后表格自动刷新加载

$table.bootstrapTable('refresh');

五:如何设置bootstrap-table插件的隔行变色的颜色

图片.png

代码样式如下

<style>
#mytab tr:nth-child(even){
background:#f4f8fb;
}
</style>

BootstrapTable的使用教程的更多相关文章

  1. Boostrap bootstrap-table插件使用教程

    bootstrap table 简介及特性 简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...

  2. bootstrap-table教程演示

    Bootstrap Admin 效果展示 Table of contents Create Remove Update Export Tree Create 相关插件 bootstrap-valida ...

  3. 表格插件BootStrap-Table使用教程

    Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能. 官网https://bootstrap-tab ...

  4. BootstrapTable的简单使用教程

    1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="boo ...

  5. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

  6. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  7. bootstrapTable

    一个详细的教程 table参数 bootstrap table使用总结 BootstrapTable使用实例 事件event 事件函数的用法: 方法1 $('#table').bootstrapTab ...

  8. bootstrapTable 学习使用

    Bootstrap离线API Bootstrap Table 离线API <input type="button" id="btn_searcher" v ...

  9. bootstrap table教程--后台数据绑定、特殊列处理、排序

    上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...

随机推荐

  1. Chome 浏览器,您的连接不是私密连接

    网上搜索了半天,最后才发现是去广告插件/软件的原因, 关掉广告插件/者软件,或者重新导入证书, 就可以了.

  2. "C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE 浏览器打开时全屏模式

    "C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE浏览器打开时全屏模式

  3. java与javax的区别分析

    Java是一种受C语言影响的编程语言.Java和Javax本质上是与Java编程语言的上下文一起使用的包.实际上Java和Javax没有区别.这只是不同的名字. Java是一种编程语言,受到C语言的影 ...

  4. 微信支付v2开发(7) 告警通知

    本文介绍微信支付中如何获得告警通知. 一.告警通知 为了及时通知商户异常,提高商户在微信平台的服务质量.微信后台会向商户推送告警通知,包括发货延迟.调用失败.通知失败等情况,通知的地址是商户在申请支付 ...

  5. 添加asp.net mvc到现有的asp.net web form 应用程序

    前言 asp.net mvc的前一版本为asp.net web Form(Asp.net mvc之前称为asp.net),其第一个版本与2002年年初发布.asp.net web form 属于.ne ...

  6. DE1-SOC调试linux应用程序

    参考http://www.alterawiki.com/wiki/SoCEDSGettingStarted#Getting_Started_with_Linux_Application_Debuggi ...

  7. [React] Use React.cloneElement to Modify and Add Additional Properties to React Children

    In this lesson we'll show how to use React.cloneElement to add additional properties to the children ...

  8. tp5 thinkphp5 index.php隐藏 iis 重写 伪静态

    面临的问题如下: 网上找了个源码,tp5的,公司服务器是iis,源码是隐藏index.php使用了路由,iis默认去找那个路径的文件了,找不到,所以报错了 如果没有iis没有安装"url重写 ...

  9. windows2003 IIS6下安装ISAPI_Rewrite3破解版

    摘抄的https://jingyan.baidu.com/article/ff42efa931a2c0c19e220298.html 非常感谢,我是怕百度经验有一天消失了,以防万一 iis6 ISAP ...

  10. 【48.47%】【POJ 2524】Ubiquitous Religions

    Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 32364 Accepted: 15685 Description There a ...