Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

228 lines (201 sloc) 6.737 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grid: with master-detail - JsViews integration</title>
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="editable.css">
<script src="../jquery-1.5.1.js"></script>
<script src="jquery.observable.js" type="text/javascript"></script>
<script src="jquery.render.js" type="text/javascript"></script>
<script src="jquery.views.js" type="text/javascript"></script>
<script src="../external/jquery.mousewheel-3.0.4.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
<script src="../ui/jquery.ui.button.js"></script>
<script src="../ui/jquery.ui.selectable.js"></script>
<script src="../ui/jquery.ui.spinner.js"></script>
<script src="datasource2-observable.js"></script>
<script src="datasource-local.js"></script>
<script src="grid3-jsviews.js"></script>
<script src="pager.js"></script>
<script>
var localDevelopers;
$.ajax({
dataType: "json",
url: "developers.json",
async: false,
success: function( result ) {
localDevelopers = result;
}
});
$(function() {
var developers = $.ui.localDatasource({
input: localDevelopers,
paging: {
limit: 4
}
});
var developersGrid = $.ui.grid({
source: developers.toArray(),
selectedData: [],
render: refreshSelection
}, "#developers-grid" );
$( "#developers-pager" ).pager({
source: developers
});
//////////////////// Selection support - to be integrated into grid ////////////////////
var selectedData = developersGrid.options.selectedData;
function refreshSelection() {
$( "#developers-grid tbody tr" ).addClass( function( index, currentClass ) {
if ( $.inArray( $.view( this ).data, selectedData ) >= 0) {
return "ui-selected";
} else {
$( this ).removeClass( "ui-selected" );
}
});
}
$( "#developers-grid" ).selectable({
filter: "tbody tr",
start: function( ev, eventArgs ) {
if ( !ev.ctrlKey ) {
// If ctrlKey not true, remove any other items in selectedData - which may be on other pages than the current one.
$.observable( selectedData ).remove( 0, selectedData.length );
}
},
selected: function( ev, eventArgs ) {
var dataItem = $.view( eventArgs.selected ).data;
index = $.inArray( dataItem, selectedData );
if ( index == -1 ) {
$.observable( selectedData ).insert( selectedData.length, dataItem );
}
},
unselected: function( ev, eventArgs ) {
var index = $.inArray( $.view( eventArgs.unselected ).data, selectedData );
if ( index >= 0 ) {
$.observable( selectedData ).remove( index );
}
}
});
$( ".clearSelection" ).click( function() {
$.observable( selectedData ).remove( 0, selectedData.length );
developersGrid.element.find( "tbody tr" ).removeClass( "ui-selected" ); // Avoid re-rendering the grid, for better perf, and to maintain state.
});
$( ".invertSelection" ).click( function() {
// Clone localDevelopers, and remove items in current selectedData.
var inverted = localDevelopers.slice( 0 ),
l = selectedData.length;
while ( l-- ) {
inverted.splice( $.inArray( selectedData[l], inverted ), 1 );
}
// Use resulting array as new contents of selectedData array.
$.observable( selectedData ).refresh( inverted );
developersGrid.element.find("tbody tr").toggleClass( "ui-selected" );
});
//////////////////// Editing actions using observable ////////////////////////////
developers.refresh();
developersGrid.render();
$( ".addDeveloper" ).click( function () {
adding = true;
var l = selectedData.length,
insertAt = l
? $.inArray( selectedData[ l - 1 ], localDevelopers )
: -1,
addedData = {
firstName: " ",
lastName: "",
country: "",
bitcoins: 0
};
$.observable( localDevelopers ).insert( insertAt+1, addedData );
$.observable( selectedData ).refresh( addedData );
developers.refresh();
adding = false;
});
$( ".deleteSelected" ).click(function() {
var l = selectedData.length;
while ( l-- ) {
deleteItem( selectedData[l], localDevelopers );
$.observable( selectedData ).remove( l );
}
developers.refresh();
});
$( "#developers-detail" )
.link( selectedData, "#detail-template" )
.delegate( "#okBtn", "click", function () {
// Commit entire form content to data model with one API call.
var view = $.view( this ),
newData = $( "input", view.nodes ).serializeArray();
$.observable( view.data ).setProperty( newData );
deleteItem( view.data, selectedData );
refreshSelection();
})
.delegate( "#deleteBtn", "click", function () {
var view = $.view( this ),
item = view.data;
deleteItem( item, localDevelopers );
deleteItem( item, selectedData );
developers.refresh();
});
function deleteItem( item, array ) {
var index = $.inArray( item, array );
if ( index > -1 ) {
$.observable( array ).remove( index );
};
}
});
</script>
<style>
.ui-selecting td { background: #eef; }
.ui-selected td { background: #ddf; }
</style>
</head>
<body>
<h1>Grid with master-detail - JsViews integration</h1>
<p id="developers-pager">
<button data-page="first">First</button>
<button data-page="prev">Prev</button>
<button data-page="prevStep">-1</button>
<span>
Page <input class="current" size="4"/>/<span class="total">0</span>,
Total records <span class="totalRecords">0</span>
</span>
<button data-page="nextStep">+1</button>
<button data-page="next">Next</button>
<button data-page="last">Last</button>
</p>
<p>
<button class="clearSelection">Clear selection</button>
<button class="invertSelection">Invert selection</button>
</p>
<p>
<button class="addDeveloper" >Insert developer</button>
<button class="deleteSelected">Delete selected developers</button>
</p>
<table id="developers-grid">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="country">Country</th>
<th data-field="bitcoins" data-type="number">Bitcoins</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="developers-detail"></div>
<script id="detail-template" type="text/x-jquery-tmpl">
<div>
<div class="title">{{if adding}}Add{{else}}Edit{{/if}} Person</div>
<div><input name="firstName" value="${firstName}"/></div>
<div><input name="lastName" value="${lastName}"/></div>
<div><input name="country" value="${country}"/></div>
<span id="okBtn" >OK</span>
<span id="deleteBtn" >Delete</span>
</div>
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.