暂时够用,不够用再补充 T_T
script:
<link rel="stylesheet" href="lib/bootstrap.min.css">
<!-- table css-->
<link rel="stylesheet" href="lib/bootstrap-table.css">
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<!--table js-->
<script src="lib/bootstrap-table.js"></script>
<script>
$(function () {
var data = [{
uid: "7791",
name: "keenleung1",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7792",
name: "keenleung2",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7793",
name: "keenleung3",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7794",
name: "keenleung4",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7795",
name: "keenleung5",
age: "26",
height: "165",
description: "描述"
},
];
$('#table').bootstrapTable('load', data);
var $result = $('#eventsResult');
// 选择一行
$('#table').on('click-row.bs.table', function (e, row, $element) {
alert(JSON.stringify(row.uid));
});
});
function actionFormatter(value, row, index) {
return [
"<button class='btn btn-primary like'>选取</button>",
"<button class='btn btn-default unlike'>取消</button>",
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert(JSON.stringify(row));
return false;
},
'click .unlike': function (e, value, row, index) {
alert("unlike click");
return false;
},
};
</script>
<style type="text/css"></style>
<script type="text/javascript"></script>
html:
<div class="alert alert-success" id="eventsResult">
Here is the result of event.
</div>
<table id="table" data-toggle="table">
<thead>
<tr>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
<th data-field="height">身高</th>
<th data-field="description">描述</th>
<th class="text-left" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
</tr>
</thead>
</table>
官网案例:http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/