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

Merge branch 'master' of github.com:okfn/recline

Browse Source
This commit is contained in:
Rufus Pollock
2014-08-16 17:03:19 +01:00
parent b71229ba36 696f711b22
commit 025540c98b
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/tutorial-views.markdown
View File

@@ -28,10 +28,13 @@ Before writing any code with Recline, you need to do the following preparation s
3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): 3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
{% highlight html %}<!-- 3rd party dependencies --> {% highlight html %}<!-- 3rd party dependencies -->
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script> <script type="text/javascript" src="vendor/underscore/1.4.4/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script> <script type="text/javascript" src="vendor/backbone/1.0.0/backbone.js"></script>
<script type="text/javascript" src="vendor/jquery.mustache.js"></script> <script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="vendor/bootstrap/2.3.2/bootstrap.js"></script> <script type="text/javascript" src="vendor/bootstrap/2.3.2/bootstrap.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/slick.core.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/slick.grid.js"></script>
<!-- note that we could include individual components rather than whole of recline e.g. <!-- note that we could include individual components rather than whole of recline e.g.
<script type="text/javascript" src="src/model.js"></script> <script type="text/javascript" src="src/model.js"></script>
<script type="text/javascript" src="src/backend/memory.js"></script> <script type="text/javascript" src="src/backend/memory.js"></script>
@@ -65,15 +68,18 @@ var dataset = new recline.Model.Dataset({
### Setting up the Grid ### Setting up the Grid
Let's create a data grid view to display the dataset we have just created. We're going to use the SlickGrid-based grid so we need the following: Let's create a data grid view to display the dataset we have just created. We're going to use the SlickGrid-based grid so we need the following CSS and JS dependencies in addition to those above:
{% highlight html %} {% highlight html %}
<link rel="stylesheet" href="css/slickgrid.css"> <link rel="stylesheet" href="css/slickgrid.css">
<link rel="stylesheet" href="vendor/slickgrid/2.0.1/slick.grid.css">
<!-- vendor --> <!-- vendor -->
<script type="text/javascript" src="{{page.root}}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-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery.event.drag-2.0.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="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.min.js"></script> <script type="text/javascript" src="vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/plugins/slick.rowselectionmodel.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/plugins/slick.rowmovemanager.js"></script>
<!-- Recline --> <!-- Recline -->
<script type="text/javascript" src="src/view.slickgrid.js"></script> <script type="text/javascript" src="src/view.slickgrid.js"></script>

10
src/view.multiview.js
View File

@@ -11,7 +11,7 @@ this.recline.View = this.recline.View || {};
// Manage multiple views together along with query editor etc. Usage: // Manage multiple views together along with query editor etc. Usage:
// //
// <pre> // <pre>
// var myExplorer = new model.recline.MultiView({ // var myExplorer = new recline.View.MultiView({
// model: {{recline.Model.Dataset instance}} // model: {{recline.Model.Dataset instance}}
// el: {{an existing dom element}} // el: {{an existing dom element}}
// views: {{dataset views}} // views: {{dataset views}}
@@ -61,7 +61,7 @@ this.recline.View = this.recline.View || {};
// { // {
// id: 'filterEditor', // used for routing // id: 'filterEditor', // used for routing
// label: 'Filters', // used for view switcher // label: 'Filters', // used for view switcher
// view: new recline.View.FielterEditor({ // view: new recline.View.FilterEditor({
// model: dataset // model: dataset
// }) // })
// }, // },
@@ -79,10 +79,10 @@ this.recline.View = this.recline.View || {};
// special as it includes config of many of the subviews. // special as it includes config of many of the subviews.
// //
// <pre> // <pre>
// state = { // var state = {
// query: {dataset query state - see dataset.queryState object} // query: {dataset query state - see dataset.queryState object}
// view-{id1}: {view-state for this view} // 'view-{id1}': {view-state for this view}
// view-{id2}: {view-state for } // 'view-{id2}': {view-state for }
// ... // ...
// // Explorer // // Explorer
// currentView: id of current view (defaults to first view if not specified) // currentView: id of current view (defaults to first view if not specified)