Bootstrap Table JS组件使用教程详解
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本教程详细介绍了如何使用Bootstrap Table JavaScript插件来增强HTML表格的功能和用户体验，包括基本用法、配置选项及高级功能。
JS组件Bootstrap Table使用方法详解
最近客户提出了优化原有管理系统的请求，希望能通过手机也能很好地展示系统内容。我们考虑了两种方案：
a) 保留原有的页面设计，并为手机用户重新设计一套界面，当用户访问m.zhy.com时显示手机版页面，而PC设备则访问www.zhy.com。
b) 使用Bootstrap框架替换现有页面，使网站自动适应手机、平板和PC等不同设备的屏幕大小。考虑到时间和成本因素，我们选择了方案b进行项目优化。
一、效果展示
二、BootStrap table简介
bootstrap-table 是一个轻量级的表格插件，它能通过AJAX获取JSON格式的数据，并且分页及数据填充功能强大，支持国际化设置等功能。
三、使用方法
1. 引入js和css文件：
```html
```
2. 表格的数据填充有两种方式：通过table的data-url属性指定数据源或在JavaScript初始化表格时指定url来获取数据。第二种方法处理复杂数据更为灵活，通常采用这种方式进行表单数据填充。
3. 初始化Table：
```javascript
$(function () {
var oTableInit = new TableInit();
oTableInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化表格设置
oTableInit.Init = function () {
$(#tradeList).bootstrapTable({
url: /VenderManager/TradeList, //请求后台的URL（*）
method: post,
toolbar: #toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false,
pagination: true, //是否显示分页（*）
sortable: false,
sortOrder: asc,
queryParams:oTableInit.queryParams,//传递参数（*）
sidePagination:server,//服务端分页
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 50, //每页的记录行数（*）
pageList:[10,25,50],//可供选择的每页的行数（*）
strictSearch:true,
clickToSelect: true,//是否启用点击选中行
height:460,//高度
uniqueId:id, //每一行的唯一标识，一般为主键列
cardView:false, //是否显示详细视图
detailView:false,//是否显示父子表
columns:[{field:id,title:序号},
{field:liushuiid, title: 交易编号},...]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp ={limit:params.limit,offset:params.offset,
sdate : $(#stratTime).val(),
edate : $(#endTime).val(),...
}
return temp;
};
return oTableInit;
};
```
4. 后端获取数据：
通过servlet或者springMvc Controller来处理前端请求的数据，返回JSON格式的表格需要的信息。
5. 分页设置
使用分页时，服务端响应的数据必须包括rows和total两个字段。在前端代码中定义查询参数，在后端接收并解析这些参数以实现分页功能。
以上就是关于Bootstrap Table使用的介绍与示例，希望对大家有所帮助。
全部评论 (0)
