[ 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: query.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="description" content="">
	<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</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" />


	<script type='text/javascript' src='../src/zpgrid-query.js'></script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Insert, Replace and Delete Rows</div>

		<div class='zpCalDemoText'>
		<ul>
		
		
		</ul>
		</div>



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

	<form name="test" style="font: 11px arial, sans-serif">
		<fieldset>
			<p><b>Insert Rows</b></p>
			<p>
				Column 1: <input type="text" name="col11" size="5" title='Value for 1st column, 1st insert.' /><br />
				Column 2: <input type="text" name="col12" size="5" title='Value for 2nd column, 1st insert.' /><br />
				Column 3: <input type="text" name="col13" size="5" title='Value for 3rd column, 1st insert.' /><br />
			</p>
			<p>
				Column 1: <input type="text" name="col21" size="5" title='Value for 1st column, 2nd insert.' /><br />
				Column 2: <input type="text" name="col22" size="5" title='Value for 2nd column, 2nd insert.' /><br />
				Column 3: <input type="text" name="col23" size="5" title='Value for 3rd column, 2nd insert.' /><br />
			</p>
			<p>
				<input type="button" value="Insert" onclick="insertRows()" title='Click to perform the Insert.'/>
			</p>
		</fieldset>
		<fieldset>
			<p><b>Update Rows</b></p>
			<p>
				Column 1: <input type="text" name="col31" size="5" title='New value for this column.'/><br />
				Column 2: <input type="text" name="col32" size="5" title='New value for this column.'/><br />
				Column 3: <input type="text" name="col33" size="5" title='New value for this column.'/><br />
			</p>
			<p>
				<b>Where</b><br/>
			Column 1 = <input type="text" name="repWhere" size="5" title='Change ALL rows whose Column 1 matches this value.'/>
			</p>
			<p>
				<input type="button" value="Update" onclick="updateRows()" title='Click here to perform the Update.'/>
			</p>
		</fieldset>
		<fieldset>
			<p><b>Delete Rows</b></p>
			<p>
				<b>Where</b><br/>
			Column 2 = <input type="text" name="delWhere1" size="5" title='Enter the value of this column to query on.'/><br />
				<b>AND</b><br/>
			Column 3 = <input type="text" name="delWhere2" size="5" title='Enter the value of this column to query on.'/><br />
			</p>
			<p>
				<input type="button" value="Delete" onclick="deleteRows()" title='Click here to perform the Delete.'/>
			</p>
		</fieldset>
	</form>

</div>

<div class='mainCol'>

<p>The Grid <b>query</b> method allows you to perform the following operations with one row or several rows at once:
	<ul>
		<li>Insert: Define the column values and call the Grid query method.</li>
		<li>Update using conditions: Define the where clause and column values and call the Grid query method.</li>
		<li>Delete using conditions: Define the where clause and call the Grid query method.</li>
	</ul>
</p>

<div id="myGrid">
	<table>
		<tr>
			<td>Column 1</td>
			<td>Column 2</td>
			<td>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}
			]
		});
	}
	// Change grid
	var arrAdded = objGrid.query({
		// "Insert" query
		type: 'insert',
		// Array of rows to add
		rows: arrRows
	});
	// Display query result
	if (arrAdded) {
		// Get ids of inserted rows
		var arrAddedIds = [];
		for (var iRow = 0; iRow < arrAdded.length; iRow++) {
			arrAddedIds.push(objGrid.getRowId(arrAdded[iRow]));
		}
		// Display result
		if (arrAdded.length) {
			alert('Added ' + arrAdded.length + ' row' +
			 (arrAdded.length > 1 ? 's' : '') +
			 '. Ids of added rows: ' + arrAddedIds.join(', ') + '.');
		} else {
			alert('Nothing was added.');
		}
	} else {
		alert('Error occured during query.');
	}
}

/*
 * Updates one or several rows
 */
function updateRows() {
	var objForm = document.forms.test;
	// Get new row values
	if (objForm.col31.value !== '' || objForm.col32.value !== '' ||
	 objForm.col33.value !== '') {
		var objValues = {
			cells: [
				{v: objForm.col31.value},
				{v: objForm.col32.value},
				{v: objForm.col33.value}
			]
		};
		// Get condition
		var objWhere = {
			leftValue: {
				// Column 1
				column: 0
			},
			rightValue: {
				// String value
				value: objForm.repWhere.value,
				type: 'string'
			},
			// were left value equal right value
			operator: '=='
		};
		// Change grid
		var arrModified = objGrid.query({
			// "Update" query
			type: 'update',
			// Array with new values
			values: objValues,
			// Condition
			where: objWhere
		});
		// Display query result
		if (arrModified) {
			// Get old and new values
			var arrValues = [];
			for (var iRow = 0; iRow < arrModified.length; iRow++) {
				// Get cells of old row
				var arrOldCells = objGrid.getRowCells(arrModified[iRow][0]);
				var arrOldValues = [];
				for (var iCell = 0; iCell < arrOldCells.length; iCell++) {
					arrOldValues.push(objGrid.getCellValueString(arrOldCells[iCell]));
				}
				// Get cells of new row
				var arrNewCells = objGrid.getRowCells(arrModified[iRow][1]);
				var arrNewValues = [];
				for (var iCell = 0; iCell < arrNewCells.length; iCell++) {
					arrNewValues.push(objGrid.getCellValueString(arrNewCells[iCell]));
				}
				arrValues.push(arrOldValues.join(', ') + ' -> ' +
				 arrNewValues.join(', '));
			}
			// Display result
			if (arrModified.length) {
				alert('Modified ' + arrModified.length + ' row' +
				 (arrModified.length > 1 ? 's' : '') +
				 ':\n' + arrValues.join('\n'));
			} else {
				alert('Nothing was found.');
			}
		} else {
			alert('Error occured during query.');
		}
	}
}

/*
 * Deletes one or several rows
 */
function deleteRows() {
	var objForm = document.forms.test;
	// Get condition
	var objWhere = {
		leftValue: {
			// Column 2 == value
			statement: {
				leftValue: {
					// Column 2
					column: 1
				},
				rightValue: {
					// String value
					value: objForm.delWhere1.value,
					type: 'string'
				},
				// were left value equal right value
				operator: '=='
			}
		},
		rightValue: {
			// Column 3 == value
			statement: {
				leftValue: {
					// Column 3
					column: 2
				},
				rightValue: {
					// String value
					value: objForm.delWhere2.value,
					type: 'string'
				},
				// were left value equal right value
				operator: '=='
			}
		},
		// And
		operator: '&&'
	};
	// Change grid
	var arrRemoved = objGrid.query({
		// "Delete" query
		type: 'delete',
		// Condition
		where: objWhere
	});
	// Display query result
	if (arrRemoved) {
		// Get ids of removed rows
		var arrRemovedIds = [];
		for (var iRow = 0; iRow < arrRemoved.length; iRow++) {
			arrRemovedIds.push(objGrid.getRowId(arrRemoved[iRow]));
		}
		// Display result
		if (arrRemoved.length) {
			alert('Removed ' + arrRemoved.length + ' row' +
			 (arrRemoved.length > 1 ? 's' : '') +
			 '. Ids of removed rows: ' + arrRemovedIds.join(', ') + '.');
		} else {
			alert('Nothing was found.');
		}
	} else {
		alert('Error occured during query.');
	}
}

</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>