Initial import from local backup (Documents-Playground/pakerpale)
This commit is contained in:
61
public/assets/bt/methods/append.html
Normal file
61
public/assets/bt/methods/append.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>append</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>append</h1>
|
||||
<p>Append the data to table: <code>$table.bootstrapTable('append', data);</code></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">append</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('append', randomData());
|
||||
$table.bootstrapTable('scrollTo', 'bottom');
|
||||
});
|
||||
});
|
||||
|
||||
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>
|
||||
56
public/assets/bt/methods/check-uncheck.html
Normal file
56
public/assets/bt/methods/check-uncheck.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>check/uncheck</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>check/uncheck</h1>
|
||||
<p>
|
||||
Check/Uncheck a row, the row index start with 0.<br>
|
||||
<code>$table.bootstrapTable('check', 1);</code><br>
|
||||
<code>$table.bootstrapTable('uncheck', 1);</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">check</button>
|
||||
<button id="button2" class="btn btn-default">uncheck</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('check', 1);
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('uncheck', 1);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
public/assets/bt/methods/checkAll-uncheckAll.html
Normal file
56
public/assets/bt/methods/checkAll-uncheckAll.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>checkAll/uncheckAll</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>checkAll/uncheckAll</h1>
|
||||
<p>
|
||||
Check/Uncheck all current page rows.<br>
|
||||
<code>$table.bootstrapTable('checkAll');</code><br>
|
||||
<code>$table.bootstrapTable('uncheckAll');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">checkAll</button>
|
||||
<button id="button2" class="btn btn-default">uncheckAll</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('checkAll');
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('uncheckAll');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
public/assets/bt/methods/checkBy-uncheckBy.html
Normal file
56
public/assets/bt/methods/checkBy-uncheckBy.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>checkBy/uncheckBy</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>checkBy/uncheckBy</h1>
|
||||
<p>
|
||||
Check/Uncheck rows by array of values.<br>
|
||||
<code>$table.bootstrapTable('checkBy', {field:'id', values:[1, 2, 3]});</code><br>
|
||||
<code>$table.bootstrapTable('uncheckBy', {field:'id', values:[1, 2, 3]});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">checkBy</button>
|
||||
<button id="button2" class="btn btn-default">uncheckBy</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('checkBy', {field:'id', values:[1, 2, 3]});
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('uncheckBy', {field:'id', values:[1, 2, 3]});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
public/assets/bt/methods/destroy.html
Normal file
53
public/assets/bt/methods/destroy.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>destroy</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>destroy</h1>
|
||||
<p>
|
||||
Destroy the bootstrap table: <code>$table.bootstrapTable('destroy');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">destroy</button>
|
||||
<button id="button2" class="btn btn-default">build</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('destroy');
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
public/assets/bt/methods/expandRow-collapseRow.html
Normal file
61
public/assets/bt/methods/expandRow-collapseRow.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>expandRow-collapseRow</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>expandRow-collapseRow</h1>
|
||||
<p></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">expandRow</button>
|
||||
<button id="button2" class="btn btn-default">collapseRow</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-detail-view="true"
|
||||
data-detail-formatter="detailFormatter"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('expandRow', 1);
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('collapseRow', 1);
|
||||
});
|
||||
});
|
||||
|
||||
function detailFormatter(index, row) {
|
||||
var html = [];
|
||||
$.each(row, function (key, value) {
|
||||
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
|
||||
});
|
||||
return html.join('');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
57
public/assets/bt/methods/filterBy.html
Normal file
57
public/assets/bt/methods/filterBy.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>filterBy</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>filterBy</h1>
|
||||
<p>
|
||||
(Can use only in client-side) Filter data in table, <br />
|
||||
e.g. You can filter <code>{age: 10}</code> to show the data only age is equal to 10. <br />
|
||||
You can also filter with an array of values, as in: <code>{age: 10, hairColor: ["blue", "red", "green"]}</code> to find data where age is equal to 10 and hairColor is either blue, red, or green.<br />
|
||||
In this example, we filter by:
|
||||
<pre>
|
||||
$table.bootstrapTable('filterBy', {
|
||||
id: [1, 2, 3]
|
||||
});</pre>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">filterBy</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="400"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('filterBy', {
|
||||
id: [1, 2, 3]
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
public/assets/bt/methods/getAllSelections.html
Normal file
53
public/assets/bt/methods/getAllSelections.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>getAllSelections</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>getAllSelections</h1>
|
||||
<p>
|
||||
Return all selected rows contain search or filter, when no record selected, am empty array will return:
|
||||
<code>$table.bootstrapTable('getAllSelections');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">getAllSelections</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-pagination="true"
|
||||
data-search="true"
|
||||
data-click-to-select="true"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getAllSelections')));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
public/assets/bt/methods/getData.html
Normal file
48
public/assets/bt/methods/getData.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>getData</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>getData</h1>
|
||||
<p>Get the loaded data of table: <code>$table.bootstrapTable('getData');</code></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">getData</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-side-pagination="server"
|
||||
data-pagination="true"
|
||||
data-url="/examples/bootstrap_table/data">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
alert(JSON.stringify($table.bootstrapTable('getData')));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
public/assets/bt/methods/getOptions.html
Normal file
48
public/assets/bt/methods/getOptions.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>getOptions</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>getOptions</h1>
|
||||
<p>
|
||||
Return the options object: <code>$table.bootstrapTable('getOptions');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">getOptions</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
alert(JSON.stringify($table.bootstrapTable('getOptions')));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
50
public/assets/bt/methods/getRowByUniqueId.html
Normal file
50
public/assets/bt/methods/getRowByUniqueId.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>getRowByUniqueId</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>getRowByUniqueId</h1>
|
||||
<p>
|
||||
Get data from table, the row that contains the id passed by parameter:
|
||||
<code>$table.bootstrapTable('getRowByUniqueId', 1);</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">getRowByUniqueId</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-unique-id="id"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
alert('getRowByUniqueId: ' + JSON.stringify($table.bootstrapTable('getRowByUniqueId', 1)));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
public/assets/bt/methods/getSelections.html
Normal file
48
public/assets/bt/methods/getSelections.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>getSelections</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>getSelections</h1>
|
||||
<p>Return all selected rows, when no record selected, am empty array will return: <code>$table.bootstrapTable('getSelections');</code></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">getSelections</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-click-to-select="true"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
public/assets/bt/methods/insertRow.html
Normal file
59
public/assets/bt/methods/insertRow.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>insertRow</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>insertRow</h1>
|
||||
<p>
|
||||
Insert a new row, the param contains following properties:<br>
|
||||
index: the row index to insert into.<br>
|
||||
row: the row data.<br>
|
||||
<code>$table.bootstrapTable('insertRow', {index: 1, row: row});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">insertRow</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="428"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
var randomId = 100 + ~~(Math.random() * 100);
|
||||
$table.bootstrapTable('insertRow', {
|
||||
index: 1,
|
||||
row: {
|
||||
id: randomId,
|
||||
name: 'Item ' + randomId,
|
||||
price: '$' + randomId
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
public/assets/bt/methods/load.html
Normal file
60
public/assets/bt/methods/load.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>load</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>load</h1>
|
||||
<p>Load the data to table, the old rows will be removed: <code>$table.bootstrapTable('load', data);</code></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">load</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.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>
|
||||
58
public/assets/bt/methods/mergeCells.html
Normal file
58
public/assets/bt/methods/mergeCells.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>mergeCells</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>mergeCells</h1>
|
||||
<p>
|
||||
Merge some cells to one cell, the options contains following properties:<br>
|
||||
index: the row index.<br>
|
||||
field: the field name.<br>
|
||||
rowspan: the rowspan count to be merged.<br>
|
||||
colspan: the colspan count to be merged.<br>
|
||||
<code>$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">mergeCells</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="400"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('mergeCells', {
|
||||
index: 1,
|
||||
field: 'name',
|
||||
colspan: 2,
|
||||
rowspan: 3
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
public/assets/bt/methods/prepend.html
Normal file
60
public/assets/bt/methods/prepend.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>prepend</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>prepend</h1>
|
||||
<p>Prepend the data to table: <code>$table.bootstrapTable('prepend', data);</code></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">prepend</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('prepend', 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>
|
||||
49
public/assets/bt/methods/refresh.html
Normal file
49
public/assets/bt/methods/refresh.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>refresh</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>refresh</h1>
|
||||
<p>
|
||||
Refresh the remote server data, you can set <code>{silent: true}</code> to refresh the data silently, and set <code>{url: newUrl}</code> to change the url. To supply query params specific to this request, set <code>{query: {foo: 'bar'}}</code>.<br>
|
||||
<code>$table.bootstrapTable('refresh');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">refresh</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="428"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('refresh');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
public/assets/bt/methods/refreshOptions.html
Normal file
51
public/assets/bt/methods/refreshOptions.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>refreshOptions</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>refreshOptions</h1>
|
||||
<p></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">refreshOptions</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('refreshOptions', {
|
||||
showColumns: true,
|
||||
search: true,
|
||||
showRefresh: true,
|
||||
url: '../json/data1.json'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
58
public/assets/bt/methods/remove.html
Normal file
58
public/assets/bt/methods/remove.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>remove</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>remove</h1>
|
||||
<p>
|
||||
Remove data from table, the params contains two properties:<br>
|
||||
field: the field name of remove rows.<br>
|
||||
values: the array of values for rows which should be removed.<br>
|
||||
<code>$table.bootstrapTable('remove', {field: 'id', values: ids});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">remove</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="428"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
|
||||
return row.id;
|
||||
});
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: ids
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
public/assets/bt/methods/removeAll.html
Normal file
49
public/assets/bt/methods/removeAll.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>removeAll</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>removeAll</h1>
|
||||
<p>
|
||||
Remove all data from table:
|
||||
<code>$table.bootstrapTable('removeAll');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">removeAll</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('removeAll');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
50
public/assets/bt/methods/removeByUniqueId.html
Normal file
50
public/assets/bt/methods/removeByUniqueId.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>removeByUniqueId</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>removeByUniqueId</h1>
|
||||
<p>
|
||||
Remove data from table, the row that contains the id passed by parameter:
|
||||
<code>$table.bootstrapTable('removeByUniqueId', 1);</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">removeByUniqueId</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-unique-id="id"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('removeByUniqueId', 1);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
public/assets/bt/methods/resetSearch.html
Normal file
48
public/assets/bt/methods/resetSearch.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>resetSearch</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>resetSearch</h1>
|
||||
<p></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">resetSearch</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-search="true"
|
||||
data-search-text="11"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('resetSearch');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
public/assets/bt/methods/resetView.html
Normal file
61
public/assets/bt/methods/resetView.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>resetView</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<style>
|
||||
.div-table {width: 600px;}
|
||||
</style>
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>resetView</h1>
|
||||
<p>
|
||||
Reset the bootstrap table view, for example reset the table height: <code>$table.bootstrapTable('resetView');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">Large and resetView</button>
|
||||
<button id="button2" class="btn btn-default">Small and resetView</button>
|
||||
</div>
|
||||
<div class="div-table">
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="id">ID</th>
|
||||
<th data-field="name">Item Name</th>
|
||||
<th data-field="price">Item Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var $div = $('.div-table'),
|
||||
$table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$div.width($div.width() + 50);
|
||||
$table.bootstrapTable('resetView');
|
||||
});
|
||||
$button2.click(function () {
|
||||
$div.width($div.width() - 50);
|
||||
$table.bootstrapTable('resetView');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
public/assets/bt/methods/scrollTo.html
Normal file
55
public/assets/bt/methods/scrollTo.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>scrollTo</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>scrollTo</h1>
|
||||
<p>
|
||||
Scroll to the number value position, set 'bottom' means scroll to the bottom.<br>
|
||||
<code>$table.bootstrapTable('scrollTo', 0);</code><br>
|
||||
<code>$table.bootstrapTable('scrollTo', 'bottom');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">scrollTo Top</button>
|
||||
<button id="button2" class="btn btn-default">scrollTo Bottom</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('scrollTo', 0);
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('scrollTo', 'bottom');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
public/assets/bt/methods/selectPage-prevPage-nextPage.html
Normal file
64
public/assets/bt/methods/selectPage-prevPage-nextPage.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>selectPage/prevPage/nextPage</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>selectPage/prevPage/nextPage</h1>
|
||||
<p>
|
||||
Go to the a specified/previous/next page.<br>
|
||||
<code>$table.bootstrapTable('selectPage', 1);</code><br>
|
||||
<code>$table.bootstrapTable('prevPage');</code><br>
|
||||
<code>$table.bootstrapTable('nextPage');</code><br>
|
||||
</p>
|
||||
<div id="toolbar" class="form-inline">
|
||||
<input id="page" class="form-control" style="width: 60px" type="number" value="1" min="1" max="3">
|
||||
<button id="button" class="btn btn-default">selectPage</button>
|
||||
<button id="button2" class="btn btn-default">prevPage</button>
|
||||
<button id="button3" class="btn btn-default">nextPage</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="420"
|
||||
data-pagination="true"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$page = $('#page'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2'),
|
||||
$button3 = $('#button3');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('selectPage', +$page.val());
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('prevPage');
|
||||
});
|
||||
$button3.click(function () {
|
||||
$table.bootstrapTable('nextPage');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
public/assets/bt/methods/showColumn-hideCoulumn.html
Normal file
55
public/assets/bt/methods/showColumn-hideCoulumn.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>showColumn/hideCoulumn</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>showColumn/hideCoulumn</h1>
|
||||
<p>
|
||||
Show/Hide the specified column.<br>
|
||||
<code>$table.bootstrapTable('showColumn', 'name');</code><br>
|
||||
<code>$table.bootstrapTable('hideColumn', 'name');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">showColumn</button>
|
||||
<button id="button2" class="btn btn-default">hideCoulumn</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('showColumn', 'name');
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('hideColumn', 'name');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
public/assets/bt/methods/showLoading-hideLoading.html
Normal file
51
public/assets/bt/methods/showLoading-hideLoading.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>showLoading/hideLoading</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>showLoading/hideLoading</h1>
|
||||
<p></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">showLoading</button>
|
||||
<button id="button2" class="btn btn-default">hideLoading</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('showLoading');
|
||||
});
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('hideLoading');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
public/assets/bt/methods/showRow-hideRow.html
Normal file
56
public/assets/bt/methods/showRow-hideRow.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>showRow/hideRow</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>showRow/hideRow</h1>
|
||||
<p>
|
||||
Show/Hide the specified row.<br>
|
||||
<code>$table.bootstrapTable('showRow', {index:1});</code><br>
|
||||
<code>$table.bootstrapTable('hideRow', {index:1});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">Show Row</button>
|
||||
<button id="button2" class="btn btn-default">Hide Row</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button'),
|
||||
$button2 = $('#button2');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('showRow', {index: 1});
|
||||
});
|
||||
|
||||
$button2.click(function () {
|
||||
$table.bootstrapTable('hideRow', {index: 1});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
46
public/assets/bt/methods/template.html
Normal file
46
public/assets/bt/methods/template.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>%(title)s</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>%(title)s</h1>
|
||||
<p></p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">%(title)s</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
16
public/assets/bt/methods/template.js
Normal file
16
public/assets/bt/methods/template.js
Normal file
@@ -0,0 +1,16 @@
|
||||
var fs = require('fs'),
|
||||
sprintf = require('sprintf');
|
||||
|
||||
if (process.argv.length <= 2) {
|
||||
console.log('You need to enter title');
|
||||
return;
|
||||
}
|
||||
|
||||
var content = fs.readFileSync('./template.html').toString(),
|
||||
title = process.argv[2];
|
||||
|
||||
content = sprintf(content, {
|
||||
title: title
|
||||
});
|
||||
|
||||
fs.writeFileSync(sprintf('./%s.html', title.replace(/\//g, '-')), content);
|
||||
48
public/assets/bt/methods/togglePagination.html
Normal file
48
public/assets/bt/methods/togglePagination.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>togglePagination</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>togglePagination</h1>
|
||||
<p>
|
||||
Toggle the pagination option: <code>$table.bootstrapTable('togglePagination');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">togglePagination</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('togglePagination');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
public/assets/bt/methods/toggleView.html
Normal file
48
public/assets/bt/methods/toggleView.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>toggleView</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>toggleView</h1>
|
||||
<p>
|
||||
Toggle the card/table view: <code>$table.bootstrapTable('toggleView');</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">toggleView</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="460"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
$table.bootstrapTable('toggleView');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
public/assets/bt/methods/updateByUniqueId.html
Normal file
59
public/assets/bt/methods/updateByUniqueId.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>updateByUniqueId</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>updateByUniqueId</h1>
|
||||
<p>
|
||||
Update the specified row, the param contains following properties: <br>
|
||||
id: a row id where the id should be the uniqueid field assigned to the table. <br>
|
||||
row: the new row data.
|
||||
<code>$table.bootstrapTable('updateByUniqueId', {id: 3, row: row});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">updateByUniqueId</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="428"
|
||||
data-unique-id="id"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
var randomId = 100 + ~~(Math.random() * 100);
|
||||
$table.bootstrapTable('updateByUniqueId', {
|
||||
id: 3,
|
||||
row: {
|
||||
name: 'Item ' + randomId,
|
||||
price: '$' + randomId
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
public/assets/bt/methods/updateRow.html
Normal file
59
public/assets/bt/methods/updateRow.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>updateRow</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
||||
<link rel="stylesheet" href="../assets/examples.css">
|
||||
<script src="../assets/jquery.min.js"></script>
|
||||
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
||||
<script src="../ga.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>updateRow</h1>
|
||||
<p>
|
||||
Update the specified row, the param contains following properties: <br>
|
||||
index: the row index to be updated. <br>
|
||||
row: the row data.<br>
|
||||
<code>$table.bootstrapTable('updateRow', {index: 1, row: row});</code>
|
||||
</p>
|
||||
<div id="toolbar">
|
||||
<button id="button" class="btn btn-default">updateRow</button>
|
||||
</div>
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-height="428"
|
||||
data-url="../json/data1.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 $table = $('#table'),
|
||||
$button = $('#button');
|
||||
|
||||
$(function () {
|
||||
$button.click(function () {
|
||||
var randomId = 100 + ~~(Math.random() * 100);
|
||||
$table.bootstrapTable('updateRow', {
|
||||
index: 1,
|
||||
row: {
|
||||
id: randomId,
|
||||
name: 'Item ' + randomId,
|
||||
price: '$' + randomId
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user