📄 guide.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Grid guide and samples</title>
</head>
<body>
<style>
body {font-size:14px;line-height:18px;}
.{font-family:arial;}
h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
h5{
font-weight:bold;color:green;
margin:5px;
}
h6{
font-weight:bold;color:gray;
margin:0px;
}
a h4{
color:blue;
font-weight:bold;
}
.op {cursor:pointer;}
div.block {margin-left:5px;}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
li {margin-top:2px;}
span.important {font-weight:bold;color:maroon;}
</style>
<h2 ><a href="http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml" target="_top" title="Visit javascript tree home page">dhtmlXGrid</a> Guide and Samples</h2>
<div class="block">
<!--- --->
<a name="mf"><h3 onclick="openFull(this)">Main features</h3
></a><div style="display:show" class="block">
<li>wide and powerful client side api</li>
<li>navigation with keyboard</li>
<li>Dynamical loading</li>
<li>Data buffering</li>
<li>90% compatibility with Scand's jTreeTable api (grid part)</li>
<li>fully customizable appearance</li>
<li>XML support</li>
<li>12 predefined Cell Editors (eXcell)</li>
<li>ability to create your own Cell-Editors (eXcell)</li>
<li>three types of data sorting (date,string,int) </li>
<li>column resizing</li>
<li>horizontal & vertical scrolling</li>
<li>single/multi-line rows</li>
<li>single/multi row selection</li>
<li>on/off header</li>
<h5>New in version 1.1</h5>
<li>Smart rendering</li>
<li>Paginal output</li>
<li>Colspan</li>
<li>Split mode</li>
<h5>New in version 1.2</h5>
<li>Move columns</li>
<li>Add/Remove Columns</li>
<li>Export to\from CSV</li>
<li>Initialization from HTML Table</li>
<li>Multirow header/footer</li>
<li>Clipboard operations</li>
<li>Column(s) with variable size</li>
</div>
<a name="browsers"><h3 >Supported browsers</h3
></a><div style="display:show" class="block">
<li>IE 5.x and above</li>
<li>Mozilla 1.4 and above</li>
<li>FireFox 0.9 and above</li>
<li>Safari 1.3 and above</li>
</div>
<h3 >Working with dhtmlXGrid</h3
><div style="display:show" class="block">
<!--- Nivigation with keyboard --->
<a name="keyboard"><h4>Navigation with keyboard</h4
></a><div class="block">
For keyboard navigation you can use following keys:
<li>Tab - change to the next cell in row</li>
<li>Shift+Tab - change to the previous cell in row</li>
<li>Up, Down arrows - change to previous/next row</li>
<li>Enter - if in edit cell mode - close cell </li>
<li>Space - on checkbox or radiobutton - change state</li>
<li>F2 - edit cell</li>
<li>Esc - finish editing</li>
</div>
<!--- Initialize object on page --->
<a name="init"><h4 >Initialize object on page</h4
></a><div class="block">
<XMP>
<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>
<div id="gridbox" style="width:200;height:200"></div>
<script>
mygrid = new dhtmlXGridObject('gridbox');
// or
//mygrid = new dhtmlXGridObject();
//mygrid.attachToObject(document.body)
mygrid.imgURL = "img/";
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,250")
mygrid.setColAlign("right,left")
mygrid.setColTypes("ro,ed");
mygrid.setColSorting("int,str")
mygrid.init();
mygrid.loadXML("grid.xml");
</script>
</XMP>
<strong>Parameters passed to the constructor are:</strong>
<li>object to attach grid to (should be loaded before calling constructor). If none, then you can use attachToObject method to attach grid to some parent.</li>
<br>
<strong>Specify additional parameters of the grid:</strong>
<li>imgURL - specifies the path to the folder with grid images</li>
<li>setHeader("Column A, Column B") - set column header labels</li>
<li>setInitWidths("100,150") - set column width in pixels (* - means set size to possible value)</li>
<li>setColTypes("ro,ed") - set column types (with editor codes. See documentation for details)</li>
<li>setColAlign("right,left") - set column text align</li>
<li>setColSorting("int,str") - set column sorting type</li>
<li>loadXML("grid.xml") - load grid data from XML</li>
</div>
<!--- Set Additional init parameters --->
<a name="handlers"><h4 >Set Event Handlers</h4
></a><div class="block">
See API methods documentation for complete list of available event handlers.
<XMP>
<div id="treeBox" style="width:200;height:200"></div>
<script>
function doOnRowSelected(id){
...
}
function doOnCellEdit(stage,rowId,cellInd){
if(stage==0){
...
return true;
}else if(stage==1){
...
}else if(stage==2){
...
}
}
function doOnEnter(rowId,cellInd){
...
}
function doOnEnter(rowId,cellInd){
...
}
mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.setOnRowSelectHandler(doOnRowSelected);
mygrid.setOnEditCellHandler(doOnCellEdit);
mygrid.setOnEnterPressedHandler(doOnEnter);
mygrid.setOnCheckHandler(doOnCheck);
...
mygrid.init();
mygrid.loadXML("../grid.xml");
</script>
</XMP>
In most cases functions specified inside event handlers get some values with the arguments. For details about passed arguments please refer to <a href="alpha.html">API documentation</a>.<br>
</div>
<!--- Adding nodes with Script --->
<a name="scriptadd"><h4 >Adding nodes with Script</h4
></a><div class="block">
<XMP>
<script>
mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.addRow(123,"text1,text2",1);
mygrid.deleteRow(mygrid.getRowId(0));
</script>
</XMP>
For details about passed arguments please refer to <a href="alpha.html">API documentation</a>
</div>
<!--- Using XML --->
<a name="xmlload"><h4 >Loading data with XML</h4
></a><div class="block">
<XMP>
<script>
...
mygrid.setXMLAutoLoading("dynload.php");//to load additional data from server
mygrid.init();
mygrid.loadXML("init.xml");//to load initial bloack of data from server
</script>
</XMP>
<strong>Parameters which go to url specified in setXMLAutoLoading:</strong><br>
<li>rowsLoaded - number of rows in grid before request</li>
<li>lastid - last row id.</li>
<XMP>
XML Syntax:
<?xml version='1.0' encoding='iso-8859-1'?>
<rows>
<userdata name="NameOfGlobalUserDataBlock"></userdata>
<row id="unique_rowid">
<userdata name="NameOfRowUserDataBlock"></userdata>
<cell>cell content</cell>
<cell><![CDATA[<font color="red">cell</font> content]]></cell>
</row>
</rows>
</XMP>
<br>
In <strong>PHP</strong> script use the following code for page header:<br>
<xmp>
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
</xmp>
<br>
<strong><rows></strong> node is mandatory. It can contain grid related <userdata> blocks and rows (<row>)<br>
<em>Attributes:</em>
<li>total_count - use with <a href="#">smart rendering</a> to tell grid total quantity of rows</li>
<li>pos - use with <a href="#">smart rendering with dynamical loading</a> to tell grid first row position</li>
<br>
<strong><row></strong> can contain row related <userdata> blocks and cells (<cell>).<br>
<em>Attributes:</em>
<li>style - css style definition</li>
<li>class - css class name</li>
<li>id - row ID (must be unique)</li>
<br>
<strong><cell></strong> contain cell value. Can contain html (use CDATA block if you include htmlx tags) or XML (since v.1.2)<br>
<em>Attributes:</em>
<li>style - css style definition</li>
<li>type - <a href="#ctype_exp">cell type</a> (if differs from column type). Since v.1.2</li>
<br><br>
To set <strong>userdata</strong> directly within XML use <strong><userdata></strong><br>
It has just one parameter: <br>
<li>name</li><br>
and value to specify userdata value
</div>
<!--- Add nodes to treegrid --->
<a name="add_tree"><h4 >Adding nodes with Script</h4></a><div class="block">
<XMP>
mygrid.addRow(rowId,rowValuesAr,rowIndex,parentId,icon);
</XMP>
<li><em>rowId</em> - id of new row</li>
<li><em>rowValuesAr</em> - array of values for each cell of the row</li>
<li><em>rowIndex</em> argument not used for treeGrid, so you may set any value for it</li>
<li><em>parentId</em> - optional (by default new row will go to the root level)</li>
<li><em>icon</em> - image file name for tree node icon. Optional - by default it is "leaf.gif"</li>
</div>
<!--- Serialization --->
<a name="serialize"><h4 >Serializing Grid</h4></a><div class="block">
Serialization methods allows getting grid in xml representation (xml string).
Various levels of serializations define the number of grid parameters reflected in resulting XML:<br>
<XMP>
<script>
grid.setSerializationLevel(userDataFl,otherFl);
grid.enableMathSerialization(fl)
var myXmlStr = grid.serialize();
</script>
</XMP>
<strong>setSerializationLevel</strong> arguments:
<li>no parameters - rows and cells</li>
<li><em>userDataFl</em> true - userdata</li>
<li><em>otherFl</em> true - rows selection state</li>
<strong>enableMathSerialization</strong> arguments:
<li><em>fl</em> - true to serialize formulas, otherwise will serialize values (default)</li>
<br><br>
<a href="#csv">Serialization to CSV</a> possible since v.1.2 (Professional Edition only)
</div>
<!--- Dynamical loading --->
<a name="dynload"><h4 >Dynamical Loading while scrolling</h4
></a><div class="block">
If your grid should contain large amount of rows (or you simply do not want to waist time loading hidden rows at startup), it would be better to load them while scrolling.
For this purpose we made the grid to load rows dynamically using XML. <br>
See chapter <a href="#xmlload">"Loading data with XML"</a> for xml structure and syntax of methods<br>
</div>
<a name="buff"><h4 >Buffering</h4
></a><div class="block">
Buffering can be used to decrease the time for rendering the entire content of the grid at once (on startup).
Instead just a part of available rows will be added to the document just from the beginning - other rows will be added while user scrolls the grid.
<strong>To turn this feature off</strong> set the buffer size to 0.
<XMP>
<script>
mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.enableBuffering(30);//30 rows will be rendered at once.
mygrid.init()
</script>
</XMP>
If you use <strong>Dynamical Loading</strong>, then you can specify buffer size as secondparameter of setXMLAutoLoading method. By default it is set to 40 for Dynamical Loading.
</div>
<a name="rowsman"><h4 >Manipulating rows</h4
></a><div class="block">
A few examples of manipulating rows with grid API methods:
<XMP>
<script>
mygrid = new dhtmlXGridObject('gridbox');
...
var sID = mygrid.getSelectedId();//get id of selected row
mygrid.cells(sID,1).setValue("New Value");//change value of second cell
mygrid.setRowTextBold(sID);//set row test bold
mygrid.moveRowDown(sID);//move selected row one position down
var rInd = mygrid.getRowIndex(sID);//get index of selected row
mygrid.setRowId(rInd,"100");//change id of selected row to 100
alert("This are : "+mygrid.getRowsNum()+" rows in the grid");//show alert with information about number of rows in the grid
</script>
</XMP>
</div>
<a name="move"><h4 >Moving Rows</h4></a><div class="block">
To move Row programaticaly developer can use the folowing method:
<XMP>
<script>
mygrid.moveRowDown(rowId)
mygrid.moveRowUp(rowId)
</script>
</XMP>
</div>
<a name="cmenu"><h4 >Context Menu in Grid</h4></a><div class="block">
Professional edition of dhtmlxGrid and dhtmlxTreeGrid has the ability to activate
context menu (based on dhtmlxMenu). For doing this follow the next code:
<XMP>
<script src="../js/dhtmlXCommon.js"></script>
<script src="../js/dhtmlXGrid.js"></script>
<script src="../js/dhtmlXGridCell.js"></script>
<script language="JavaScript" src="menu/js/dhtmlXProtobar.js"></script>
<script language="JavaScript" src="menu/js/dhtmlXMenuBar.js"></script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -