dfgfdg
This commit is contained in:
32
public/assets/bt/options/aligning-columns.html
Normal file
32
public/assets/bt/options/aligning-columns.html
Normal 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>
|
||||
38
public/assets/bt/options/basic-columns.html
Normal file
38
public/assets/bt/options/basic-columns.html
Normal 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>
|
||||
34
public/assets/bt/options/basic-sort.html
Normal file
34
public/assets/bt/options/basic-sort.html
Normal 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>
|
||||
123
public/assets/bt/options/boolean-options.html
Normal file
123
public/assets/bt/options/boolean-options.html
Normal 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>
|
||||
40
public/assets/bt/options/client-side-pagination.html
Normal file
40
public/assets/bt/options/client-side-pagination.html
Normal 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>
|
||||
55
public/assets/bt/options/custom-ajax.html
Normal file
55
public/assets/bt/options/custom-ajax.html
Normal 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>
|
||||
43
public/assets/bt/options/custom-sort.html
Normal file
43
public/assets/bt/options/custom-sort.html
Normal 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>
|
||||
80
public/assets/bt/options/custom-toolbar.html
Normal file
80
public/assets/bt/options/custom-toolbar.html
Normal 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>
|
||||
43
public/assets/bt/options/detail-view.html
Normal file
43
public/assets/bt/options/detail-view.html
Normal 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>
|
||||
51
public/assets/bt/options/disabled-checkbox.html
Normal file
51
public/assets/bt/options/disabled-checkbox.html
Normal 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>
|
||||
48
public/assets/bt/options/format.html
Normal file
48
public/assets/bt/options/format.html
Normal 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>
|
||||
68
public/assets/bt/options/from-data.html
Normal file
68
public/assets/bt/options/from-data.html
Normal 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>
|
||||
73
public/assets/bt/options/from-html.html
Normal file
73
public/assets/bt/options/from-html.html
Normal 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>
|
||||
34
public/assets/bt/options/group-columns.html
Normal file
34
public/assets/bt/options/group-columns.html
Normal 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>
|
||||
53
public/assets/bt/options/large-columns.html
Normal file
53
public/assets/bt/options/large-columns.html
Normal 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>
|
||||
60
public/assets/bt/options/modal-table.html
Normal file
60
public/assets/bt/options/modal-table.html
Normal 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">×</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>
|
||||
96
public/assets/bt/options/multiple-table.html
Normal file
96
public/assets/bt/options/multiple-table.html
Normal 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>
|
||||
38
public/assets/bt/options/no-bordered.html
Normal file
38
public/assets/bt/options/no-bordered.html
Normal 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>
|
||||
39
public/assets/bt/options/pagination-custom-text.html
Normal file
39
public/assets/bt/options/pagination-custom-text.html
Normal 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>
|
||||
43
public/assets/bt/options/server-side-pagination.html
Normal file
43
public/assets/bt/options/server-side-pagination.html
Normal 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>
|
||||
70
public/assets/bt/options/sub-table.html
Normal file
70
public/assets/bt/options/sub-table.html
Normal 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>
|
||||
50
public/assets/bt/options/table-style.html
Normal file
50
public/assets/bt/options/table-style.html
Normal 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>
|
||||
38
public/assets/bt/options/template.html
Normal file
38
public/assets/bt/options/template.html
Normal 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>
|
||||
16
public/assets/bt/options/template.js
Normal file
16
public/assets/bt/options/template.js
Normal file
@@ -0,0 +1,16 @@
|
||||
var fs = require('fs'),
|
||||
sprintf = require('sprintf');
|
||||
|
||||
if (process.argv.length <= 2) {
|
||||
console.log('You need to enter title');
|
||||
return;
|
||||
}
|
||||
|
||||
var content = fs.readFileSync('./template.html').toString(),
|
||||
title = process.argv[2];
|
||||
|
||||
content = sprintf(content, {
|
||||
title: title
|
||||
});
|
||||
|
||||
fs.writeFileSync(sprintf('./%s.html', title.replace(/\//g, '-')), content);
|
||||
Reference in New Issue
Block a user