knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#119,view/slickgrid][m]: first pass implementation of slickgrid view courtesy of @amercader.

Browse Source 
New setup supports:

* Column hiding
* Column reordering
* Column sorting
* Column resizing
* Fit columns to the div width

All these options are stored on the view state and applied when initializing the view if necessary.

Now also utilize slickgrid view as default grid view.
This commit is contained in:
Rufus Pollock
2012-05-27 23:31:42 +01:00
parent ea6f051aba
commit d339fea2d9
15 changed files with 1464 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/index.html
View File

@@ -15,11 +15,13 @@
<!--[if lte IE 8]>
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="../vendor/slickgrid/2.0.1/slick.grid.css">
<link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="../css/data-explorer.css">
<link rel="stylesheet" href="../css/grid.css">
<link rel="stylesheet" href="../css/slickgrid.css">
<link rel="stylesheet" href="../css/graph.css">
<link rel="stylesheet" href="../css/map.css">
<!-- /Recline CSS components -->
@@ -38,6 +40,9 @@
<script type="text/javascript" src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="../vendor/timeline/20120520/js/timeline.js"></script>
<!-- recline library -->
@@ -51,9 +56,10 @@
<script type="text/javascript" src="../src/backend/dataproxy.js"></script>
<script type="text/javascript" src="../src/backend/elasticsearch.js"></script>
<script type="text/javascript" src="../src/backend/gdocs.js"></script>
<script type="text/javascript" src="../src/backend/localcsv.js"></script>
<script type="text/javascript" src="../src/backend/csv.js"></script>
<script type="text/javascript" src="../src/view.js"></script>
<script type="text/javascript" src="../src/view-grid.js"></script>
<script type="text/javascript" src="../src/view-slickgrid.js"></script>
<script type="text/javascript" src="../src/view-graph.js"></script>
<script type="text/javascript" src="../src/view-map.js"></script>
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
@@ -63,7 +69,7 @@
<script type="text/javascript" src="js/app.js"></script>
<!-- for demo dataset -->
<script type="text/javascript" src="../test/base.js"></script>
</head>
</head>
<body>
<div class="recline-app">
<div class="navbar navbar-fixed-top">
@@ -141,7 +147,7 @@
<div class="modal fade in js-import-dialog-url" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Import from URL</h3>
<h3>Import from URL</h3>
</div>
<div class="modal-body">
<form class="js-import-url form-horizontal">
@@ -172,7 +178,7 @@
<div class="modal fade in js-import-dialog-file" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Import from File</h3>
<h3>Import from File</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
@@ -211,7 +217,7 @@
<div class="modal fade in js-share-and-embed-dialog" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Share and Embed</h3>
<h3>Share and Embed</h3>
</div>
<div class="modal-body">
<h4>Sharable Link to current View</h4>

28
app/js/app.js
View File

@@ -76,10 +76,36 @@ var ExplorerApp = Backbone.View.extend({
this.dataExplorer = null;
var $el = $('<div />');
$el.appendTo(this.explorerDiv);
var views = [
{
id: 'grid',
label: 'Grid',
view: new recline.View.SlickGrid({
model: dataset
})
},
{
id: 'graph',
label: 'Graph',
view: new recline.View.Graph({
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
},
];
this.dataExplorer = new recline.View.DataExplorer({
model: dataset,
el: $el,
state: state
state: state,
views: views
});
this._setupPermaLink(this.dataExplorer);
this._setupEmbed(this.dataExplorer);

4
app/style/demo.css
View File

@@ -11,6 +11,10 @@ body {
height: 550px;
}
.recline-slickgrid {
height: 550px;
}
.recline-timeline .vmm-timeline {
height: 550px;
}