Skip to content

Commit 021f80d

Browse files
wenzhixinwenzhixin
committed
Add method examples.
1 parent e13fe3e commit 021f80d

11 files changed

+656
-0
lines changed

‎methods/append.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>append</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/append.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>append</h1>
20+
<p>Append the data to table: <code>$table.bootstrapTable('append', data);</code></p>
21+
<div id="toolbar">
22+
<button id="button" class="btn btn-default">append</button>
23+
</div>
24+
<table id="table"
25+
data-toggle="table"
26+
data-toolbar="#toolbar"
27+
data-height="460"
28+
data-url="../json/data1.json">
29+
<thead>
30+
<tr>
31+
<th data-field="id">ID</th>
32+
<th data-field="name">Item Name</th>
33+
<th data-field="price">Item Price</th>
34+
</tr>
35+
</thead>
36+
</table>
37+
</div>
38+
<script>
39+
var $table = $('#table'),
40+
$button = $('#button');
41+
42+
$(function () {
43+
$button.click(function () {
44+
$table.bootstrapTable('append', randomData());
45+
$table.bootstrapTable('scrollTo', 'bottom');
46+
});
47+
});
48+
49+
function randomData() {
50+
var startId = ~~(Math.random() * 100),
51+
rows = [];
52+
53+
for (var i = 0; i < 10; i++) {
54+
rows.push({
55+
id: startId + i,
56+
name: 'test' + (startId + i),
57+
price: '$' + (startId + i)
58+
});
59+
}
60+
return rows;
61+
}
62+
</script>
63+
</body>
64+
</html>

‎methods/check-uncheck.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>check/uncheck</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/check/uncheck.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>check/uncheck</h1>
20+
<p>
21+
Check/Uncheck a row, the row index start with 0.<br>
22+
<code>$table.bootstrapTable('check', 1);</code><br>
23+
<code>$table.bootstrapTable('uncheck', 1);</code>
24+
</p>
25+
<div id="toolbar">
26+
<button id="button" class="btn btn-default">check</button>
27+
<button id="button2" class="btn btn-default">uncheck</button>
28+
</div>
29+
<table id="table"
30+
data-toggle="table"
31+
data-toolbar="#toolbar"
32+
data-height="460"
33+
data-url="../json/data1.json">
34+
<thead>
35+
<tr>
36+
<th data-field="state" data-checkbox="true"></th>
37+
<th data-field="id">ID</th>
38+
<th data-field="name">Item Name</th>
39+
<th data-field="price">Item Price</th>
40+
</tr>
41+
</thead>
42+
</table>
43+
</div>
44+
<script>
45+
var $table = $('#table'),
46+
$button = $('#button'),
47+
$button2 = $('#button2');
48+
49+
$(function () {
50+
$button.click(function () {
51+
$table.bootstrapTable('check', 1);
52+
});
53+
$button2.click(function () {
54+
$table.bootstrapTable('uncheck', 1);
55+
});
56+
});
57+
</script>
58+
</body>
59+
</html>

‎methods/checkAll-uncheckAll.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>checkAll/uncheckAll</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/checkAll/uncheckAll.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>checkAll/uncheckAll</h1>
20+
<p>
21+
Check/Uncheck all current page rows.<br>
22+
<code>$table.bootstrapTable('checkAll');</code><br>
23+
<code>$table.bootstrapTable('uncheckAll');</code>
24+
</p>
25+
<div id="toolbar">
26+
<button id="button" class="btn btn-default">checkAll</button>
27+
<button id="button2" class="btn btn-default">uncheckAll</button>
28+
</div>
29+
<table id="table"
30+
data-toggle="table"
31+
data-toolbar="#toolbar"
32+
data-height="460"
33+
data-url="../json/data1.json">
34+
<thead>
35+
<tr>
36+
<th data-field="state" data-checkbox="true"></th>
37+
<th data-field="id">ID</th>
38+
<th data-field="name">Item Name</th>
39+
<th data-field="price">Item Price</th>
40+
</tr>
41+
</thead>
42+
</table>
43+
</div>
44+
<script>
45+
var $table = $('#table'),
46+
$button = $('#button'),
47+
$button2 = $('#button2');
48+
49+
$(function () {
50+
$button.click(function () {
51+
$table.bootstrapTable('checkAll');
52+
});
53+
$button2.click(function () {
54+
$table.bootstrapTable('uncheckAll');
55+
});
56+
});
57+
</script>
58+
</body>
59+
</html>

