w5grid-xml-node
Version:
W5Grid communicates with Server-Side in XML
219 lines (210 loc) • 7.1 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( {
url: function() {
return '/users3';
}
} ),
url: '/users3' } ),
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',
success: function ( collection, response, options ) {
console.log('success');
resolve( response );
},
error: function ( collection, response, options ) {
console.log('error');
debugger;
reject( Error( "[" + collection.url + "] " + response.statusText ) );
}
}, options ) );
},
model: function( resolve, reject, idx, options ) {
grid1.fetch( idx, _.defaults( {
reset: true,
contentType: 'application/xml',
success: function ( model, response, options ) {
console.log('success');
resolve( response );
},
error: function ( model, response, options ) {
console.log('error');
debugger;
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'
};
getFetcher( 'collection', null, {
data: { target: 'all' },
rootName: 'fetch',
targetPath: 'response.userList'
// targetPath: function(obj) {
// return obj.response.userList;
// }
}).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, {
data: { target: 0 },
rootName: 'fetch',
targetPath: 'userList'
} );
}).then( function (response) {
data = { phone1: '111-111-1111', phone2: '222-222-2222' };
grid1.row(0).set( 'data', data, _.extend( {
save: true,
saved: true,
rootName: '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, {
data: { target: 0 },
rootName: 'fetch',
targetPath: 'userList'
} );
}).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( data, _.extend( {
save: true,
rootName: 'create',
success: function ( model, response, options ) {
console.log( 'create a Row ', _.omit( response.userList, 'id' ) );
resolve();
}
}, commonConf ) );
} );
}).then( function (response) {
grid1.removeRow( 1, _.extend( {
data: { target: 1 },
destroy: true,
rootName: 'delete',
success: function ( model, response, options ) {
console.log( 'removed the Row ', response.result );
}
}, commonConf ) );
});
</script>
</body>
</html>