<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>例子</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-table/src/bootstrap-table.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-editable.css" />
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/examples.css" />
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="ga.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Table Examples <a href="https://github.com/wenzhixin/bootstrap-table-examples" class="btn btn-primary" role="button" target="_blank">Learn more »</a></h1>
<div id="toolbar">
<button id="remove" class="btn btn-danger" disabled>
<i class="glyphicon glyphicon-remove"></i> Delete
</button>
</div>
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-url="data.json"
data-response-handler="responseHandler">
</table>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<!--<script src="assets/bootstrap-table/src/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js" type="text/javascript" charset="utf-8"></script>
<script src="http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js" charset="utf-8"></script>
<script src="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js" type="text/javascript" charset="utf-8"></script>-->
<script>
var $table = $('#table'),
$remove = $('#remove'),
selections = [];
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [
[
{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}
],
[
{
field: 'name',
title: 'Item Name',
sortable: true,
editable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
editable: {
type: 'text',
title: 'Item Price',
validate: function (value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start width $.'
}
var data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log(data[index]);
return '';
}
},
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
]
});
// sometimes footer render error.
setTimeout(function () {
$table.bootstrapTable('resetView');
}, 200);
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
$table.on('expand-row.bs.table', function (e, index, row, $detail) {
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', function (res) {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args);
});
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
$(window).resize(function () {
$table.bootstrapTable('resetView', {
height: getHeight()
});
});
}
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
}
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Li
Bootstrap Table的官网例子
4星 · 超过85%的资源 需积分: 44 71 浏览量
2017-09-27
18:11:13
上传
评论 5
收藏 152KB RAR 举报 
Bootstrap Table表格示例.rar （20个子文件） 
表格例子 
.project 667B ga.js 396B jquery.min.js 94KB bootstrap-editable.css 21KB assets bootstrap js bootstrap.min.js 31KB fonts glyphicons-halflings-regular.woff 23KB css bootstrap-table.css 7KB bootstrap.min.css 107KB bootstrap-editable.css 21KB examples.css 0B bootstrap-table src bootstrap-table.js 107KB bootstrap-table.css 7KB extensions export bootstrap-table-export.js 0B editable bootstrap-table-editable.js 5KB ga.js 391B jquery.min.js 94KB examples.css 0B data.json 2KB
test.html 11KB welcome.html 11KB
评论11
最新资源