forked from Mirrors/apostrophe
250 lines
8.5 KiB
HTML
250 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Twitter Bootstrap integration - Handsontable</title>
|
|
|
|
<!--
|
|
Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
|
|
-->
|
|
<script data-jsfiddle="common" src="../demo/js/jquery.min.js"></script>
|
|
<script data-jsfiddle="common" src="../dist/handsontable.full.js"></script>
|
|
|
|
<link data-jsfiddle="common" rel="stylesheet" type="text/css" href="bootstrap/v3/css/bootstrap.css">
|
|
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../plugins/bootstrap/handsontable.bootstrap.css">
|
|
|
|
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.full.css">
|
|
|
|
<!--
|
|
Loading demo dependencies. They are used here only to enhance the examples on this page
|
|
-->
|
|
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
|
|
<script src="js/samples.js"></script>
|
|
<script src="js/highlight/highlight.pack.js"></script>
|
|
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
|
|
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
|
|
|
|
<!--
|
|
Facebook open graph. Don't copy this to your project :)
|
|
-->
|
|
<meta property="og:title" content="Handsontable cell type">
|
|
<meta property="og:description"
|
|
content="This page shows very specific example of using Handsontable as a cell editor in Handsontable.">
|
|
<meta property="og:url" content="http://handsontable.com/demo/handsontable.html">
|
|
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="409">
|
|
<meta property="og:image:height" content="164">
|
|
<link rel="canonical" href="http://handsontable.com/demo/handsontable.html">
|
|
|
|
<!--
|
|
Google Analytics for GitHub Page. Don't copy this to your project :)
|
|
-->
|
|
<script src="js/ga.js"></script>
|
|
<script>
|
|
window.Bootstrap = true;
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
.codeLayout pre {
|
|
background: none;
|
|
border: none;
|
|
width: 500px;
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin-top: -2px;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="wrapper">
|
|
<div class="wrapper-row">
|
|
<div id="global-menu-clone">
|
|
<h1><a href="../index.html">Handsontable</a></h1>
|
|
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div class="columnLayout">
|
|
|
|
<div class="rowLayout">
|
|
<div class="descLayout">
|
|
<div class="pad" data-jsfiddle="example1">
|
|
<h2>Twitter Bootstrap integration</h2>
|
|
|
|
<p>This page demonstrate example of using Handsontable with Twitter Bootstrap.</p>
|
|
|
|
<p>Please note that you should reset some of Bootstrap styles. You can use file <a
|
|
href="https://github.com/handsontable/handsontable/blob/master/plugins/bootstrap/handsontable.bootstrap.css">plugins/bootstrap/handsontable.bootstrap.css</a>
|
|
for that purpose.</p>
|
|
|
|
<p class="options">
|
|
<label><input data-type="table-bordered" type="checkbox"/> table-bordered </label>
|
|
<label><input data-type="table-striped" type="checkbox"/> table-striped</label>
|
|
<label><input data-type="table-hover" type="checkbox"/> table-hover</label>
|
|
</p>
|
|
|
|
<div id="example1"></div>
|
|
|
|
<p>
|
|
<button class="btn btn-info" name="dump" data-dump="#example1" data-instance="hot"
|
|
title="Prints current data source to Firebug/Chrome Dev Tools">
|
|
Dump
|
|
data to console
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="codeLayout">
|
|
<div class="pad">
|
|
<div class="jsFiddle">
|
|
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
|
|
</div>
|
|
|
|
<script data-jsfiddle="example1">
|
|
var data = [
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6],
|
|
[1, 2, 3, 4, 5, 6]
|
|
],
|
|
container = document.getElementById('example1'),
|
|
options = document.querySelectorAll('.options input'),
|
|
table,
|
|
hot;
|
|
|
|
hot = new Handsontable(container, {
|
|
data: data,
|
|
colHeaders: true,
|
|
rowHeaders: true,
|
|
minSpareRows: 1
|
|
});
|
|
table = document.querySelector('table');
|
|
|
|
Handsontable.Dom.addClass(table, 'table');
|
|
|
|
for (var i = 0, len = options.length; i < len; i++) {
|
|
Handsontable.Dom.addEvent(options[i], 'click', function () {
|
|
if (this.checked) {
|
|
Handsontable.Dom.addClass(table, this.getAttribute('data-type'))
|
|
}
|
|
else {
|
|
Handsontable.Dom.removeClass(table, this.getAttribute('data-type'))
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rowLayout">
|
|
<div class="descLayout">
|
|
<div class="pad" data-jsfiddle="example2">
|
|
|
|
<div class="row">
|
|
<div id="example2" class="col-xs-12" style="overflow: hidden;"></div>
|
|
</div>
|
|
|
|
<p>
|
|
<button class="btn btn-info" name="dump" data-dump="#example2" data-instance="hot"
|
|
title="Prints current data source to Firebug/Chrome Dev Tools">
|
|
Dump
|
|
data to console
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="codeLayout">
|
|
<div class="pad">
|
|
<div class="jsFiddle">
|
|
<button class="jsFiddleLink" data-runfiddle="example2">Edit in jsFiddle</button>
|
|
</div>
|
|
|
|
<script data-jsfiddle="example2">
|
|
var cols = 100,
|
|
rows = 10,
|
|
i, j, len,
|
|
data2 = [];
|
|
|
|
for (i = 0; i < rows; i++) {
|
|
data2[i] = [];
|
|
for (j = 0; j < cols; j++) {
|
|
data2[i].push(j + 1);
|
|
}
|
|
}
|
|
|
|
var container2 = document.getElementById('example2'),
|
|
table2,
|
|
hot2;
|
|
|
|
hot2 = new Handsontable(container2, {
|
|
data: data2,
|
|
colHeaders: true,
|
|
rowHeaders: true,
|
|
fixedColumnsLeft: 3,
|
|
fixedRowsTop: 3,
|
|
contextMenu: true
|
|
});
|
|
|
|
var ex = document.getElementById('example2');
|
|
table2 = ex.querySelectorAll('table');
|
|
|
|
function findAncestor(el, cls) {
|
|
while ((el = el.parentElement) && !el.classList.contains(cls)){
|
|
return el;
|
|
}
|
|
|
|
}
|
|
|
|
for (i = 0, len = table2.length; i < len; i++) {
|
|
var tableInstance = table2[i];
|
|
var isMaster = !!findAncestor(tableInstance, 'ht_master');
|
|
Handsontable.Dom.addClass(tableInstance, 'table');
|
|
Handsontable.Dom.addClass(tableInstance, 'table-hover');
|
|
Handsontable.Dom.addClass(tableInstance, 'table-striped');
|
|
if (isMaster) {
|
|
Handsontable.Dom.addClass(tableInstance, 'table-bordered');
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-text"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="outside-links-wrapper"></div>
|
|
|
|
</body>
|
|
</html>
|