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

This commit is contained in:
jeonghwa
2026-07-03 05:27:05 +09:00
commit afabb85270
1520 changed files with 374739 additions and 0 deletions

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Check/Uncheck All in all page</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 All in all page(<a href="https://github.com/wenzhixin/bootstrap-table/issues/1167" target="_blank">#1167</a>).</h1>
<div class="toolbar">
<button id="checkAll" class="btn btn-default">Check All</button>
<button id="uncheckAll" class="btn btn-default">Uncheck All</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar=".toolbar"
data-pagination="true"
data-maintain-selected="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');
$(function () {
$('#checkAll').click(function () {
$table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination');
});
$('#uncheckAll').click(function () {
$table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination');
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Refresh from url after use data option</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 from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>
<p><button id="button" class="btn btn-default">Refresh from url</button></p>
<table id="table">
<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');
$(function () {
$table.bootstrapTable({
data: [{
"id": 0,
"name": "Item 0",
"price": "$0"
}]
});
$('#button').click(function () {
$table.bootstrapTable('refresh', {url: '../json/data1.json'});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<title>How to pass parameter to server</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>How to pass parameter to server(<a href="https://github.com/wenzhixin/bootstrap-table/issues/152" target="_blank">#152</a> <a href="https://github.com/wenzhixin/bootstrap-table/issues/152#issuecomment-61213273">@61213273</a> ).</h1>
<b id="get">Method: Get</b>
<table data-toggle="table"
data-toolbar="#get"
data-url="http://mikepenz.com/jsfiddle/"
data-pagination="true"
data-side-pagination="server"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-search="true"
data-height="400"
data-query-params="queryParams">
<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>
<b id="post">Method: Post</b>
<table data-toggle="table"
data-toolbar="#post"
data-url="http://mikepenz.com/jsfiddle/"
data-pagination="true"
data-side-pagination="server"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-search="true"
data-height="400"
data-method="post"
data-query-params="postQueryParams">
<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>
function queryParams(params) {
params.your_param1 = 1; // add param1
params.your_param2 = 2; // add param2
// console.log(JSON.stringify(params));
// {"limit":10,"offset":0,"order":"asc","your_param1":1,"your_param2":2}
return params;
}
function postQueryParams(params) {
params.your_param1 = 1; // add param1
params.your_param2 = 2; // add param2
return params; // body data
}
</script>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>The Multiple Fields in Column</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>The Multiple Fields in Column(<a href="https://github.com/wenzhixin/bootstrap-table/issues/177" target="_blank">#177</a>.)</h1>
<table id="table"></table>
</div>
<script>
var data = [
{
"firstName": "zhixin",
"lastName": "wen",
"field1": "field1",
"field2": "field2",
"field3": "field3"
}
];
$(function () {
$('#table').bootstrapTable({
data: data,
columns: [{
field: 'fullName',
title: 'Full Name',
formatter: function (value, row) {
return [row.firstName, row.lastName].join(' ');
}
}, {
field: 'field',
title: 'Field',
formatter: function (value, row) {
return [row.field1, row.field2, row.field3].join('+');
}
}]
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Show Export button only</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="../assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/kayalshri/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="//rawgit.com/kayalshri/tableExport.jquery.plugin/master/jquery.base64.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Show Export button only(<a href="https://github.com/wenzhixin/bootstrap-table/issues/188" target="_blank">#188</a>).</h1>
<table id="table"
data-toggle="table"
data-show-export="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>
</body>
</html>

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Hide state column</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>Hide state column(<a href="https://github.com/wenzhixin/bootstrap-table/issues/220" target="_blank">#220</a>).</h1>
<p><button id="button" class="btn btn-default">Hide state column</button></p>
<table id="table"
data-toggle="table"
data-show-columns="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');
$(function () {
$('#button').click(function () {
$table.bootstrapTable('hideColumn', 'state');
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Use cellStyle</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>Use cellStyle(<a href="https://github.com/wenzhixin/bootstrap-table/issues/221" target="_blank">#221</a>).</h1>
<table id="table"
data-toggle="table"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name" data-cell-style="cellStyle">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
function cellStyle(value, row, index) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (index % 2 === 0 && index / 2 < classes.length) {
return {
//classes: classes[index / 2]
css: {
"background-color": "red",
}
};
}
return {};
}
</script>
</body>
</html>

View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>Use resetView to reset the header width</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>
<style>
.div-table {
/*display: table;*/
border: 1px solid #ccc;
}
.cell-left {
/*display: table-cell;*/
float: left;
width:80%;
}
.cell-right {
/*display: table-cell;*/
float: right;
width:20%;
}
</style>
</head>
<body>
<div class="container">
<h1>Use resetView to reset the header width(<a href="https://github.com/wenzhixin/bootstrap-table/issues/283" target="_blank">#283</a>).</h1>
<p>
<button id="b" type="button" class="btn btn-default">Larger</button>
<button id="s" type="button" class="btn btn-default">Smaller</button>
</p>
<div id="d" class="div-table">
<div class="cell-left">
<table id="table" data-height="500"></table>
</div>
<div class="cell-right">
RRR
</div>
<div class="clearfix"></div>
</div>
</div>
<script>
var $table = $('#table');
$(function () {
buildTable($('#table'), 10, 50);
var $d = $('#d');
var width = $d.width();
$('#b').click(function(){
width = width + 100;
$d.css('width', width + 'px');
$('#table').bootstrapTable('resetView');
});
$('#s').click(function(){
width = width - 100;
$d.css('width', width + 'px');
$('#table').bootstrapTable('resetView');
});
});
function buildTable($el, cells, rows) {
var i, j, row,
columns = [],
data = [];
for (i = 0; i < cells; i++) {
columns.push({
field: 'field' + i,
title: 'Cell' + i
});
}
for (i = 0; i < rows; i++) {
row = {};
for (j = 0; j < cells; j++) {
row['field' + j] = 'Row-' + i + '-' + j;
}
data.push(row);
}
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data
});
}
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom fontawsome icons</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.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>Custom fontawsome icons(<a href="https://github.com/wenzhixin/bootstrap-table/issues/337" target="_blank">#337</a>).</h1>
<table id="table"
data-toggle="table"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-icons-prefix="fa"
data-icons="icons"
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>
window.icons = {
refresh: 'fa-refresh',
toggle: 'fa-toggle-on',
columns: 'fa-th-list'
};
</script>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>Support for data-field with dot notation</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="assets/bootstrap-table/src/extensions/flatJSON/bootstrap-table-flatJSON.js"></script>
<script src="//rawgit.com/djhvscf/bootstrap-table-flatJSON/master/src/bootstrap-table-flatJSON.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Support for data-field with dot notation(<a href="https://github.com/wenzhixin/bootstrap-table/pull/350">#350</a>).</h1>
<table id="table"
data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-flat="true"
data-url="../json/350.json">
<thead>
<tr>
<th data-field="github.name" data-sortable="true">Name</th>
<th data-field="github.count.stargazers" data-sortable="true">Stargazers</th>
<th data-field="github.count.forks" data-sortable="true">Forks</th>
<th data-field="github.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
$(function () {
$table.on('sort.bs.table', function (event, name, order) {
console.log(name, order);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Use responseHandler option to handle your response data</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>Use responseHandler option to handle your response data(<a href="https://github.com/wenzhixin/bootstrap-table/issues/353" target="_blank">#353</a>).</h1>
<table id="table"></table>
</div>
<script>
$(function () {
$('#table').bootstrapTable({
url: '../json/353.json',
columns: [{
field: 'date',
title: 'Date Stamp',
sortable: true
}, {
field: 'm_type',
title: 'Type',
sortable: true
}, {
field: 'msdn',
title: 'MSDN',
sortable: true
}, {
field: 'file_name',
title: 'File Name',
sortable: true
}, {
field: 'message',
title: 'Message',
sortable: true
}],
responseHandler: function (res) {
return res.messages;
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Using table content in a HTML form</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>Using table content in a HTML form(<a href="https://github.com/wenzhixin/bootstrap-table/issues/371" target="_blank">#371</a>).</h1>
<form action="371.html" method="get">
<input class="btn btn-default" type="submit" value="Submit">
<table id="table"
data-toggle="table"
data-url="../json/data1.json"
data-id-field="id"
data-select-item-name="input"
data-toolbar=":submit">
<thead>
<tr>
<th data-checkbox="true" data-field="state"></th>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</form>
</div>
</body>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>Use Flat UI to style the checkboxes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/designmodo/Flat-UI/master/dist/css/flat-ui.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<style>
.checkbox, .radio {
padding: 0;
margin: 0;
}
.fixed-table-container .bs-checkbox .th-inner {
padding: 8px;
}
.fixed-table-pagination .pagination a {
padding: 12px 10px;
line-height: 16px;
}
.pagination li {
margin-right: 0;
}
.pagination li.disabled.active>a,
.pagination li.disabled.active>span {
color: #fff;
background-color: #1abc9c;
}
</style>
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="//rawgit.com/designmodo/Flat-UI/master/dist/js/flat-ui.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Use Flat UI to style the checkboxes(<a href="https://github.com/wenzhixin/bootstrap-table/issues/383" target="_blank">#383</a>.)</h1>
<table id="table"
data-toggle="table"
data-pagination="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');
$(function () {
$table.on('post-body.bs.table', function () {
$(':checkbox').wrap('<label class="checkbox"></label>').radiocheck();
})
});
</script>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Override default queryParam variables</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>Override default queryParam variables(<a href="https://github.com/wenzhixin/bootstrap-table/issues/386" target="_blank">#386).</a></h1>
<table data-toggle="table"
data-url="../json/data1.json"
data-height="300"
data-pagination="true"
data-query-params-type=""
data-query-params="queryParams">
<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>
function queryParams(params) {
return {
page: params.pageNumber,
pageLimit: params.pageSize,
searchRecord: params.searchText,
sortName: params.sortName,
sortOrder: params.sortOrder
};
}
</script>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>Enable/disable delete button on click checkbox</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>Enable/disable delete button on click checkbox(<a href="https://github.com/wenzhixin/bootstrap-table/issues/395" target="_blank">#395</a>).</h1>
<button id="remove" class="btn btn-danger" disabled>Delete</button>
<table id="table"
data-toggle="table"
data-url="../json/data1.json"
data-toolbar="#remove">
<thead>
<tr>
<th data-field="state" data-checkbox="true">ID</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'),
$remove = $('#remove');
$(function () {
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
});
$remove.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Align the toolbar and search input</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>Align the toolbar and search input(<a href="https://github.com/wenzhixin/bootstrap-table/issues/406" target="_blank">#406</a>).</h1>
<button id="toolbar" class="btn btn-default">Submit</button>
<table id="table"
data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar"
data-search-align="left"
data-buttons-align="left"
data-toolbar-align="right"
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>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Refresh method with new url</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 method with new url(<a href="https://github.com/wenzhixin/bootstrap-table/issues/409" target="_blank">#409</a>).</h1>
<div class="toolbar">
<button id="refresh" class="btn btn-default">Refresh</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar=".toolbar"
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');
$(function () {
$('#refresh').click(function () {
$table.bootstrapTable('refresh', {
url: '../json/409.json'
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Get checked row index</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>Get checked row index(<a href="https://github.com/wenzhixin/bootstrap-table/issues/415" target="_blank">#415</a>).</h1>
<button id="show" class="btn btn-default">Show checked</button>
<table id="table"
data-toggle="table"
data-select-item-name="selectItemName"
data-url="../json/data1.json"
data-pagination="true"
data-toolbar="#show">
<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');
$(function () {
$('#show').click(function () {
var index = [];
$('input[name="selectItemName"]:checked').each(function () {
index.push($(this).data('index'));
});
alert('Checked row index: ' + index.join(', '));
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Toggle pagination</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>Toggle pagination (<a href="https://github.com/wenzhixin/bootstrap-table/issues/424" target="_blank">#424</a>).</h1>
<table id="table"
data-toggle="table"
data-url="../json/data1.json"
data-show-pagination-switch="true"
data-pagination="true"
data-page-size="10"
data-page-list="[5, 10, 20]">
<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>
</body>
</html>

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<title>Load pagination data</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 pagination data(<a href="https://github.com/wenzhixin/bootstrap-table/issues/431" target="_blank">#431</a>).</h1>
<table id="table"
data-toggle="table"
data-pagination="true"
data-side-pagination="server">
<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');
$(function () {
$table.on('page-change.bs.table', function (e, number, size) {
getData(number, size);
});
var options = $table.bootstrapTable('getOptions');
getData(options.pageNumber, options.pageSize);
});
function getData(number, size) {
$.get('/examples/bootstrap_table/data', {
offset: (number - 1) * size,
limit: size
}, function (res) {
$table.bootstrapTable('load', res);
});
}
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Set the global defaults for the table</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>
$.extend($.fn.bootstrapTable.defaults, {
// method: 'post',
pagination: true,
sidePagination: 'server',
// contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
showRefresh: true
});
$.extend($.fn.bootstrapTable.columnDefaults, {
align: 'center',
valign: 'middle'
});
</script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Set the global defaults for the table(<a href="https://github.com/wenzhixin/bootstrap-table/issues/457" target="_blank">#457</a>).</h1>
<table id="table"
data-toggle="table"
data-url="../json/data2.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>
</body>
</html>

View File

@@ -0,0 +1,89 @@
<html>
<head>
<title>How to use the filter extension</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="../assets/bootstrap-table-filter/extension/bootstrap-table-filter.js"></script>
<script src="../assets/bootstrap-table-filter/bootstrap-table-filter.js"></script>
<script src="../assets/bootstrap-table-filter/bs-table.js"></script>
</head>
<body>
<div class="container">
<h1>How to use the filter extension (<a href="https://github.com/wenzhixin/bootstrap-table/issues/561" target="_blank">#561</a>).</h1>
<div id="filter-bar"> </div>
<table id="table" data-height="299" data-toolbar="#filter-bar"
data-show-toggle="true" data-show-columns="true" data-show-filter="true" data-search="true">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<script>
var data = [
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) ",
'id':5
},
{
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)",
'id':4
},
{
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap.",
'id':3
},
{
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog",
'id':2
},
{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension.",
'id':1
}
];
$(function() {
$('#table').bootstrapTable({data: data});
$('#filter-bar').bootstrapTableFilter({
connectTo: '#table',
onAll: function(name, args) {
var d = new Date();
$('#log').prepend(d.toLocaleString() + ': ' + name + "\n");
},
onSubmit: function(data) {
var data = $('#filter-bar').bootstrapTableFilter('getData');
var d = new Date();
$('#log').prepend(d.toLocaleString() + ': ' + JSON.stringify(data) + "\n");
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Change the background color on selected rows</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>Change the background color on selected rows (<a href="https://github.com/wenzhixin/bootstrap-table/issues/563" target="_blank">#563</a>).</h1>
<table id="table"
data-toggle="table"
data-url="../json/data1.json"
data-pagination="true"
data-page-size="10"
data-page-list="[5, 10, 20]">
<thead>
<tr>
<th data-field="id" data-checkbox="true" data-visible="false"></th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
$(function () {
$table.on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Show images formatter</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="//cdnjs.cloudflare.com/ajax/libs/holder/2.6.0/holder.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Show images formatter (<a href="https://github.com/wenzhixin/bootstrap-table/issues/579" target="_blank">#579</a>).</h1>
<table id="table"
data-show-header="false"
data-classes="table table-hover table-no-bordered">
<thead>
<tr>
<th data-field="image" data-formatter="imageFormatter">Image</th>
<th data-field="name">Name</th>
<th data-field="action" data-formatter="actionFormatter">Action</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
$(function () {
$table.bootstrapTable({
data: [{
name: 'Name 1'
}, {
name: 'Name 2'
}, {
name: 'Name 3'
}, {
name: 'Name 4'
}, {
name: 'Name 5'
}]
});
});
function imageFormatter() {
return '<img src="holder.js/100x150">';
}
function actionFormatter() {
return '<i class="glyphicon glyphicon-heart"></i> <i class="glyphicon glyphicon-remove"></i>';
}
</script>
</body>
</html>

View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<title>Footer resizing problem.</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>
[data-field="name"] .th-inner {width: 200px}
.th-inner {width: 100px}
</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>Footer resizing problem.(<a href="https://github.com/wenzhixin/bootstrap-table/issues/639" target="_blank">#639</a>).</h1>
<div style="width: 500px;">
<table id="table"
data-striped="true"
data-show-footer="true"
data-height="300">
</table>
</div>
</div>
<script>
var $table = $('#table');
$(function () {
$table.bootstrapTable({
columns: [{"field":"name","title":"Location", footerFormatter: totalTextFormatter},
{"field":"log_date_2015-06-20","title":"6/20","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-21","title":"6/21","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-22","title":"6/22","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-23","title":"6/23","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-24","title":"6/24","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-25","title":"6/25","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-26","title":"6/26","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-27","title":"6/27","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-28","title":"6/28","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-29","title":"6/29","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-06-30","title":"6/30","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-01","title":"7/1","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-02","title":"7/2","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-03","title":"7/3","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-04","title":"7/4","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-05","title":"7/5","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-06","title":"7/6","align":"right",
footerFormatter: sumFormatter},
{"field":"log_date_2015-07-07","title":"7/7","align":"right",
footerFormatter: sumFormatter},
{"field":"total","title":"Total","align":"right",
footerFormatter: sumFormatter}
],
data: [
{"name":"Example1","total":19.5,"log_date_2015-07-01":-0.25,"log_date_2015-06-09":5.5,"log_date_2015-06-06":-0.5,"log_date_2015-06-04":-0.25,"log_date_2015-07-07":-1.75,"log_date_2015-06-11":6,"log_date_2015-06-25":-0.75,"log_date_2015-06-03":-0.75,"log_date_2015-07-02":-1.25,"log_date_2015-06-27":0.75,"log_date_2015-06-14":3.25,"log_date_2015-06-18":-1.25,"log_date_2015-06-02":-1,"log_date_2015-06-01":5,"log_date_2015-06-26":-1,"log_date_2015-06-19":-0.5,"log_date_2015-06-30":1.25,"log_date_2015-06-12":3.25,"log_date_2015-07-04":-2.5,"log_date_2015-07-05":4,"log_date_2015-06-20":-2.75,"log_date_2015-06-15":-1.5,"log_date_2015-07-06":-1.75,"log_date_2015-06-28":-0.5,"log_date_2015-06-07":-1,"log_date_2015-06-05":-0.75,"log_date_2015-06-08":1.25,"log_date_2015-06-13":3.25,"log_date_2015-06-16":1.75,"log_date_2015-06-22":-1.5,"log_date_2015-06-21":0,"log_date_2015-07-03":6.25,"log_date_2015-06-23":-1.25,"log_date_2015-06-17":-0.75,"log_date_2015-06-24":-0.75,"log_date_2015-06-10":4.25,"log_date_2015-06-29":-2},
{"name":"Example2","total":32.25,"log_date_2015-06-27":-0.25,"log_date_2015-06-14":0.5,"log_date_2015-07-02":0.25,"log_date_2015-06-03":6.75,"log_date_2015-06-11":1.25,"log_date_2015-06-29":0,"log_date_2015-07-07":0.25,"log_date_2015-06-04":1.5,"log_date_2015-06-10":-1,"log_date_2015-06-17":5,"log_date_2015-06-06":3.5,"log_date_2015-06-24":0.25,"log_date_2015-06-23":0.25,"log_date_2015-06-09":0.25,"log_date_2015-07-03":1,"log_date_2015-07-01":0.25,"log_date_2015-06-21":0.5,"log_date_2015-06-16":-0.5,"log_date_2015-06-22":6,"log_date_2015-06-05":0,"log_date_2015-06-08":-0.25,"log_date_2015-06-13":-0.25,"log_date_2015-06-28":0.5,"log_date_2015-06-07":0.25,"log_date_2015-07-06":1,"log_date_2015-06-15":-1,"log_date_2015-06-20":0.25,"log_date_2015-07-05":0.5,"log_date_2015-07-04":0.25,"log_date_2015-06-12":0.25,"log_date_2015-06-19":2.5,"log_date_2015-06-30":0.25,"log_date_2015-06-26":1.25,"log_date_2015-06-02":-0.5,"log_date_2015-06-01":1.75,"log_date_2015-06-18":-0.5,"log_date_2015-06-25":0.25},
{"name":"Example3","total":46,"log_date_2015-06-15":0,"log_date_2015-06-13":1.75,"log_date_2015-06-28":-0.25,"log_date_2015-06-22":2.75,"log_date_2015-06-18":0.5,"log_date_2015-06-02":0,"log_date_2015-06-01":0.75,"log_date_2015-06-19":0,"log_date_2015-06-30":-0.75,"log_date_2015-06-26":3.75,"log_date_2015-07-04":0,"log_date_2015-06-12":0.25,"log_date_2015-06-11":-0.75,"log_date_2015-06-25":0.25,"log_date_2015-06-03":2.5,"log_date_2015-06-14":7.75,"log_date_2015-06-27":0.25,"log_date_2015-07-02":-0.5,"log_date_2015-06-09":6.75,"log_date_2015-07-03":0.75,"log_date_2015-07-01":6.5,"log_date_2015-06-21":0.5,"log_date_2015-06-17":4,"log_date_2015-06-24":0.5,"log_date_2015-06-06":0.5,"log_date_2015-06-23":1.75,"log_date_2015-06-10":0,"log_date_2015-06-29":-2.5,"log_date_2015-07-07":0.25,"log_date_2015-06-04":-3.25,"log_date_2015-06-20":3.5,"log_date_2015-07-05":0.25,"log_date_2015-07-06":0.5,"log_date_2015-06-05":2.5,"log_date_2015-06-08":3,"log_date_2015-06-07":-0.25,"log_date_2015-06-16":2.5},
{"name":"Example1","total":19.5,"log_date_2015-07-01":-0.25,"log_date_2015-06-09":5.5,"log_date_2015-06-06":-0.5,"log_date_2015-06-04":-0.25,"log_date_2015-07-07":-1.75,"log_date_2015-06-11":6,"log_date_2015-06-25":-0.75,"log_date_2015-06-03":-0.75,"log_date_2015-07-02":-1.25,"log_date_2015-06-27":0.75,"log_date_2015-06-14":3.25,"log_date_2015-06-18":-1.25,"log_date_2015-06-02":-1,"log_date_2015-06-01":5,"log_date_2015-06-26":-1,"log_date_2015-06-19":-0.5,"log_date_2015-06-30":1.25,"log_date_2015-06-12":3.25,"log_date_2015-07-04":-2.5,"log_date_2015-07-05":4,"log_date_2015-06-20":-2.75,"log_date_2015-06-15":-1.5,"log_date_2015-07-06":-1.75,"log_date_2015-06-28":-0.5,"log_date_2015-06-07":-1,"log_date_2015-06-05":-0.75,"log_date_2015-06-08":1.25,"log_date_2015-06-13":3.25,"log_date_2015-06-16":1.75,"log_date_2015-06-22":-1.5,"log_date_2015-06-21":0,"log_date_2015-07-03":6.25,"log_date_2015-06-23":-1.25,"log_date_2015-06-17":-0.75,"log_date_2015-06-24":-0.75,"log_date_2015-06-10":4.25,"log_date_2015-06-29":-2},
{"name":"Example2","total":32.25,"log_date_2015-06-27":-0.25,"log_date_2015-06-14":0.5,"log_date_2015-07-02":0.25,"log_date_2015-06-03":6.75,"log_date_2015-06-11":1.25,"log_date_2015-06-29":0,"log_date_2015-07-07":0.25,"log_date_2015-06-04":1.5,"log_date_2015-06-10":-1,"log_date_2015-06-17":5,"log_date_2015-06-06":3.5,"log_date_2015-06-24":0.25,"log_date_2015-06-23":0.25,"log_date_2015-06-09":0.25,"log_date_2015-07-03":1,"log_date_2015-07-01":0.25,"log_date_2015-06-21":0.5,"log_date_2015-06-16":-0.5,"log_date_2015-06-22":6,"log_date_2015-06-05":0,"log_date_2015-06-08":-0.25,"log_date_2015-06-13":-0.25,"log_date_2015-06-28":0.5,"log_date_2015-06-07":0.25,"log_date_2015-07-06":1,"log_date_2015-06-15":-1,"log_date_2015-06-20":0.25,"log_date_2015-07-05":0.5,"log_date_2015-07-04":0.25,"log_date_2015-06-12":0.25,"log_date_2015-06-19":2.5,"log_date_2015-06-30":0.25,"log_date_2015-06-26":1.25,"log_date_2015-06-02":-0.5,"log_date_2015-06-01":1.75,"log_date_2015-06-18":-0.5,"log_date_2015-06-25":0.25},{"name":"Example3","total":46,"log_date_2015-06-15":0,"log_date_2015-06-13":1.75,"log_date_2015-06-28":-0.25,"log_date_2015-06-22":2.75,"log_date_2015-06-18":0.5,"log_date_2015-06-02":0,"log_date_2015-06-01":0.75,"log_date_2015-06-19":0,"log_date_2015-06-30":-0.75,"log_date_2015-06-26":3.75,"log_date_2015-07-04":0,"log_date_2015-06-12":0.25,"log_date_2015-06-11":-0.75,"log_date_2015-06-25":0.25,"log_date_2015-06-03":2.5,"log_date_2015-06-14":7.75,"log_date_2015-06-27":0.25,"log_date_2015-07-02":-0.5,"log_date_2015-06-09":6.75,"log_date_2015-07-03":0.75,"log_date_2015-07-01":6.5,"log_date_2015-06-21":0.5,"log_date_2015-06-17":4,"log_date_2015-06-24":0.5,"log_date_2015-06-06":0.5,"log_date_2015-06-23":1.75,"log_date_2015-06-10":0,"log_date_2015-06-29":-2.5,"log_date_2015-07-07":0.25,"log_date_2015-06-04":-3.25,"log_date_2015-06-20":3.5,"log_date_2015-07-05":0.25,"log_date_2015-07-06":0.5,"log_date_2015-06-05":2.5,"log_date_2015-06-08":3,"log_date_2015-06-07":-0.25,"log_date_2015-06-16":2.5} ,
{"name":"Example1","total":19.5,"log_date_2015-07-01":-0.25,"log_date_2015-06-09":5.5,"log_date_2015-06-06":-0.5,"log_date_2015-06-04":-0.25,"log_date_2015-07-07":-1.75,"log_date_2015-06-11":6,"log_date_2015-06-25":-0.75,"log_date_2015-06-03":-0.75,"log_date_2015-07-02":-1.25,"log_date_2015-06-27":0.75,"log_date_2015-06-14":3.25,"log_date_2015-06-18":-1.25,"log_date_2015-06-02":-1,"log_date_2015-06-01":5,"log_date_2015-06-26":-1,"log_date_2015-06-19":-0.5,"log_date_2015-06-30":1.25,"log_date_2015-06-12":3.25,"log_date_2015-07-04":-2.5,"log_date_2015-07-05":4,"log_date_2015-06-20":-2.75,"log_date_2015-06-15":-1.5,"log_date_2015-07-06":-1.75,"log_date_2015-06-28":-0.5,"log_date_2015-06-07":-1,"log_date_2015-06-05":-0.75,"log_date_2015-06-08":1.25,"log_date_2015-06-13":3.25,"log_date_2015-06-16":1.75,"log_date_2015-06-22":-1.5,"log_date_2015-06-21":0,"log_date_2015-07-03":6.25,"log_date_2015-06-23":-1.25,"log_date_2015-06-17":-0.75,"log_date_2015-06-24":-0.75,"log_date_2015-06-10":4.25,"log_date_2015-06-29":-2},{"name":"Example2","total":32.25,"log_date_2015-06-27":-0.25,"log_date_2015-06-14":0.5,"log_date_2015-07-02":0.25,"log_date_2015-06-03":6.75,"log_date_2015-06-11":1.25,"log_date_2015-06-29":0,"log_date_2015-07-07":0.25,"log_date_2015-06-04":1.5,"log_date_2015-06-10":-1,"log_date_2015-06-17":5,"log_date_2015-06-06":3.5,"log_date_2015-06-24":0.25,"log_date_2015-06-23":0.25,"log_date_2015-06-09":0.25,"log_date_2015-07-03":1,"log_date_2015-07-01":0.25,"log_date_2015-06-21":0.5,"log_date_2015-06-16":-0.5,"log_date_2015-06-22":6,"log_date_2015-06-05":0,"log_date_2015-06-08":-0.25,"log_date_2015-06-13":-0.25,"log_date_2015-06-28":0.5,"log_date_2015-06-07":0.25,"log_date_2015-07-06":1,"log_date_2015-06-15":-1,"log_date_2015-06-20":0.25,"log_date_2015-07-05":0.5,"log_date_2015-07-04":0.25,"log_date_2015-06-12":0.25,"log_date_2015-06-19":2.5,"log_date_2015-06-30":0.25,"log_date_2015-06-26":1.25,"log_date_2015-06-02":-0.5,"log_date_2015-06-01":1.75,"log_date_2015-06-18":-0.5,"log_date_2015-06-25":0.25},
{"name":"Example3","total":46,"log_date_2015-06-15":0,"log_date_2015-06-13":1.75,"log_date_2015-06-28":-0.25,"log_date_2015-06-22":2.75,"log_date_2015-06-18":0.5,"log_date_2015-06-02":0,"log_date_2015-06-01":0.75,"log_date_2015-06-19":0,"log_date_2015-06-30":-0.75,"log_date_2015-06-26":3.75,"log_date_2015-07-04":0,"log_date_2015-06-12":0.25,"log_date_2015-06-11":-0.75,"log_date_2015-06-25":0.25,"log_date_2015-06-03":2.5,"log_date_2015-06-14":7.75,"log_date_2015-06-27":0.25,"log_date_2015-07-02":-0.5,"log_date_2015-06-09":6.75,"log_date_2015-07-03":0.75,"log_date_2015-07-01":6.5,"log_date_2015-06-21":0.5,"log_date_2015-06-17":4,"log_date_2015-06-24":0.5,"log_date_2015-06-06":0.5,"log_date_2015-06-23":1.75,"log_date_2015-06-10":0,"log_date_2015-06-29":-2.5,"log_date_2015-07-07":0.25,"log_date_2015-06-04":-3.25,"log_date_2015-06-20":3.5,"log_date_2015-07-05":0.25,"log_date_2015-07-06":0.5,"log_date_2015-06-05":2.5,"log_date_2015-06-08":3,"log_date_2015-06-07":-0.25,"log_date_2015-06-16":2.5}
]
});
});
function totalTextFormatter(data) {
return 'Total';
}
function sumFormatter(data) {
field = this.field;
var total_sum = data.reduce(function(sum, row) {
return (sum) + (row[field] || 0);
}, 0);
return total_sum;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Maintain selected on server side.</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>
<!-- https://lodash.com/ -->
<script src="//cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Maintain selected on server side.(<a href="https://github.com/wenzhixin/bootstrap-table/issues/917" target="_blank">#917</a>).</h1>
<table id="table"
data-toggle="table"
data-pagination="true"
data-side-pagination="server"
data-url="/examples/bootstrap_table/data"
data-response-handler="responseHandler">
<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'),
selections = [];
$(function () {
$table.on('check.bs.table check-all.bs.table ' +
'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
return row.id;
}),
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
selections = _[func](selections, ids);
});
});
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Editable select box</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="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.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="../assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Editable select box(<a href="https://github.com/wenzhixin/bootstrap-table/issues/986" target="_blank">#986</a>).</h1>
<table id="table"></table>
</div>
<script>
var data = [{
"name": "active"
}, {
"name": "blocked"
}, {
"name": "deleted"
}];
var $table = $('#table');
$(function () {
$table.bootstrapTable({
idField: 'name',
columns: [{
field: 'state',
title: '',
checkbox: true
}, {
field: 'name',
title: 'names',
sortable: true,
editable: {
type: 'select',
source: [
{value: 'active', text: 'Active'},
{value: 'blocked', text: 'Blocked'},
{value: 'deleted', text: 'Deleted'}
]
}
}],
data: data
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>Save row data using input.</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>Save row data using input.(<a href="https://github.com/wenzhixin/bootstrap-table/issues/987" target="_blank">#987</a>).</h1>
<table id="table"
data-toggle="table"
data-search="true"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
<th data-field="selling"
data-formatter="inputFormatter"
data-events="inputEvents">Selling</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
function inputFormatter(value) {
var checked = value ? 'checked' : '';
return '<input type="checkbox" ' + checked + ' />';
}
window.inputEvents = {
'change :checkbox': function (e, value, row, index) {
row.selling = $(e.target).prop('checked');
$table.bootstrapTable('updateRow', {
index: index,
row: row
});
}
};
</script>
</body>
</html>

View File

@@ -0,0 +1,25 @@
var fs = require('fs'),
baseUrl = 'http://issues.wenzhixin.net.cn/bootstrap-table/';
fs.readdir('./', function (err, list) {
if (err) {
console.log(err);
return;
}
var content = fs.readFileSync('../index.html.conf').toString(),
html = [];
list.sort().forEach(function (file) {
if (/^\d+.html$/.test(file)) {
var content = fs.readFileSync(file).toString(),
m = content.match(/<title>(.*)<\/title>/);
if (m) {
html.push('<li><a href="issues/' + file + '">',
file.split('.')[0] + '. ' + m[1],
'</a></li>');
}
}
});
fs.writeFileSync('../index.html', content.replace('@@list@@', html.join('\n')));
});

View File

@@ -0,0 +1,36 @@
<!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(<a href="https://github.com/wenzhixin/bootstrap-table/issues/%(issue)s" target="_blank">#%(issue)s</a>).</h1>
<table id="table"
data-toggle="table"
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');
$(function () {
});
</script>
</body>
</html>

View File

@@ -0,0 +1,18 @@
var fs = require('fs'),
sprintf = require('sprintf');
if (process.argv.length < 3) {
console.log('You need to enter title');
return;
}
var content = fs.readFileSync('./template.html').toString(),
issue = process.argv[2],
title = process.argv[3] || '';
content = sprintf(content, {
issue: issue,
title: title
});
fs.writeFileSync(sprintf('./%s.html', issue), content);