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

280 lines (241 sloc) 8.116 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grid: Editing, Inline Grid</title>
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="grid.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="../ui/jquery.ui.position.js"></script>
<script src="../ui/jquery.ui.tooltip.js"></script>
<script src="dataview.js"></script>
<script src="dataview-local.js"></script>
<script src="grid5-editable.js"></script>
<script src="pager2-observable.js"></script>
<script src="grid-editing/editor.js"></script>
<script src="grid-editing/grid-editor.js"></script>
<script src="grid-editing/navigator.js"></script>
<script src="grid-editing/localstore.js"></script>
<script src="jquery.datatracker.js" type="text/javascript"></script>
<script>
// TODO add selection support. Currently conflicts with inplace editing
if ( !window.console ) {
window.console = {
log: function() {
var message = Array.prototype.slice.call( arguments, 0 ).join( ", " );
$("<div>").text( message ).appendTo("body");
}
}
}
var store = $.demos.localstore( {
key: "grid-editing-developers",
initial: "../grid-spf/developers.json"
}),
localDevelopers = store.load();
$(function() {
var developer, view,
developers = $.ui.localDataview({
input: localDevelopers,
paging: {
limit: 6
}
}),
editForm = $( "#editForm" ).hide().submit( function( event ) {
event.preventDefault();
$.observable( developer ).setProperty( $( "input", this ).serializeArray() );
editForm.hide();
});
grid = $.ui.grid( {}, "#developers-local" )
.render( developers.output );
grid.element
.delegate( "button.edit", "click", function() {
view = $( this ).view();
developer = view.data;
editForm.find("fieldset").html( $.render( grid.options.editTemplate, developer));
editForm.show();
})
.delegate( "button.remove", "click", function() {
var developerToRemove = $( this ).view().data;
var index = localDevelopers.indexOf( developerToRemove );
$.observable( localDevelopers ).remove( index );
if ( developerToRemove === developer ) {
editForm.hide();
}
})
.gridEditor({
items: "td:not(:has(button))",
type: function(cell) {
// TODO should be possible to retrieve this from grid.options.columns
return grid.element.find( "th" ).eq( cell[ 0 ].cellIndex ).data( "type" );
},
submit: function( event, ui) {
var object = ui.item.view().data,
field = grid.element.find( "th" ).eq( ui.item[ 0 ].cellIndex ).data( "field" );
$.observable( object ).setProperty( field, ui.value );
// for the navigator
grid.element.focus();
}
})
.navigator(),
$( "#pageDevelopers" ).pager({
source: developers
});
$( "#addDeveloper" ).click( function() {
// add at front so that it becomes visible without paging
$.observable( localDevelopers ).insert( 0 , {
firstName: "Peter",
lastName: "Pan",
country: "Unknown",
bitcoins: 0,
random: {
value: 0
}
});
});
$("form").tooltip();
/////////////// Tracker code ///////////////
var tracker = $.dataTracker( localDevelopers ), // can pass filter path for which objects/events are to be hooked up
updatedItems = [],
insertedItems = [],
removedItems = [];
$([ tracker, grid ]).bindAll( "afterChange", function( trackerEventData, gridEventData ) {
// This gets called once when the change has been processed by both the grid and the tracker,
// if developers array is changed.
// For paging, however, developers array does not change, and this is called after the grid has
// refreshed from paging. In this case trackerEventData is not defined.
// Change tracking:
if ( trackerEventData ) {
var eventData = trackerEventData[0][1];
switch ( eventData.change ) {
case "change":
$.observable( updatedItems ).insert( updatedItems.length, eventData.item );
break;
case "insert":
$.observable( insertedItems ).insert( insertedItems.length, eventData.items );
break;
case "remove":
$.observable( removedItems ).insert( removedItems.length, eventData.items );
break;
}
}
// Highlight modified rows. Needs the be after both grid and tracker have processed the change event
var changedClass = "grid-selected-row";
grid.itemContainer
.find( "tr" )
.removeClass( changedClass )
.filter( function() {
var dev = $( this ).view().data;
return $.inArray( dev, insertedItems ) >= 0 ||
$.inArray( dev, removedItems ) >= 0 ||
$.inArray( dev, updatedItems ) >= 0;
})
.addClass( changedClass );
});
$.ui.grid({ columns: [ "firstName", "lastName", "country" ]}, "#developers-inserted" )
.render( insertedItems );
$.ui.grid({ columns: [ "firstName", "lastName", "country" ]}, "#developers-removed" )
.render( removedItems );
$.ui.grid({ columns: [ "firstName", "lastName", "country" ]}, "#developers-updated" )
.render( updatedItems );
});
</script>
<style>
.navigator-active { background: rgba(0,0,255,0.1); }
#editForm input[type=text] { width: 70px; }
</style>
</head>
<body>
<h1>Grids with editable local datasource</h1>
<h2>local data source</h2>
<p id="pageDevelopers">
<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>
<div style="float: left; clear:both;">
<table id="developers-local">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="country" data-list="countries">Country</th>
<th data-field="bitcoins" data-type="number">Bitcoins</th>
<th data-field="random.value" data-type="number">Random</th>
<th data-template="#cell-edit-tmpl">Edit</th>
<th data-template="#cell-remove-tmpl">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p><button id="addDeveloper">Insert new developer</button></p>
<form id="editForm">
<fieldset>
</fieldset>
<p><input type="submit" value="Save changes" /></p>
</form>
</div>
<div style="float: right;">
<h1>Change-tracking</h1>
<h2>Inserted developers</h2>
<table id="developers-inserted">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="country">Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2>Removed developers</h2>
<table id="developers-removed">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="country">Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2>Updated developers</h2>
<table id="developers-updated">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="country">Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script id="cell-edit-tmpl" type="text/x-jquery-tmpl">
<td><button class='edit'>Edit</button></td>
</script>
<script id="cell-remove-tmpl" type="text/x-jquery-tmpl">
<td><button class='remove'>Remove</button></td>
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.