bootstrap-table使用总结
2017-08-16 17:54
597 查看
1、下载:
https://github.com/wenzhixin/bootstrap-table
2、文档:
http://bootstrap-table.wenzhixin.NET.cn/zh-cn/documentation/
3、引用:
[html] viewplain copy
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
注意:最后一个是一些提醒文字,如果有引用这个js则会以中文提示,如果没有则以英文提示。
4、基本用法:
html里:[html] view
plain copy
<table id="table"></table>
js里:
[javascript] view
plain copy
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
这个data也可以换成url:
[javascript] view
plain copy
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
5、引入fonts:
一些图标需要用到bootstrap里面的文件,要从下载的bootstrap包里面拷贝过来放到对应的目录(看错误提醒)。但是只放进去是访问不了的,因为他不是普通的文件,所以要设置。
进入iis管理器,找到“MIME类型”,双击进去,在右边菜单点击“添加”,分别添加以下类型:
[html] view
plain copy
.woff
application/x-font-woff
.woff2
application/x-font-woff
再刷新页面就可以加载fonts里面这些文件了。
6、定制组件
[javascript] viewplain copy
(function () {
function init(table,url,params,titles,hasCheckbox,toolbar) {
$(table).bootstrapTable({
url: url, //请求后台的URL(*)
method: 'post', //请求方式(*)
toolbar: toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //传递参数(*),这里应该返回一个object,即形如{param1:val1,param2:val2}
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 20, //每页的记录行数(*)
pageList: [20, 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: createCols(params,titles,hasCheckbox),
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
}
function createCols(params,titles,hasCheckbox) {
if(params.length!=titles.length)
return null;
var arr = [];
if(hasCheckbox)
{
var objc = {};
objc.checkbox = true;
arr.push(objc);
}
for(var i = 0;i<params.length;i++)
{
var obj = {};
obj.field = params[i];
obj.title = titles[i];
arr.push(obj);
}
return arr;
}
//可发送给服务端的参数:limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')
function queryParams(params) {
return { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset //页码
//name: $("#txt_name").val()//关键字查询
};
}
// 传'#table'
createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {
init(table,url,params,titles,hasCheckbox,toolbar);
}
})();
1、调用:
[javascript] view
plain copy
createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');
2、模块:
注意,这些只要添加上一行代码就会自动显示的:
[html] view
plain copy
pagination 显示分页
search 搜索功能
showColumns 控制显示哪些列的按钮
showRefresh 刷新按钮
showToggle 详细视图和列表视图切换按钮
但是这个不会:
[html] view
plain copy
toolbar
这个toolbar会关联到我们填的一个元素,但是他并不会自动创建所有菜单,而是我们要创建好菜单,他只不过把这个菜单放到合适的位置,实现这些菜单的功能还需要我们自己去做。toolbar如下:
[html] view
plain copy
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
3、sidePagination
这个是选择服务端或者客户端分页,客户端则填'client',服务端则填'server',他们的数据结构是不同的。
这是客户端分页的数据结构:
[html] view
plain copy
[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
}
]
这是服务端分页的数据结构:
[html] view
plain copy
{
"total": 200,
"rows": [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
}
]
}
这是因为客户端来分页的话,他直接根据数据总量进行判断要分成多少页,而服务端的话就需要返回一个total给他,因为服务端返回给的数据是一个片段,他没办法根据这个片段来计算多少页。
4、参数上传
我们知道,当我们对table设置一个url的时候,他不仅是请求这个url,他还会带一些参数上来,他到底带来了什么参数?
我们来一个最简单的测试一下:
[javascript] view
plain copy
$('#table').bootstrapTable({
striped: true,
pagination:true,
sidePagination:'server',
url:'/xx/yy',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
});
这里我们简单的初始化了一个bootstrap-table,数据来源我们指定了url,有个参数叫method,默认是'get',也可以设为'post',如果实际上线最好设为'post',但是这里我们就用默认的好了,可以直接在浏览器的控制台看到他请求的参数。
我们可以看到带了一些参数上来
(1)order=asc表示排序是升序排序,这个我们可以在参数里面设置:sortOrder: "asc/desc"(两种选一种)
(2)offset=0表示从数据从哪个row开始,简单的说从第几行数据开始
(3)limit=10表示选取多少个数据,也就是一页有多少条数据
2,3跟参数pageNumber和pageSize是紧密关联的。
pageSize对应的就是limit,因此改变pageSize就改变了limit;
pageNumber结合pageSize可以算出offset。
比如pageNumber=1,pageSize=30,那么offset=0,limit=30;
比如pageNumber=2,pageSize=30,那么offset=30,limit=30。
他不传第几页上来,而是传从第几行开始,选取多少行,这样一个数据。
注意:pageNumber从1开始而非从0开始,但是offset是从0开始的。
如果我尝试设置pageNumber:0,pageSize:30我们会发现offset=-30,limit=30,这是不对的。
5、参数的查看、修改
那么我们可以直接查看这些参数以及修改吗?答案是可以的。
有个原始参数就是用来配置这个:
[javascript] view
plain copy
queryParams:testQParams
创建函数:
[javascript] view
plain copy
function testQParams(params) {
alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数
}
我们当然可以修改或者添加参数:
[javascript] view
plain copy
function testQParams(params) {
return {
limit:params.limit,
offset:params.offset,
order:params.order,
abc:123,
def:456
}
}
有几点要注意:
1、我们当然可以修改limit、offset这些参数,但是不建议在这里改,我们可以用上面这种方式还给他赋值;
2、虽然没有改动他,我们也不要丢了,如果在这里没写参数就丢了,传递的参数会以这里的为准;
3、我们可以增加新的参数。
7、显示图片
字段通常是一个地址,那么我们要显示图片应该使用formatter:[javascript] view
plain copy
{
field: 'thumb_img',
title: '主图',
align: 'center',
formatter:function (value,row,index) {
return '<img src='+value+' width=50 class="img-rounded" >';
}
}
可以直接定义宽度,图片会自动进行缩放。
8、行内编辑功能
<1>bootstrap-editable
需要一个bootstrap插件叫做bootstrap-editable,现在改名叫做x-editable了,可以适用不同的框架。
地址:https://github.com/vitalets/x-editable
下载下来之后,找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。
<2>bootstrap-table-editable
这是一个bootstrap-table的插件(插件的插件),这个插件呢就在我们下载的bootstrap-table包里,路径是dist/extensions/editable
把他拷到我们的对应目录下即可
<3>引入
[html] view
plain copy
<link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet">
<script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script>
<script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>
注意他们跟jquery、bootstrap、bootstrap-table的依赖关系,所以要放在他们的后面。
<4>使用1:
在列定义里面加上editable:true,比如:
[html] view
plain copy
field:'addr',
title:'地址',
editable:true,
就会变成可编辑状态了
<5>使用2:
编辑完成我们要添加一个回调
在bootstrapTable顶级的属性定义里面,添加一个回调函数:
[javascript] view
plain copy
onEditableSave:function (field,row,oldValue,$el) {
//alert('保存addr='+row.addr+' id='+row.itemid);
}
这里我们可以看到当编辑完保存的时候就会调用到这个函数,在row里面有所有当前行的信息,那么我们可以通过把这个信息用ajax传递到服务器保存起来。
编辑功能完成。
<6>保存验证+ajax保存确认+取消保存
我们在实际开发当中,经常需要这样的功能:
(1)验证用户的输入是否正确;
(2)如果用户输入不正确,就不要在页面上显示了,直接显示保存不了;
(3)如果用户输入正确,通过ajax请求保存到后台;
(4)如果保存到后台失败,应该返回前端失败的消息,前端的内容回退到保存前的状态;
(5)如果保存成功,前端也做相应的显示样式调整及状态确定。
在上面“使用1”及“使用2”当中,当点击保存的时候,在save函数里验证不起作用,你再验证他也保存进去了。所以验证另有地方。
应该这样做:
(1)把editable:true改为:
[javascript] view
plain copy
validate:function (value) {
value = $.trim(value);
if (!value)
{
return '必须填入一个网址,不能放空!';
}
if (!checkUrl(value))
{
return '输入的不是一个合法的网址!';
}
}
另外,在这个函数里,要取的row数据可以这样:
[javascript] view
plain copy
var data = $('#table').bootstrapTable('getData');
var index = $(this).parents('tr').data('index');
console.log(data[index]);
这是因为这个$(this)可以指向这个当前单元格
这样输入就有验证功能,return一个字符串他会自动不保存进去,而显示这个字符串的提示。
(2)把onEditableSave改为:
[javascript] view
plain copy
onEditableSave:function (field,row,oldValue,$el) {
// 测试证明oldValue取到的是undefined
$.post('xxx/yyy')
.done(function (result) {
//在这里解析result
if(保存成功)
{
// 页面提示保存成功
}else
{
// 页面提示保存失败
// buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段,就是为了在必要的时候恢复数据
$el.text(row.buy_addr_bak);
}
// 不管保存成功还是失败,已经不是编辑状态,把加粗去掉
$el.removeClass('editable-unsaved');
});
}
另外,在这个函数里,如果要取到row数据可以这样(虽然这里没有必要,参数里已经有了):
[javascript] view
plain copy
var data = $('#table').bootstrapTable('getData');
var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents
console.log(data[index]);
9、自动换行
在给table加上样式:[html] view
plain copy
style="word-break:break-all; word-wrap:break-all;"
10、父子表
功能:点击行首的加号,下拉展开一个子表<1>在父表的属性里添加
[javascript] view
plain copy
detailView:true
<2>添加回调函数
[javascript] view
plain copy
onExpandRow:function (index,row,$detail) {
initSubTable(index,row,$detail);
}
当点击行首的加号,将会触发这个回调函数,这个回调函数会再去调用执行函数。
<3>执行函数
[javascript] view
plain copy
function initSubTable(index,row,$detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url:'',
method:'post',
queryParams:{strParentID:parentid},
ajaxOptions:{strParentID:parentid},
clickToSelect:true,
detailView:true,
uniqueId:"MENU_ID",
pageSize:10,
pageList:[10,25],
columns:[
{
filed:'from',
title:'from'
},
{
field:'url',
title:'url'
},
{
field:'to',
title:'to'
}
],
onExpandRow:function (index,row,$Subdetail) {
initSubTable(index,row,$Subdetail);
}
});
}
注意,这里做了一个递归,即子表里面还可以展开孙表,我们也可以不需要,去掉就可以了。
参考文章:
http://www.cnblogs.com/landeanfen/p/4976838.html
相关文章推荐
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- bootstrap_table使用总结
- bootstrap-table使用总结
- BootStrap-table-contextmenu使用过程的一些总结
- Bootstrap Table使用心得总结
- bootstrap table使用总结
- bootstrap table使用总结
- bootstrap-table使用总结
- Bootstrap Table使用心得总结
- bootstrap-table 前端使用总结
- bootstrap table使用总结
- Bootstrap table使用方法总结
- Bootstrap table的一些简单使用总结
- Table边框使用总结
- GTA项目 三, 使用 bootstrap table展示界面,使得data和UI分离
- [Cocos2d-x + c++]Tableview使用总结
- bootstrap-table 插件的使用
- bootstrap使用总结
- TABLE边框使用总结1
- Table边框使用总结 ,只显示你要显示的边框