<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/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.js"></script>-->
<!--<script src="js/bootstrap-table-export.js"></script>-->
<link rel="stylesheet" type="text/css" href="css1/bootstrap-table.css" />
<link rel="stylesheet" type="text/css" href="css1/bootstrap.min.css" />
<script src="js1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js1/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
<script src="js1/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js1/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css">
.wd{
width: 16px;
}
</style>
<script type="text/javascript">
var a = [{
"id": 0,
"name": "阿薩德",
"price": "<a href='#'></a>"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"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"
},
{
"id": 0,
"name": "阿薩德",
"price": "<a href='#' id='btn'>修改</a>"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"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"
},
{
"id": 0,
"name": "阿薩德",
"price": "<a href='#' id='btn'>修改</a>"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"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"
},
{
"id": 0,
"name": "阿薩德",
"price": "<a href='#' id='btn'>修改</a>"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"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"
}
]
</script>
</head>
<style type="text/css">
.aa{
background-color: red;
}
</style>
<body>
<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>-->
<!--
data-toggle="table" 不用寫(xiě) JavaScript 直接啟用表格追迟。
data-classes='table-no-bordered 消除邊框
-->
<table id="table" data-show-columns="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-pagination="true" data-show-pagination-switch="true" data-height="500" data-show-header="true" data-striped='true' data-pagination-pre-text="上一頁(yè)" data-pagination-next-text='下一頁(yè)'>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-formatter="idFormatter" data-stripe="true">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price" id="item" data-icons={paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down'}>Item Price</th>
</tr>
</thead>
<button id="btn">提交</button>
<button id="btn1">提交1</button>
</table>
</div>
<script>
function idFormatter(value) {
return value + 100;
}
$('#table').bootstrapTable({
data: a
});
$(function() {
$("#btn").click(function() {
var ids = $.map($('#table').bootstrapTable('getSelections'), function(row) {
return row;
});
alert('您選擇的id是: ' + JSON.stringify(ids));
});
//刪除哪里行
// $("#btn1").click(function() {
// $('#table').bootstrapTable('removeByUniqueId', 1);
// });
})
// 全局判斷
// $('#table').on('click-row.bs.table', function(e, row, element) {
// var bln = window.confirm("確定嗎?");
// console.log(row.id)
// if(bln)
//// $('#table').bootstrapTable('removeByUniqueId', {index: row.id});
// $('#table').bootstrapTable('hideRow', {index: row.id});
//
// $('.aa').removeClass('aa'); //去除之前選中的行的瘾敢，選中樣式
// $(element).addClass('aa'); //添加當(dāng)前選中的 success樣式用于區(qū)別
// console.log($(element));
// });
//針對(duì)列進(jìn)行判斷
$('#table').on('click-cell.bs.table', function(field, value, row, $element) {
// var bln = window.confirm("確定嗎?");
// console.log(row.id)
// if(bln)
//// $('#table').bootstrapTable('removeByUniqueId', {index: row.id});
// $('#table').bootstrapTable('hideRow', {index: row.id});
//
// $('.aa').removeClass('aa'); //去除之前選中的行的排吴，選中樣式
// $(element).addClass('aa'); //添加當(dāng)前選中的 success樣式用于區(qū)別
console.log($element);
console.log(field);
console.log(value);
console.log(row);
// alert(1);
});
function getSelectedRow() {
var index = $('#teacher_table').find('tr.success').data('index'); //獲得選中的行
return $('#teacher_table').bootstrapTable('getData')[index]; //返回選中行所有數(shù)據(jù)
}
/// 指定的行 顯示或隱藏
// $(function () {
// $("#btn1").click(function () {
// $('#table').bootstrapTable('showRow', {index: 1});
// });
//
// $("#btn1").click(function () {
// $('#table').bootstrapTable('hideRow', {index: 1});
// });
// });
//
// updateRow 更新指定行的數(shù)據(jù)
// $(function() {
// $("#btn1").click(function() {
// var randomId = 100 + ~~(Math.random() * 100);
// $('#table').bootstrapTable('updateRow', {
// index: 1,
// row: {
// id: randomId,
// name: 'Item ' + randomId,
// price: '$' + randomId
// }
// });
// });
// });
// 插入指定行之前 index是 id索引
// $(function () {
// $("#btn1").click(function () {
// var randomId = 100 + ~~(Math.random() * 100);
// $('#table').bootstrapTable('insertRow', {
// index: 0,
// row: {
// id: randomId,
// name: 'Item ' + randomId,
// price: '$' + randomId
// }
// });
// });
// });
//插入數(shù)據(jù)到尾部 append 頭部 prepend
// $(function() {
// $("#btn1").click(function() {
// $('#table').bootstrapTable('prepend', randomData());
// $('#table').bootstrapTable('scrollTo', 'top');
// });
// });
//
// function randomData() {
// var startId = ~~(Math.random() * 100),
// rows = [];
//
// for(var i = 0; i < 1; i++) {
// rows.push({
// id: startId + i,
// name: 'test' + (startId + i),
// price: '$' + (startId + i)
// });
// }
// return rows;
// }
//隨機(jī)數(shù)據(jù)
// $("#btn1").click(function() {
// $("#table").bootstrapTable('load', randomData());
// });
// function randomData() {
// var startId = ~~(Math.random() * 100),
// rows = [];
//
// for(var i = 0; i < 10; i++) {
// rows.push({
// id: startId + i,
// name: 'test' + (startId + i),
// price: '$' + (startId + i)
// });
// }
// return rows;
// }
</script>
</body>
</html>
