详细教程：http://www.itxst.com/bootstrap-table-events/fbijmr36.html比官方详细 傻瓜式教程 直接复制过来就可以
在th标签里添加
data-align="center" th和td居中对齐
data-sortable="true" 点击th表头排序
data-checkbox="true" 多选
data-radio="true" 单选
给表格添加事件
data-formatter="actionFormatter" 和
data-events="actionEvents"
在table标签里添加
data-mobile-responsive="true"
data-show-export="true"
data-height="450" 设置表格高度
data-click-to-select="true" 单机td 选中 radio或checked
data-formatter 和 data-events的用法
直接看代码一目了然
html：
<th data-field="" data-align="center" data-sortable="true" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
js：
function actionFormatter(value, row, index) {
return '<button class="btn btn-white btn-sm update" ><i class="glyphicon glyphicon-pencil"></i></button> '
+ '<button class="btn btn-danger btn-sm delete"><i class="glyphicon glyphicon-trash"></i></button>';
}
//表格 - 操作 - 事件
window.actionEvents = {
'click .update': function(e, value, row, index) {
//修改操作
alert(value+","+row+","+index);
},
'click .delete' : function(e, value, row, index) {
//删除操作
}
}
完整demo：
引入依赖：
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="css/bootstrap-table.min.css"> -->
//显示可排序箭头
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
<script src="js/tableExport.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<!-- 必须添加否则不显示导出按钮 -->
<script src="js/bootstrap-table-export.js"></script>
html：
<div class="container">
<!-- <div>
<label>Cells: </label><input id="cells" type="text" placeholder="Cells" value="5">
<label>Rows: </label><input id="rows" type="text" placeholder="Rows" value="100">
<button id="build" class="btn btn-default">Build</button>
</div> -->
<div class="btn-group hidden-xs" style="position: absolute; margin-top: 10px;">
<!-- 添加-->
<button type="button" title="录入" class="btn btn-primary" onclick="openModal_cw()">
<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
</button>
<!-- 修改 -->
<button type="button" title="修改编辑" class="btn" style="background-color: #23c6c8;color: white;"
onclick="updateMsg_cw()">
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<!-- 删除 -->
<button type="button" title="删除" class="btn btn-danger" onclick="delMsg_cw()">
<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
</button>
<!-- 导出 -->
<div class="btn-group" role="group">
<button type="button" title="导出excel"
class="btn btn-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="margin-right: -110px;">
<li><a href="javascript:void(0)" style=" color:#337ab7"
onclick="downCheck_cw();">导出当前选中</a></li>
<li><a href="javascript:void(0)" style=" color:#337ab7"
onclick="downAll_cw();">导出所有数据</a></li>
</ul>
</div>
</div>
<table id="table" class="data_rkmx" data-height="400">
<thead>
<tr>
<th class="cw_checkbox" data-checkbox="true"></th>
<th data-field="id" data-align="center" data-sortable="true">id</th>
<th data-field="storeName" data-align="center" data-sortable="true">所属仓库</th>
<th data-field="positionCode" data-align="center" data-sortable="true">储位代码</th>
<th data-field="positionName" data-align="center" data-sortable="true">储位名称</th>
<th data-field="attributeName" data-align="center" data-sortable="true">储位属性</th>
<th data-field="isUseable" data-align="center" data-sortable="true">是否可用</th>
<th data-field="" data-align="center" data-sortable="true" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
<!-- <th data-field="button">操作</th> -->
</tr>
</thead>
</table>
</div>
js：
<script>
$('.data_rkmx').bootstrapTable({
url: "http://223.244.87.50:90/wdtmom/queryPoInfo",
// url:"http://192.168.0.103:90/wdtmom/queryPoInfo",
search: true,//搜索框
showRefresh: true,//刷新按钮
// strictSearch: true,//是否全局匹配,false模糊匹配 默认false
pagination: true,//分页
buttonsclass: 'info',
showToggle: true,//文本切换
clickToSelect: true, //是否启用点击选中行
cardView: true, //是否显示详细视图
// detailView: true, //是否显示父子表
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
buttonsAlign:"right", //按钮位置
// sortName: 'sn', // 要排序的字段
// //striped: true, /* 间行显示*/
//行单机事件
onClickRow:function(row, $element,field){
if($('.info')){
$('.info').removeClass('info');//移除class
}
$($element).addClass('info');//添加class
// var i = $element.data('index');//可通过此参数获取当前行号
var id = $element.find("td").eq(1).text();//当前行的id
//模态框事件
},
// buttonsAlign:"left",
showExport: true,//导出按钮
exportTypes: ['json', 'txt', 'excel'],
showExport: phoneOrPc(), //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)
exportDataType: "all", //basic', 'all', 'selected'.
exportOptions:{
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: '商品数据表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},
onMsoNumberFormat: doOnMsoNumberFormat,
onCellHtmlData: DoOnCellHtmlData,
// responseHandler:responseHandler,//参数
showColumns: true,//选择显示
toolbar: '#data_rkmxToolbar',//按钮组id
// iconSize: 'outline', //图标大小 默认 、lg、sm
//图标默认 也可自定义
// icons: {
// refresh: 'glyphicon-repeat',
// toggle: 'glyphicon-list-alt',
// columns: 'glyphicon-list'
// }
});
// value: 所在collumn的当前显示值，
// row:整个行的数据 ，对象化，可通过.获取
// 表格-操作 - 格式化
function actionFormatter(value, row, index) {
return '<i class="glyphicon glyphicon-pencil update" style="color:#FF8604" title="修改" data-toggle="tooltip" data-placement="top"></i>'
//'<button class="btn btn-white btn-sm update" title="修改" data-toggle="tooltip" data-placement="top"><i class="glyphicon glyphicon-pencil"></i></button> '
// + '<button class="btn btn-danger btn-sm" title="删除" data-toggle="tooltip" data-placement="top"><i class="glyphicon glyphicon-trash"></i></button>'
+ ' <i class="glyphicon glyphicon-trash" style="color:red" title="删除" data-toggle="tooltip" data-placement="top"></i>';
// + '<select class="form-control">'
// + '<option>1</option>'
// + '</select>';
}
//表格 - 操作 - 事件
window.actionEvents = {
'click .update': function(e, value, row, index) {
//修改操作
alert($(this).parent().parent().find("td").eq(1).text());
// $(this).parent().parent().find("td").each(function(){
// alert(1);
// })
},
'click .delete' : function(e, value, row, index) {
//删除操作
}
}
//数字
function doOnMsoNumberFormat(cell, row, col){
var result = "";
if (row > 0 && col == 0){
result = "\\@";
}
return result;
}
//处理导出内容,这个方法可以自定义某一行、某一列、甚至某个单元格的内容,也就是将其值设置为自己想要的内容
function DoOnCellHtmlData(cell, row, col, data){
if(row == 0){
return data;
}
//由于备注列超过6个字的话,通过span标签处理只显示前面6个字,如果直接导出的话会导致内容不完整,因此要将携带完整内容的span标签中title属性的值替换
if(col == 4 || col ==11 || col == 7){
var spanObj = $(data);//将带 <span title="val"></span> 标签的字符串转换为jQuery对象
var title = spanObj.attr("title");//读取<span title="val"></span>中title属性的值
//var span = cell[0].firstElementChild;//读取cell数组中的第一个值下的第一个元素
if(typeof(title) != 'undefined'){
return title;
}
}
return data;
}
/*判断终端是手机还是电脑--用于判断文件是否导出(电脑需要导出)*/
function phoneOrPc(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
return false;
} else {
return true;
}
}
</script>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
