Initial import from local backup (Documents-Playground/pakerpale)

This commit is contained in:
jeonghwa
2026-07-03 05:27:08 +09:00
commit c55f993072
1519 changed files with 374497 additions and 0 deletions

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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);

View 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>

View 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>

View 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>

View 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>