Personal tools
You are here: Home Workshops actlearningGA Celestials' properties table
Document Actions

Celestials' properties table

Table to complete with information about the celestials, deduced from the clues at disposal

Click here to get the file

Size 3.5 kB - File type text/html

File contents

<html>
<head>

<!--#include virtual="/include/meta.inc" -->
<META NAME="KEYWORDS" CONTENT="dhtmlxgrid, grid control, javascript, dhtml, dhtml grid, javascript grid, javascript table, dhtml table, table, sort, edit, sortable, data table, excel-like, dynamic loading, AJAX, xml, API, keyboard, navigation, data, cross-browser, scand, internet explorer, firefox, mozilla, image, control, widget, checkbox, component, software"/>
<META NAME="DESCRIPTION" CONTENT="Flexible and extremely customizable JavaScript grid with powerful API. The grid control allows you to integrate sortable data tables into DHTML based web-pages."/>

<!--#set var="no_title" value="yes" -->
<!--#set var="title" value="dhtmlxGrid - sortable Javascript DHTML grid with rich script API" -->
<!--#set var="picture" value="../../img/download/th_dhtmlxgrid.gif" -->
<!--#set var="section" value="dhtmlxGrid" -->

<link rel="STYLESHEET" type="text/css" href="css/dhtmlXGrid.css"/>
<script  src="./js/dhtmlXCommon.js"></script>
<script  src="./js/dhtmlXGrid.js"></script>	
<script  src="./js/dhtmlXGridCell.js"></script>	
<script  src="./js/prototype-1.4.0.js"></script>

<script>
	var mygrid;
		
function sendResult(result){
		var file='grid.xml'+'/file_edit';
		new Ajax.Request(file, result);
		alert('The results have been sent');
		return false;
	}

function doOnLoad(){
		mygrid = new dhtmlXGridObject('gridbox');
		buildGrid();
	}
	
function buildGrid(){
		//set grid parameters
		mygrid.selMultiRows = true;
		mygrid.setImagePath("imgs/");
		mygrid.setHeader("Name,Type,Distance,On Right,On Left");
		mygrid.setInitWidths("150,150,150,150,150");
		mygrid.setColAlign("center,center,center,center,center");
		mygrid.setColTypes("ed,ed,ed,ed,ed");
		mygrid.setColSorting("str,str,str,str,str");
		
		//mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");
		mygrid.rowsBufferOutSize = 0;
		mygrid.setMultiLine(false);
		mygrid.selmultirows="true";
		//set values for select box in 5th column
	
		//start grid
		mygrid.init();
		mygrid.loadXML('grid.xml');
	}

function resultFunc(){
var result = '<?xml version="1.0" encoding="UTF-8"?><rows>';
mygrid.editStop();
var nbrow=mygrid.getRowsNum()+1;
var numcol=mygrid.getColumnCount();

for (var row=1 ; row<nbrow; row++)
   {result = result+'<row id="'+row+'">';
   for (var col=0; col<numcol; col++)
      {result=result+'<cell>'+mygrid.cells(row,col).getValue()+ '</cell>';
      }
    result=result+'</row>';
   };
    
	result = {method:'post', postBody:'file='+result+'</rows>'};
	
sendResult(result);
return false;

}
</script>

<!--#include virtual="/include/top.shtml" -->
</head>
<body onload="doOnLoad()">

<h2 color='blue'>
	Complete this table with the clues which you've already found.
</h2>

<div style="background-color:whitesmoke;width:800px;border:1px solid;border-color:  lightgrey;padding:2px;">
<div 
	id="gridbox" 
	width="100%" 
	height="350" 
	>
</div>

</div>	
<font color='gray'>
	Double-click or [F2] on cell to edit. [Tab] to navigate through cells, [Up/Down] - to navigate through rows<br/>
	Select multiple rows using [Shift/Ctrl]
</font>


<br/><br/>
<input type="button" id="validate" name="validate" value="validate" onclick="resultFunc();"/>


<br/><br/>

<font color='gray'>
	This application is an adaptation of <a href="http://scbr.com/docs/products/dhtmlxGrid/">dhtmlXGrid</a>, under open-source GPL licence.
	<br/>
	It uses <a href="http://prototype.conio.net/">prototype javascript framework </a>.
</font>
</body>
</html>
by admin last modified 2008-05-16 14:15

logo pentila logo arcade logo syscom

Powered by Plone, the Open Source Content Management System

This site conforms to the following standards: