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>
Forgot your password?
Click here to get the file
