注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

表格组件神器:BootStrap Table  

2016-10-23 13:14:04|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
之前的文章已经谈及过了Spry框架,这次就来讲下Bootstrap框架。有关流式布局的bootstrap框架,相信大家都用过,但这次所用的BootStrap Table其实严格意义上来说,只是它的一个组件,是依赖Bootstrap的。所以首先需要添加Bootstrap的引用。Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到。而Bootstrap Table则去官网https://github.com/wenzhixin/bootstrap-table下载即可。此外还有一个前提,Bootstrap又依赖于JQuery,所以最先还得引入JQuery库。

<!--1、Jquery组件引用-->
<script src="jquery-1.10.2.js"></script>
<!--2、bootstrap组件引用-->
<script src="bootstrap/bootstrap.js"></script>
<!--3、bootstrap table组件以及中文包的引用-->
<script src="bootstrap-table/bootstrap-table.js"></script>

在引入需要的文件之后,再来就是定义一个空的table,如上的  <table id="..."></table> 代码。

<table id="sites"> </table>

当然如果需要引入风格,也可以自行引入如下:

<link href="bootstrap-table.css" rel="stylesheet" />

另外,如果不引入中文包的话,相关的提示都会是英文,下面就是引入中文语言包。

<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

再来就是提供下数据json。

[{
"id": "1",
"name": "我就上乐乐吧",
"url": "593668.com"
},
{
"id": "2",
"name": "爱上吃喝",
"url": "237h.com"
}
]

最后就是让js来获取json来填充表格数据了。

<script>
$('#sites').bootstrapTable({
url: 'data.json', //后台数据的URL
method: 'get', //请求方式
//toolbar: '#toolbar', //工具按钮用哪个容器
//striped: true, //是否显示行间隔色
//cache: false, //是否使用缓存,默认为true
//sortable: false, //是否启用排序
//sortOrder: "asc", //排序方式
//queryParams: null, //传递参数,这个需要自行去定义一个函数处理
//sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
//pagination: true, //是否显示分页(*)
//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: [
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名称'
}, {
field: 'url',
title: '地址'
} ]
});
</script>

结果页面如下:
表格组件神器:BootStrap Table - sinsunson - 天朝布衣田中码农参上
是不是很简单,当然还有很多其它功能这里并没有深入,上面的代码注释基本上就可以说明了。这里要强调一下:
如果服务端分页的话,那么就要将sidePagination: "client"改为"server",并在返回的结果集中加下两个参数且必须为total【总记录条数】和rows【当前页记录数】,不然分页就会有问题,而后台接收的分页大小【limit】和偏移值【offset】的参数值也是固定的,不能随便更改,要不然也是接收不到前端传来的参数的。
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017