w5grid-xml-node
Version:
W5Grid communicates with Server-Side in XML
271 lines (259 loc) • 8.82 kB
HTML
<html>
<head>
<title>W5 - Fetch Promises Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="w5/dist/css/w5.css">
</head>
<body style="border:0; margin:0">
<div id='grid1'></div>
<script src="jquery/jquery.js"></script>
<script src="underscore/underscore.js"></script>
<script src="backbone/backbone.js"></script>
<script src="x2js/xml2json.js"></script>
<script src="w5/dist/js/1.0.1/w5.js"></script>
<script src="javascripts/proworksConverter.js"></script>
<script type="text/javascript">
var getFetcher,
commonConf,
data,
List = Backbone.Collection.extend( {
model: Backbone.Model.extend( {
idAttribute: "first_name",
url: function() {
return '/users';
}
} ),
url: '/users' } ),
grid1 = new w5.Grid({
el : "#grid1",
option: {
width : "650px",
height : "400px",
caption : "Promises",
rowNum : 10
},
collection : new List(),
emulateHTTP: true,
xmlConverter: new X2JS(),
colModel : [
{
width: 150,
id: 'first_name'
},
{
width: 150,
id: 'last_name'
},
{
width: 150,
headerLabel: 'company_name'
},
{
width: 150,
headerLabel: 'address'
},
{
width: 150,
id: 'city'
},
{
width: 150,
id: 'county'
},
{
width: 150,
id: 'state'
},
{
width: 150,
headerLabel: 'zip'
},
{
width: 150,
id: 'phone1'
},
{
width: 150,
headerLabel: 'phone2'
},
{
width: 150,
id: 'email'
},
{
width: 150,
headerLabel: 'web'
}
],
defaults : function () {
return {
first_name: '',
last_name: '',
company_name: '',
address: '',
city: '',
county: '',
state: '',
zip: '',
phone1: '',
phone2: '',
email: '',
web: ''
};
}
}).render();
getFetcher = function( type, idx, options ) {
var lookup = {
collection: function( resolve, reject, idx, options ) {
grid1.fetch( _.defaults( {
reset: true,
contentType: 'application/xml',
converter: {
json2xml_str: proworksConverter.json2xml_str,
xml2json: proworksConverter.xml2json
},
success: function ( collection, response, options ) {
console.log('success');
resolve( response );
},
error: function ( collection, response, options ) {
console.log('error');
reject( Error( "[" + collection.url + "] " + response.statusText ) );
}
}, options ) );
},
model: function( resolve, reject, idx, options ) {
grid1.fetch( idx, _.defaults( {
reset: true,
contentType: 'application/xml',
converter: {
json2xml_str: proworksConverter.json2xml_str,
xml2json: proworksConverter.xml2json
},
success: function ( collection, response, options ) {
console.log('success');
resolve( response );
},
error: function ( collection, response, options ) {
console.log('error');
reject( Error( "[" + model.collection.url + "/" + model._id + "] " + response.statusText ) );
}
}, options ) );
}
},
def = function() {};
return new Promise( function( resolve, reject ) {
lookup[type] ? lookup[type]( resolve, reject, idx, options ) : def();
});
};
commonConf = {
contentType: 'application/xml',
nodeName: 'CCCEA17',
converter: {
json2xml_str: proworksConverter.json2xml_str,
xml2json: proworksConverter.xml2json
}
};
getFetcher( 'collection', null, {
nodeName: 'request',
data: { target: 'all', test: '1234' },
rootAttrs: {
_task: 'DummyTask',
_action: 'fetch'
}
}).then( function(response) {
console.log( 'SUCCESS', response.length );
}, function(error) {
console.error( 'FAIL', error );
}).then( function (response) {
grid1.cell(0,0).set('data', 'Ruud');
console.log( 'firstName is changed', grid1.cell(0,0).get('data') );
}).then( function (response) {
return getFetcher( 'model', 0, {
nodeName: 'request',
data: { target: 0 },
rootAttrs: {
_task: 'DummyTask',
_action: 'fetch'
}
} );
}).then( function (response) {
console.log( 'firstName is restored', grid1.cell(0,0).get('data') );
data = { phone1: '111-111-1111', phone2: '222-222-2222' };
grid1.row(0).set( 'data', data, _.extend( {
save: true,
saved: true,
rootAttrs: {
_task: 'DummyTask',
_action: 'update'
},
success: function( model, response, options ) {
console.log( 'first update phone number result = ' + response._result );
}
}, commonConf ) );
console.log( 'change phone1 and phone2' );
return getFetcher( 'model', 0, {
nodeName: 'request',
data: { target: 0 },
rootAttrs: {
_task: 'DummyTask',
_action: 'fetch'
}
} );
}).then( function (response) {
console.log( 'fetch phone1 and phone2 ', _.pick( response, ['phone1', 'phone2'] ) );
data = { phone1: '504-621-8927', phone2: '504-845-1427' };
grid1.row(0).set( 'data', data, _.extend( {
save: true,
saved: true,
pick: ['phone1', 'phone2'],
rootAttrs: {
_task: 'DummyTask',
_action: 'update'
},
success: function( model, response, options ) {
console.log( 'second update phone number result = ' + response._result );
}
}, commonConf ) );
return getFetcher( 'model', 0, {
nodeName: 'request',
data: { target: 0 },
rootAttrs: {
_task: 'DummyTask',
_action: 'fetch'
}
} );
}).then( function (response) {
console.log( 'patch phone1 and phone2 ', _.pick( response, ['phone1', 'phone2'] ) );
data = { "first_name": "shye", "last_name": "lee", "company_name": "inswave",
"address": "guro", "city": "seoul", "county": "korea", "state": "guro", "zip": "1234",
"phone1": "123-456-1234", "phone2": "789-123-4567",
"email": "shye0919@inswave.com", "web": "http://www.inswave.com" };
return new Promise( function( resolve, reject ) {
grid1.addRow( 0, data, _.extend( {
save: true,
rootAttrs: {
_task: 'DummyTask',
_action: 'create'
}, success: function ( model, response, options ) {
console.log( 'create a Row ', _.omit( response, '_id' ) );
resolve();
}
}, commonConf ) );
} );
}).then( function (response) {
grid1.removeRow( 1, _.extend( {
destroy: true,
rootAttrs: {
_task: 'DummyTask',
_action: 'delete'
},
success: function ( model, response, options ) {
console.log( 'removed the Row ', response._result );
}
}, commonConf ) );
});
</script>
</body>
</html>