[demos][s]: simplify multiview demo.
This commit is contained in:
Rufus Pollock
parent
7757e563ee
commit
b71229ba36
@ -1,73 +1,69 @@
|
||||
jQuery(function($) {
|
||||
window.dataExplorer = null;
|
||||
window.multiView = null;
|
||||
window.explorerDiv = $('.data-explorer-here');
|
||||
|
||||
// This is some fancy stuff to allow configuring the multiview from
|
||||
// parameters in the query string
|
||||
//
|
||||
// For more on state see the view documentation.
|
||||
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
if (state) {
|
||||
_.each(state, function(value, key) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch(e) {}
|
||||
state[key] = value;
|
||||
});
|
||||
} else {
|
||||
state.url = 'demo';
|
||||
}
|
||||
var dataset = null;
|
||||
if (state.dataset || state.url) {
|
||||
var datasetInfo = _.extend({
|
||||
url: state.url,
|
||||
backend: state.backend
|
||||
},
|
||||
state.dataset
|
||||
);
|
||||
dataset = new recline.Model.Dataset(datasetInfo);
|
||||
} else {
|
||||
dataset = new recline.Model.Dataset({
|
||||
records: [
|
||||
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
|
||||
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
|
||||
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5},
|
||||
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20},
|
||||
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0},
|
||||
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: 'sixth', lat:51.04, lon:7.9}
|
||||
],
|
||||
// let's be really explicit about fields
|
||||
// Plus take opportunity to set date to be a date field and set some labels
|
||||
fields: [
|
||||
{id: 'id'},
|
||||
{id: 'date', type: 'date'},
|
||||
{id: 'x', type: 'number'},
|
||||
{id: 'y', type: 'number'},
|
||||
{id: 'z', type: 'number'},
|
||||
{id: 'country', 'label': 'Country'},
|
||||
{id: 'title', 'label': 'Title'},
|
||||
{id: 'lat'},
|
||||
{id: 'lon'}
|
||||
]
|
||||
});
|
||||
}
|
||||
createExplorer(dataset, state);
|
||||
// create the demo dataset
|
||||
var dataset = createDemoDataset();
|
||||
// now create the multiview
|
||||
// this is rather more elaborate than the minimum as we configure the
|
||||
// MultiView in various ways (see function below)
|
||||
window.multiview = createMultiView(dataset);
|
||||
|
||||
// last, we'll demonstrate binding to changes in the dataset
|
||||
// this will print out a summary of each change onto the page in the
|
||||
// changelog section
|
||||
dataset.records.bind('all', function(name, obj) {
|
||||
var $info = $('<div />');
|
||||
$info.html(name + ': ' + JSON.stringify(obj.toJSON()));
|
||||
$('.changelog').append($info);
|
||||
$('.changelog').show();
|
||||
});
|
||||
});
|
||||
|
||||
// create standard demo dataset
|
||||
function createDemoDataset() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
records: [
|
||||
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
|
||||
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
|
||||
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5},
|
||||
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20},
|
||||
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0},
|
||||
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: 'sixth', lat:51.04, lon:7.9}
|
||||
],
|
||||
// let's be really explicit about fields
|
||||
// Plus take opportunity to set date to be a date field and set some labels
|
||||
fields: [
|
||||
{id: 'id'},
|
||||
{id: 'date', type: 'date'},
|
||||
{id: 'x', type: 'number'},
|
||||
{id: 'y', type: 'number'},
|
||||
{id: 'z', type: 'number'},
|
||||
{id: 'country', 'label': 'Country'},
|
||||
{id: 'title', 'label': 'Title'},
|
||||
{id: 'lat'},
|
||||
{id: 'lon'}
|
||||
]
|
||||
});
|
||||
return dataset;
|
||||
}
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
var createExplorer = function(dataset, state) {
|
||||
// remove existing data explorer view
|
||||
// make MultivView
|
||||
//
|
||||
// creation / initialization in a function so we can call it again and again
|
||||
var createMultiView = function(dataset, state) {
|
||||
// remove existing multiview if present
|
||||
var reload = false;
|
||||
if (window.dataExplorer) {
|
||||
window.dataExplorer.remove();
|
||||
if (window.multiView) {
|
||||
window.multiView.remove();
|
||||
window.multiView = null;
|
||||
reload = true;
|
||||
}
|
||||
window.dataExplorer = null;
|
||||
|
||||
var $el = $('<div />');
|
||||
$el.appendTo(window.explorerDiv);
|
||||
|
||||
// customize the subviews for the MultiView
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
@ -77,12 +73,12 @@ var createExplorer = function(dataset, state) {
|
||||
state: {
|
||||
gridOptions: {
|
||||
editable: true,
|
||||
// Enable support for row add
|
||||
// Enable support for row add
|
||||
enabledAddRow: true,
|
||||
// Enable support for row delete
|
||||
enabledDelRow: true,
|
||||
// Enable support for row Reoder
|
||||
enableReOrderRow:true,
|
||||
// Enable support for row delete
|
||||
enabledDelRow: true,
|
||||
// Enable support for row Reoder
|
||||
enableReOrderRow:true,
|
||||
autoEdit: false,
|
||||
enableCellNavigation: true
|
||||
},
|
||||
@ -110,11 +106,12 @@ var createExplorer = function(dataset, state) {
|
||||
}
|
||||
];
|
||||
|
||||
window.dataExplorer = new recline.View.MultiView({
|
||||
var multiView = new recline.View.MultiView({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: state,
|
||||
views: views
|
||||
});
|
||||
return multiView;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user