bootstrap table 单击获取当前行号

来源：互联网发布：百世快递软件编辑：程序博客网时间：2024/06/04 18:57

主要方法是

//单击事件获取当前行号

$('#bootstrapTable').on("click-row.bs.table",function(e, row, $element) {

var index= $element.data('index');

});

示例代码

<!DOCTYPE html>
<html>
<head>
<title>getSelections</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/examples.css">
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/jquery.min.js"></script>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/ga.js"></script>
</head>
<body>
<div class="container">
<h1>获取bootstrap table 当前所在行号</h1>

<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460"
data-click-to-select="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true" data-visible="false" ></th>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
var data =[
{
"id": 0,
"name": "张国荣",
"price": "$0"
},
{
"id": 1,
"name": "周杰伦",
"price": "$1"
},
{
"id": 2,
"name": "玛蒂娜",
"price": "$2"
},
{
"id": 3,
"name": "张飞",
"price": "$3"
},
{
"id": 4,
"name": "关羽",
"price": "$4"
},
{
"id": 5,
"name": "刘翔",
"price": "$5"
},
{
"id": 6,
"name": "史泰龙",
"price": "$6"
},
{
"id": 7,
"name": "李小龙",
"price": "$7"
},
{
"id": 8,
"name": "奔驰",
"price": "$8"
},
{
"id": 9,
"name": "奥迪",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
},
{
"id": 11,
"name": "Item 11",
"price": "$11"
},
{
"id": 12,
"name": "Item 12",
"price": "$12"
},
{
"id": 13,
"name": "Item 13",
"price": "$13"
},
{
"id": 14,
"name": "Item 14",
"price": "$14"
},
{
"id": 15,
"name": "Item 15",
"price": "$15"
},
{
"id": 16,
"name": "Item 16",
"price": "$16"
},
{
"id": 17,
"name": "Item 17",
"price": "$17"
},
{
"id": 18,
"name": "Item 18",
"price": "$18"
},
{
"id": 19,
"name": "Item 19",
"price": "$19"
},
{
"id": 20,
"name": "Item 20",
"price": "$20"
}
];

$(function () {
$("#table").bootstrapTable("load",data);
$('#table').on("click-row.bs.table",function(e, row, $element) {
var index= $element.data('index');
alert(index);
});
});

</script>
</body>
</html>

1 0