Bootstrap Table 使用示例及代码
http://issues.wenzhixin.net.cn/bootstrap-table/
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table Examples</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="//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="ga.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<![endif]-->
</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="/examples/bootstrap_table/data"
data-response-handler="responseHandler">
</table>
</div> <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="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
} window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
}; function totalTextFormatter(data) {
return 'Total';
} function totalNameFormatter(data) {
return data.length;
} function totalPriceFormatter(data) {
var total = 0;
$.each(data, function (i, row) {
total += +(row.price.substring(1));
});
return '$' + total;
} function getHeight() {
return $(window).height() - $('h1').outerHeight(true);
} $(function () {
var scripts = [
location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
],
eachSeries = function (arr, iterator, callback) {
callback = callback || function () {};
if (!arr.length) {
return callback();
}
var completed = 0;
var iterate = function () {
iterator(arr[completed], function (err) {
if (err) {
callback(err);
callback = function () {};
}
else {
completed += 1;
if (completed >= arr.length) {
callback(null);
}
else {
iterate();
}
}
});
};
iterate();
}; eachSeries(scripts, getScript, initTable);
}); function getScript(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = url; var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState ||
this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
if (callback)
callback(); // Handle memory leak in IE
script.onload = script.onreadystatechange = null;
}
}; head.appendChild(script); // We handle everything using the script element injection
return undefined;
}
</script>
</body>
</html>
Bootstrap Table 使用示例及代码的更多相关文章
- Bootstrap 实现CRUD示例及代码
https://github.com/wenzhixin/bootstrap-table-examples/blob/master/crud/index.html <!DOCTYPE html& ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI
一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...
随机推荐
- <audio>标签HTML5音乐播放器
<audio>标签:用于在文档中表示音频内容.利用它,你可以在你的个人网站上放一首你喜欢的歌. <audio src="music.mp3">< ...
- 使用 Rational AppScan 保证 Web 应用的安全性，第 2 部分: 使用 Rational AppScan 应对 Web 应用攻击
1 当前 Web 安全现状 互联网的发展历史也可以说是攻击与防护不断交织发展的过程.目前,全球因特网用户已达 13.5 亿,用户利用网络进行购物.银行转账支付和各种软件下载,企业用户更是依赖于互联网构 ...
- 51Nod 最大子矩阵和 | DP
Input 第1行:M和N,中间用空格隔开(2 <= M,N <= 500). 第2 - N + 1行:矩阵中的元素,每行M个数,中间用空格隔开.(-10^9 <= M[i] < ...
- 51Nod 1095 Anigram单词 | Hash
Input示例 5 add dad bad cad did 3 add cac dda Output示例 1 0 2 题意:一系列字符串,查询字符串S,能通过其他字符串交换串内字符顺序得到的字符串个数 ...
- python字符串内置函数
1.字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,‘’或“”或‘’‘ ’‘’中间包含的内容称之为字符串特性:1.只能存放一个值2.不可变3.按照从左到右的顺序定义字符集合,下标 ...
- Elasticsearch 5.6.5 安装教程
下载地址 https://www.elastic.co/downloads/past-releases/elasticsearch-5-6-5 安装环境 centos6.5 , jdk1.8 ...
- 【BZOJ】1607: [Usaco2008 Dec]Patting Heads 轻拍牛头
[算法]模拟 #include<cstdio> #include<algorithm> using namespace std; ,maxm=; int a[maxn],A[m ...
- 如何设计一个优雅健壮的Android WebView？（下）
转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...
- Hadoop和大数据：60款顶级开源工具（山东数漫江湖）
说到处理大数据的工具,普通的开源解决方案(尤其是Apache Hadoop)堪称中流砥柱.弗雷斯特调研公司的分析师Mike Gualtieri最近预测,在接下来几年,“100%的大公司”会采用Hado ...
- 基于 python imageai 对象检测 目标检测 识别 视频
1.视频连接如下: http://www.iqiyi.com/w_19s6vownit.html