‎methods/getData.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>getData</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/getData.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>getData</h1>
20+
<p>Get the loaded data of table: <code>$table.bootstrapTable('getData');</code></p>
21+
<div id="toolbar">
22+
<button id="button" class="btn btn-default">getData</button>
23+
</div>
24+
<table id="table"
25+
data-toggle="table"
26+
data-toolbar="#toolbar"
27+
data-height="460"
28+
data-side-pagination="server"
29+
data-pagination="true"
30+
data-url="/examples/bootstrap_table/data">
31+
<thead>
32+
<tr>
33+
<th data-field="id">ID</th>
34+
<th data-field="name">Item Name</th>
35+
<th data-field="price">Item Price</th>
36+
</tr>
37+
</thead>
38+
</table>
39+
</div>
40+
<script>
41+
var $table = $('#table'),
42+
$button = $('#button');
43+
44+
$(function () {
45+
$button.click(function () {
46+
alert(JSON.stringify($table.bootstrapTable('getData')));
47+
});
48+
});
49+
</script>
50+
</body>
51+
</html>

‎methods/getSelections.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>getSelections</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/getSelections.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>getSelections</h1>
20+
<p>Return all selected rows, when no record selected, am empty array will return: <code>$table.bootstrapTable('getSelections');</code></p>
21+
<div id="toolbar">
22+
<button id="button" class="btn btn-default">getSelections</button>
23+
</div>
24+
<table id="table"
25+
data-toggle="table"
26+
data-toolbar="#toolbar"
27+
data-height="460"
28+
data-click-to-select="true"
29+
data-url="../json/data1.json">
30+
<thead>
31+
<tr>
32+
<th data-field="state" data-checkbox="true"></th>
33+
<th data-field="id">ID</th>
34+
<th data-field="name">Item Name</th>
35+
<th data-field="price">Item Price</th>
36+
</tr>
37+
</thead>
38+
</table>
39+
</div>
40+
<script>
41+
var $table = $('#table'),
42+
$button = $('#button');
43+
44+
$(function () {
45+
$button.click(function () {
46+
alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
47+
});
48+
});
49+
</script>
50+
</body>
51+
</html>

‎methods/insertRow.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>insertRow</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<script src="../assets/jquery.min.js"></script>
10+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
11+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
12+
<script src="../ga.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="ribbon">
17+
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/insertRow.html" target="_blank">View Source on GitHub</a>
18+
</div>
19+
<h1>insertRow</h1>
20+
<p>
21+
Insert a new row, the param contains following properties:<br>
22+
index: the row index to insert into.<br>
23+
row: the row data.<br>
24+
<code>$table.bootstrapTable('insertRow', {index: 1, row: row});</code>
25+
</p>
26+
<div id="toolbar">
27+
<button id="button" class="btn btn-default">insertRow</button>
28+
</div>
29+
<table id="table"
30+
data-toggle="table"
31+
data-toolbar="#toolbar"
32+
data-height="428"
33+
data-url="../json/data1.json">
34+
<thead>
35+
<tr>
36+
<th data-field="id">ID</th>
37+
<th data-field="name">Item Name</th>
38+
<th data-field="price">Item Price</th>
39+
</tr>
40+
</thead>
41+
</table>
42+
</div>
43+
<script>
44+
var $table = $('#table'),
45+
$button = $('#button');
46+
47+
$(function () {
48+
$button.click(function () {
49+
var randomId = 100 + ~~(Math.random() * 100);
50+
$table.bootstrapTable('insertRow', {
51+
index: 1,
52+
row: {
53+
id: randomId,
54+
name: 'Item ' + randomId,
55+
price: '$' + randomId
56+
}
57+
});
58+
});
59+
});
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)