bootstrap的简单用法
一 、bootstramp 的事件。
1、 重新刷新页面
选项有修改：
var a = $('#table').bootstrapTable('refresh', {
query : {
billsName : $("#billsName").val()
}
});
选项无修改：$('#table').bootstrapTable('refresh');
2、清空table表里面的数据。
$('#table').bootstrapTable('removeAll');
3、选择一条数据
Var dataModel=$('#table').bootstrapTable('getRowByUniqueId', uuid);
4 、隐藏列
$('#table').bootstrapTable('hideColumn', 'audit');
5、显示某一列
$('#table').bootstrapTable('showColumn', 'audit');
6、获取选中行，返回数组
var selectedData = $('#table').bootstrapTable('getAllSelections');
7、获取当前table页面的所有行
var allData = $('#table').bootstrapTable('getData');
8、重新加载数据
$('#excelTable').bootstrapTable('load', selectedData);
9、填充数据
$("#excelTable").bootstrapTable('append',selectedData[j]);
10、通过唯一标识删除数据
$('#addPartstable').bootstrapTable('removeByUniqueId', uuid);
11、处理表头和表头不能对齐
$(window).resize(function() {
$('#table').bootstrapTable('resetView');
});
12、批量删除前端数据
var ids = getSelectRowsId();
/* 删除前端数据 */
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
二、bootstramp的基本模式，和基本的选择项。
$('#table').bootstrapTable({
method : 'get',//请求方式 post/get
pagination:true, //是否允许分页。
url : createUrl('/partstock/queryByStorage'),//请求的路径
height : screen.availHeight-300, //高度
striped : true, //是否有网格线
pageSize : 10,//每页的默认数据。
uniqueId : 'partUuid',//唯一的标识
toolbar : '#toolbar', //工具按钮
exportDataType : 'selected', 导出类型
/*search : true, //是否带有检索框
searchOnEnterKey : true, //是否允许回车查询
formatSearch : function() {
return '备件名称或编号';//搜索框里面的提示文字
},*/
formatRecordsPerPage : formatRecordsPerPage, // 公用方法common.js中 翻页工具条
formatShowingRows : formatShowingRows, // 公用方法common.js中 翻页工具条
sidePagination : 'server', // 设置为服务器端分页
Server:服务器端分页，client 前端分页。
显示的列
columns : [{
field : "state",
checkbox : true // 复选框
}, {
title : '序号', //显示的名称
width : '50', //宽度
align : 'center', //文字位置
formatter : orderFormatter //格式化函数。
}, {
visible : false, // 隐藏域 //是否可见
field : 'partUuid', //所对应的返回集合里面的字段
title : 'uuid',
align : 'center',
width : '50',
valign : 'bottom'
}, {
field : 'storageName',
title : '仓库',
align : 'center',
width : '50',
valign : 'bottom'
} ],
//当以pagemodel 返回结果集的时候，要加上下面的代码。
//当以jsonArray 返回时，不需要添加下面的代码。
responseHandler : function(res) {
return {
total : res.totalCount,
rows : res.records
};
}
});
//formatter函数样式。 Value：当前字段的值,Row当前行所有的数据，index 当前行行号
function showStorgeLocationDatail(value, row, index) {
//console.log(JSON.stringify(row));
return value;
}
//需要添加隐藏域或输入控件的formatter函数。
function numberFormatter(value, row, index) {
var editFlag=$('#isEdit').val(); //编辑标识，表明是编辑页面，否则为新增页面
var count=row.count;
if(row.addNum&&row.addNum!=null){
count=row.addNum;
}
if(null!=editFlag && undefined!=editFlag){
return ''" onchange = "MathTotalPrice(' + index + ',\'' + row.uuid + '\')" value="'+count+'" />';
}
return ''" onchange = "MathTotalPrice(' + index + ',\'' + row.uuid + '\')" value="'+count+'"/>';
}
三、bootstramp 导出excel
function exportData() {
var selectedData = $('#table').bootstrapTable('getAllSelections');
if (selectedData.length > 0) {
$('#excelTable').bootstrapTable('load', selectedData);
$('#excelTable').tableExport({
type : 'excel',
fileName : '备件列表'
});
} else {
var allData = $('#table').bootstrapTable('getData');
if(allData.length == 0){
siping.alert(0, "当前页面没有数据");
return;
}
siping.confirm("是否导出当前页面全部数据",function(){
$('#excelTable').bootstrapTable('load', allData);
$('#excelTable').tableExport({
type : 'excel',
fileName : '备件列表'
});
})
}
}