[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: splice.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Grid Widget - Insert, replace and delete rows using splice method</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zpgrid.js"></script>
	<script type="text/javascript" src="demo.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	<link href="../themes/layout.css" rel="stylesheet" type="text/css" />



</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Insert, replace and delete rows using splice method</div>


<div class='leftCol'>
	<h3>Controls</h3>

	<form name="test" style="font: 11px arial, sans-serif">
		<fieldset>
			<p>Insert or replace rows</p>
			<p>
				Column 1: <input type="text" name="col11" size="5" /><br />
				Column 2: <input type="text" name="col12" size="5" /><br />
				Column 3: <input type="text" name="col13" size="5" /><br />
			</p>
			<p>
				Column 1: <input type="text" name="col21" size="5" /><br />
				Column 2: <input type="text" name="col22" size="5" /><br />
				Column 3: <input type="text" name="col23" size="5" /><br />
			</p>
			<p>
				<input type="radio" name="insAfter" checked="checked"/>At
				<input type="radio" name="insAfter"/>After<br/>
				row #: <input type="text" name="insRowNum" size="1"/><br/>
				(leave blank to append to the end of grid)
			</p>
			<p>
				<input type="button" value="Insert" onclick="insertRows()" />
				<input type="button" name="rplcButton"value="Replace" onclick="replaceRows()" />
			</p>
			<p>
			 If the grid is sorted, new rows will appear in the sort order.
			</p>
		</fieldset>
		<fieldset>
			<p>Delete rows</p>
			<p>
				Starting at row #: <input type="text" name="delAtRow" size="1"/><br />
				Number of rows: <input type="text" name="delNum" size="1"/><br />
			</p>
			<p>
				<input type="button" name="delButton" value="Delete" onclick="deleteRows()" />
			</p>
			<p>
			 Row # should be entered in original (unsorted) order.
			</p>
		</fieldset>
	</form>

</div>

<div class='mainCol'>

<p>The Grid <b>splice</b> method allows you to perform following operations with one row or several rows at once:
	<ul>
		<li>Insert into the specified position</li>
		<li>Append to the end of grid</li>
		<li>Replace</li>
		<li>Delete</li>
	</ul>
</p>

<div id="myGrid">
	<table>
		<tr>
			<td class="zpGridTypeNosort">Column 1</td>
			<td class="zpGridTypeNosort">Column 2</td>
			<td class="zpGridTypeNosort">Column 3</td>
		</tr>
		<tr>
			<td>Row 0</td>
			<td>Row 0</td>
			<td>Row 0</td>
		</tr>
		<tr>
			<td>Row 1</td>
			<td>Row 1</td>
			<td>Row 1</td>
		</tr>
		<tr>
			<td>Row 2</td>
			<td>Row 2</td>
			<td>Row 2</td>
		</tr>
	</table>
</div>

</div>

<script type="text/javascript" >

/*
 * Initialize grid
 */
var objGrid = new Zapatec.Grid({
	// Use "myGrid" div as source and container for the grid
	container: 'myGrid',
	// Use "lightblue" theme
	theme: 'lightblue'
});

/*
 * Inserts one or several rows
 */
function insertRows() {
	var objForm = document.forms.test;
	// Get rows to insert
	var arrRows = [];
	if (objForm.col11.value !== '' || objForm.col12.value !== '' ||
	 objForm.col13.value !== '') {
		arrRows.push({
			cells: [
				{v: objForm.col11.value},
				{v: objForm.col12.value},
				{v: objForm.col13.value}
			]
		});
	}
	if (objForm.col21.value !== '' || objForm.col22.value !== '' ||
	 objForm.col23.value !== '') {
		arrRows.push({
			cells: [
				{v: objForm.col21.value},
				{v: objForm.col22.value},
				{v: objForm.col23.value}
			]
		});
	}
	// Get position
	var iAtRow = null;
	if (objForm.insAfter[0].checked && objForm.insRowNum.value.length) {
		iAtRow = objForm.insRowNum.value * 1;
	}
	var iAfterRow = null;
	if (objForm.insAfter[1].checked && objForm.insRowNum.value.length) {
		iAfterRow = objForm.insRowNum.value * 1;
	}
	// Change grid
	var arrRemoved = objGrid.splice({
		// Id of row at which to start changing the grid (default: end of the grid)
		atRow: iAtRow,
		// Id of row after which to start changing the grid (ignored if atRow is
		// defined)
		afterRow: iAfterRow,
		// Array of rows to add
		rows: arrRows
	});
	// Displays splice result
	displaySpliceResult(arrRows, arrRemoved);
	// Enabling Delete and Replace buttons
	if (objGrid.getRows().length == 1) {
		objForm = document.forms.test;
		objForm.delButton.disabled = false;
		objForm.rplcButton.disabled = false;
	}
}

/*
 * Replaces one or several rows
 */
function replaceRows() {
	var objForm = document.forms.test;
	// Get rows to insert
	var arrRows = [];
	if (objForm.col11.value !== '' || objForm.col12.value !== '' ||
	 objForm.col13.value !== '') {
		arrRows.push({
			cells: [
				{v: objForm.col11.value},
				{v: objForm.col12.value},
				{v: objForm.col13.value}
			]
		});
	}
	if (objForm.col21.value !== '' || objForm.col22.value !== '' ||
	 objForm.col23.value !== '') {
		arrRows.push({
			cells: [
				{v: objForm.col21.value},
				{v: objForm.col22.value},
				{v: objForm.col23.value}
			]
		});
	}
	// Get position
	var iAtRow = null;
	if (objForm.insAfter[0].checked && objForm.insRowNum.value.length) {
		iAtRow = objForm.insRowNum.value * 1;
	}
	var iAfterRow = null;
	if (objForm.insAfter[1].checked && objForm.insRowNum.value.length) {
		iAfterRow = objForm.insRowNum.value * 1;
	}
	// Get number of rows to remove
	var iHowMany = arrRows.length;
	// Change grid
	var arrRemoved = objGrid.splice({
		// Id of row at which to start changing the grid (default: end of the grid)
		atRow: iAtRow,
		// Id of row after which to start changing the grid (ignored if atRow is
		// defined)
		afterRow: iAfterRow,
		// Number of rows to remove (default: 0)
		howMany: iHowMany,
		// Array of rows to add
		rows: arrRows
	});
	// Displays splice result
	displaySpliceResult(arrRows, arrRemoved);
}

/*
 * Deletes one or several rows
 */
function deleteRows() {
	var objForm = document.forms.test;
	// Get position
	var iAtRow = null;
	if (objForm.delAtRow.value !== '') {
		iAtRow = objForm.delAtRow.value * 1;
	}
	// Get number of rows to remove
	var iHowMany = 0;
	if (objForm.delNum.value !== '') {
		iHowMany = objForm.delNum.value * 1;
	}
	// Change grid
	var arrRemoved = objGrid.splice({
		// Id of row at which to start changing the grid (default: end of the grid)
		atRow: iAtRow,
		// Number of rows to remove (default: 0)
		howMany: iHowMany
	});
	// Displays splice result
	displaySpliceResult([], arrRemoved);
	// Disabling Delete and Replace buttons
	if (objGrid.getRows().length == 0) {
		objForm = document.forms.test;
		objForm.delButton.disabled = true;
		objForm.rplcButton.disabled = true;
	}
}

/*
 * Displays splice result
 */
function displaySpliceResult(arrAdded, arrRemoved) {
	// Will hold the message
	var strMessage = '';
	// Number of added rows
	if ((arrAdded instanceof Array) && arrAdded.length) {
		strMessage += 'Added ' + arrAdded.length + ' row' +
		 (arrAdded.length > 1 ? 's' : '') + '.';
	} else {
		strMessage += 'Nothing was added.';
	}
	// Number of removed rows
	if (arrRemoved instanceof Array) {
		// Get ids of removed rows
		var arrRemovedIds = [];
		for (var iRow = 0; iRow < arrRemoved.length; iRow++) {
			arrRemovedIds.push(objGrid.getRowId(arrRemoved[iRow]));
		}
		if (arrRemoved.length) {
			strMessage += ' Replaced or removed ' + arrRemoved.length + ' row' +
			 (arrRemoved.length > 1 ? 's' : '') +
			 '. Ids of replaced or removed rows: ' + arrRemovedIds.join(', ') + '.';
		} else {
			strMessage += ' Nothing was replaced or removed.';
		}
	} else {
		strMessage = 'Error occured during splice.';
	}
	// Display message
	alert(strMessage);
}

</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>