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,32 @@
<!DOCTYPE html>
<html>
<head>
<title>aligning-columns</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>Aligning Columns</h1>
<p>Use <code>align</code>, <code>halign</code> and <code>valign</code> options to set the alignment of the columns and their header.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id" data-halign="right" data-align="center">Item ID</th>
<th data-field="name" data-halign="center" data-align="left">Item Name</th>
<th data-field="price" data-halign="left" data-align="right">Item
</tr>
</thead>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>basic-columns</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>Basic Columns</h1>
<p>Use <code>showColumns</code>, <code>minimumCountColumns</code> options, and <code>visible</code>, <code>switchable</code> column options to show the columns menu list use to switch.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data5.json"
data-show-columns="true"
data-id-field="id">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name" data-switchable="false">Name</th>
<th data-field="price">Price</th>
<th data-field="column1">Columns1</th>
<th data-field="column2" data-visible="false">Columns2</th>
<th data-field="column3" data-switchable="false">Columns3</th>
<th data-field="column4" data-visible="false">Columns4</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>basic-sort</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>Basic Sort</h1>
<p>Use <code>sortName</code>, <code>sortOrder</code>, <code>sortable</code> options, and <code>sortable</code>, <code>order</code> column options to set the basic sort of bootstrap table.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data1.json"
data-sort-name="name"
data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-sortable="true">Item ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<title>Boolean Options</title>
<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/multiple-select/multiple-select.css">
<link rel="stylesheet" href="../assets/examples.css">
<style>
.boolean-options {margin: 20px 0;}
.boolean-options select {width: 400px;}
.ms-drop input[type="checkbox"] {vertical-align: top;}
</style>
<script src="../assets/jquery.min.js"></script>
<script src="../assets/sprintf.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../assets/multiple-select/multiple-select.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Boolean Options</h1>
<div class="boolean-options">
<b>Table Options:</b> <select id="tableSelect" multiple="multiple"></select>
<b>Column Options:</b> <select id="columnSelect" multiple="multiple"></select>
</div>
<table id="table"></table>
</div>
<script>
var $tableSelect = $('#tableSelect'),
$columnSelect = $('#columnSelect'),
$table = $('#table'),
defaultTableOptions = {},
defaultColumnOptions = {};
$(function () {
initOptions($.fn.bootstrapTable.defaults, defaultTableOptions, $tableSelect);
initOptions($.fn.bootstrapTable.columnDefaults, defaultColumnOptions, $columnSelect);
initTable();
});
function initOptions(defaults, defaultOptions, $select) {
var html = [];
$.each(defaults, function (key, value) {
if (typeof value === 'boolean') {
html.push(sprintf('<option value="%(key)s" %(value)s>%(key)s</option>', {
key: key,
value: value ? 'selected' : ''
}));
if ($.inArray(key, ['radio', 'checkbox'] === -1)) {
defaultOptions[key] = false;
}
}
});
$select.html(html.join('')).multipleSelect({
onClick: initTable,
onCheckAll: initTable,
onUncheckAll: initTable
});
}
function initTable() {
var defaultColumns = [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
selectsColumns = [{
field: 'state'
}, {
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
columns = [],
tableOptions = {},
columnOptions = {};
$.each($tableSelect.multipleSelect('getSelects'), function (i, key) {
tableOptions[key] = true;
});
$.each($columnSelect.multipleSelect('getSelects'), function (i, key) {
columnOptions[key] = true;
});
if (columnOptions.checkbox) {
columns = selectsColumns.slice(0);
columns[0].checkbox = true;
} else if (columnOptions.radio) {
columns = selectsColumns.slice(0);
columns[0].radio = true;
} else {
columns = defaultColumns.slice(0);
}
delete columnOptions.checkbox;
delete columnOptions.radio;
$.each(columns, function (i, column) {
columns[i] = $.extend({}, defaultColumnOptions, columnOptions, column);
});
$table.bootstrapTable('destroy').bootstrapTable($.extend({
url: '../json/data1.json',
columns: columns
}, defaultTableOptions, tableOptions));
}
</script>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>client-side-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>Client Side Pagination</h1>
<p>Use <code>pagination</code>, <code>sidePagination</code>, <code>pageNumber</code>, <code>pageSize</code>, <code>pageList</code> options to set the pagination options.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-pagination="true"
data-search="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');
$(function () {
});
</script>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>custom-ajax</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>Custom Ajax</h1>
<p>Use <code>ajax</code> option: A method to replace ajax call. Should implement the same API as jQuery ajax method.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-ajax="ajaxRequest"
data-search="true"
data-side-pagination="server"
data-pagination="true">
<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');
// your custom ajax request here
function ajaxRequest(params) {
// data you need
console.log(params.data);
// just use setTimeout
setTimeout(function () {
params.success({
total: 100,
rows: [{
"id": 0,
"name": "Item 0",
"price": "$0"
}]
});
}, 1000);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>custom-sort</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>Custom Sort</h1>
<p>Use <code>sorter</code> column option to define the custom sort of bootstrap table.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data1.json"
data-sort-name="price"
data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-sortable="true">Item ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
function priceSorter(a, b) {
a = +a.substring(1); // remove $
b = +b.substring(1);
if (a > b) return 1;
if (a < b) return -1;
return 0;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>custom-toolbar</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>
.w70 {width: 70px !important;}
</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>Custom Toolbar</h1>
<p>Use <code>toolbar</code> option to define the custom toolbars.</p>
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<span>Offset: </span>
<input name="offset" class="form-control w70" type="number" value="0">
</div>
<div class="form-group">
<span>Limit: </span>
<input name="limit" class="form-control w70" type="number" value="5">
</div>
<div class="form-group">
<input name="search" class="form-control" type="text" placeholder="Search">
</div>
<button id="ok" type="submit" class="btn btn-default">OK</button>
</div>
</div>
<table id="table"
data-toggle="table"
data-height="460"
data-toolbar="#toolbar"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-query-params="queryParams"
data-response-handler="responseHandler"
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'),
$ok = $('#ok');
$(function () {
$ok.click(function () {
$table.bootstrapTable('refresh');
});
});
function queryParams() {
var params = {};
$('#toolbar').find('input[name]').each(function () {
params[$(this).attr('name')] = $(this).val();
});
return params;
}
function responseHandler(res) {
return res.rows;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Detail View</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>Detail View</h1>
<p>Use <code>detailView</code> and <code>detailFormatter</code> options to show detail view.</p>
<table id="table"
data-toggle="table"
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>
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,51 @@
<!DOCTYPE html>
<html>
<head>
<title>disabled-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>Disabled Checkbox</h1>
<p>Use <code>checkboxHeader</code>, <code>checkboxEnable</code> options and <code>formatter</code> column option to disabled select input.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-click-to-select="true"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="state" data-checkbox="true"
data-formatter="stateFormatter"></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>
function stateFormatter(value, row, index) {
if (index === 2) {
return {
disabled: true
};
}
if (index === 5) {
return {
disabled: true,
checked: true
}
}
return value;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>format</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>Format</h1>
<p>Use <code>formatter</code> column option to format the display of bootstrap table column.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id" data-formatter="ID: %s">ID</th>
<th data-field="name" data-formatter="nameFormatter">Item Name</th>
<th data-field="price" data-formatter="priceFormatter">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
function nameFormatter(value, row) {
var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
return '<i class="glyphicon ' + icon + '"></i> ' + value;
}
function priceFormatter(value) {
// 16777215 == ffffff in decimal
var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
return '<div style="color: ' + color + '">' +
'<i class="glyphicon glyphicon-usd"></i>' +
value.substring(1) +
'</div>';
}
</script>
</body>
</html>

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>from-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>From data</h1>
<p></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 () {
var data = [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
}
];
$table.bootstrapTable({data: data});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Table from html</title>
<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>Table from html</h1>
<p>Transform table from an existing, unformatted html table.</p>
<table data-toggle="table">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Forks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table">
<td id="td-id-1" class="td-class-1" data-title="bootstrap table">
<a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
</td>
<td data-value="526">526</td>
<td data-text="122">122</td>
<td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">
<a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">
<a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">
<a href="https://github.com/wenzhixin/blog">blog</a>
</td>
<td>13</td>
<td>4</td>
<td>my blog</td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">
<a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
<td>6</td>
<td>3</td>
<td>Redmine notification tools for chrome extension.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Group Columns</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>Group Columns</h1>
<p>Use <code>rowspan, colspan</code> options to set the group columns header.</p>
<table id="table"
data-toggle="table"
data-url="../json/data1.json">
<thead>
<tr>
<th colspan="2">Item Detail</th>
<th data-field="id" rowspan="2" data-valign="middle">Item ID</th>
</tr>
<tr>
<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,53 @@
<!DOCTYPE html>
<html>
<head>
<title>large-columns</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>Large Columns</h1>
<p>Bootstrap table support large columns, it will auto to show the horizontal scroll bar.</p>
<table id="table" data-height="400" data-show-columns="true"></table>
</div>
<script>
var $table = $('#table');
$(function () {
buildTable($table, 50, 50);
});
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,
sortable: true
});
}
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,60 @@
<!DOCTYPE html>
<html>
<head>
<title>Modal 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 src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Modal Table</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalTable">
Launch modal table
</button>
<div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal table</h4>
</div>
<div class="modal-body">
<table id="table"
data-toggle="table"
data-height="299"
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 class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script>
var $table = $('#table');
$(function () {
$('#modalTable').on('shown.bs.modal', function () {
$table.bootstrapTable('resetView');
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<title>Multiple 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 src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Multiple Table</h1>
<p></p>
<div class="row">
<div class="col-md-3">
<table data-toggle="table"
data-url="../json/data3.json">
<thead>
<tr>
<th data-field="github.name"
data-formatter="operateFormatter"
data-events="operateEvents">Bookmark 1</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-3">
<table data-toggle="table"
data-url="../json/data3.json">
<thead>
<tr>
<th data-field="github.name"
data-formatter="operateFormatter"
data-events="operateEvents">Bookmark 2</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-3">
<table data-toggle="table"
data-url="../json/data3.json">
<thead>
<tr>
<th data-field="github.name"
data-formatter="operateFormatter"
data-events="operateEvents">Bookmark 3</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-3">
<table data-toggle="table"
data-url="../json/data3.json">
<thead>
<tr>
<th data-field="github.name"
data-formatter="operateFormatter"
data-events="operateEvents">Bookmark 4</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
window.operateEvents = {
'click .like': function (e, value, row) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row) {
alert('You click remove action, row: ' + JSON.stringify(row));
}
};
function operateFormatter(value, row, index) {
return [
'<div class="pull-left">',
'<a href="https://github.com/wenzhixin/' + value + '" target="_blank">' + value + '</a>',
'</div>',
'<div class="pull-right">',
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>',
'</div>'
].join('');
}
</script>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>no-bordered</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>No Bordered</h1>
<p>Set classes option to <code>table table-no-bordered</code>.</p>
<table id="table"
data-toggle="table"
data-classes="table table-no-bordered"
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,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Pagination Custom Text</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>Pagination Custom Text</h1>
<p>Use <code>paginationFirstText</code>, <code>paginationPreText</code>, <code>paginationNextText</code>, <code>paginationLastText</code> options to set the pagination text.</p>
<table id="table"
data-toggle="table"
data-height="460"
data-url="../json/data1.json"
data-pagination="true"
data-page-size="5"
data-page-list="[5,8,10]"
data-pagination-first-text="First"
data-pagination-pre-text="Previous"
data-pagination-next-text="Next"
data-pagination-last-text="Last">
<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,43 @@
<!DOCTYPE html>
<html>
<head>
<title>server-side-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>Server Side Pagination</h1>
<p>Use <code>sidePagination: 'server'</code> option to define the server side pagination of table.</p>
<table id="table"
data-toggle="table"
data-url="/examples/bootstrap_table/data"
data-height="400"
data-side-pagination="server"
data-pagination="true"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-search="true">
<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 () {
});
</script>
</body>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>Sub 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 src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>Sub Table</h1>
<p>Use <code>onExpandRow</code> event to handle your detail view.</p>
<table id="table"
data-detail-view="true">
<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 () {
buildTable($table, 8, 1);
});
function expandTable($detail, cells) {
buildTable($detail.html('<table></table>').find('table'), cells, 1);
}
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,
sortable: true
});
}
for (i = 0; i < rows; i++) {
row = {};
for (j = 0; j < cells; j++) {
row['field' + j] = 'Row-' + i + '-' + j;
}
data.push(row);
}
$el.bootstrapTable({
columns: columns,
data: data,
detailView: cells > 1,
onExpandRow: function (index, row, $detail) {
expandTable($detail, cells - 1);
}
});
}
</script>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>table-style</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>Table Style</h1>
<p>Use <code>height</code>, <code>classes</code>, <code>striped</code>, <code>rowStyle</code> options and <code>class</code>, <code>width</code>, <code>cellStyle</code> column options to set the styles of bootstrap table.</p>
<table data-toggle="table"
data-url="../json/data1.json"
data-height="400"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="id" class="col-md-2">Item ID</th>
<th data-field="name" class="col-md-6">
<i class="glyphicon glyphicon-star"></i>
Item Name
</th>
<th data-field="price" class="col-md-4">
<i class="glyphicon glyphicon-heart"></i>
Item Price
</th>
</tr>
</thead>
</table>
</div>
<script>
function rowStyle(row, index) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
};
}
return {};
}
</script>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!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>
<table id="table"
data-toggle="table"
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');
$(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);