![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
Grid Generation from the Database In addition to wide range of useful features CodeThatGrid allows you to generate grid script from the database. At the example below we use MySQL as database platform and PHP as web-script language. But you can choose your own favorite database platform and web-script language. Here we just try to show basic principles for database table generation. First of all we create two tables - test_structure - specify colunms structure and test_data - data set. Table structure and data are listed below: CREATE TABLE test_data ( id INT AUTO_INCREMENT NOT NULL, username VARCHAR(255) NOT NULL, email VARCHAR(100) NOT NULL, PRIMARY KEY (id) ); CREATE TABLE test_structure ( id INT AUTO_INCREMENT NOT NULL, title VARCHAR(255) NOT NULL, col_type VARCHAR(100) NOT NULL, col_width INT NOT NULL, col_alignment VARCHAR(20) NOT NULL, PRIMARY KEY (id) ); INSERT INTO test_structure VALUES (1, 'ID', 'String', 75, 'center'); INSERT INTO test_structure VALUES (2, 'User Name', 'String', 150, 'center'); INSERT INTO test_structure VALUES (3, 'Email', 'String', 150, 'center'); INSERT INTO test_data VALUES (1, 'Stiles James', 'jstiles@necasting.com'); INSERT INTO test_data VALUES (2, 'Alexander Jacklynn', 'speedracer1979@iwon.com'); INSERT INTO test_data VALUES (3, 'Martin Barney', 'mb@necasting.com'); Of course, when you create your real CodeThatGrid script, tables will contain more fields and data. Next step - we create .php script. Result of this script implementation may be script file or separated content file.<?php function create_definition() { global $db; $definition = ""; $result = mysql_query("select * from test_data"); $data = "["; $num_result = mysql_num_fields ($result); for ($i = 0; $i<$num_result; $i++) { if ($i>0) $data .= ', '; $data .= '["' . @mysql_result($result, $i, "id") . '", ' . '"' . @mysql_result($result, $i, "username") . '", ' . '"' . @mysql_result($result, $i, "email") . '"]'; } $data .= ']'; $result2 = mysql_query("select * from test_structure"); $coldef = "["; $num_result2 = mysql_num_fields($result2); for ($i = 0; $i<$num_result2; $i++) { if ($i>0) $coldef .= ', '; $coldef .= '{title: "' . @mysql_result($result2, $i, "title") . '", titleClass: "", type: "' . @mysql_result($result2, $i, "col_type") . '", width: ' . @mysql_result($result2, $i, "col_width") . ', alignment: "' . @mysql_result($result2, $i, "col_alignment") . '", compareFunction: compare, isVisible: true, '. ' useAutoIndex: false, useAutoFilter: false } '; } $coldef .= ']'; $definition = "var gridDef={useExportBar :false, useMultiSort:true, useColTitle: true, data: $data, colDef: $coldef , rowStyle : { markClass: "mark", darkClass: "dark", lightClass: "light", hoverClass: "hover"}, tablestyle : {tableClass:{borderwidth:"2",borderstyle:"solid", bordercolor:"#bbbbbb",backgroundcolor:"#ffffff"}, thClass : {fontfamily:"Verdana", fontsize:"12px", color:"#000000", borderwidth:"1", borderstyle: "solid", bordercolor: "#cfcfcf", backgroundcolor:"#ececec"}, tdClass : {fontfamily:"Verdana", fontsize:"12px", color:"#000000"}, bgcolor : "#bbbbbb", x : 0, y : 0, width: 660, height: 480}};'; return $definition; } ?> And finally we complete a web page for menu script: <html> <head> <title>Grid Test</title> <script language="javascript" src="../Scripts/codethatsdk.js"></script> <script language="javascript" src="../Scripts/codethattype.js"></script> <script language="javascript" src="../Scripts/codethatgridstd.js"></script> <link rel="stylesheet" href="style.css"> <script language="javascript1.2"> <!-- <? create_definition(); ?> //--> </script> </head> <body> <script language="javascript1.2"> <!-- var CodeThatGrid = new CCodeThatGrid("CodeThatGrid", NUM_ROWS, NUM_COLS); CodeThatGrid.init(gridDef); // data initialization from gridDef structure CodeThatGrid.doAction(); // work with table //--> </script> </body> </html> Example - Grid Generation from the DatabaseYou can see an example and complete code here - Grid Generation from the Database Example [popup] Grid Generation from the CSV String You also can define data from the csv data strings at csv format by using strings like this: data1; data2; ...dataN\ndata1; data2; ...dataN\n .... \ndata1; data2; ...dataN where Enteris changed by \n. Also you should specify datatype : 1 Example - Grid Generation from the csv stringYou can see an example and complete code here - Grid Generation from the CSV string [popup] Grid Generation from the CSV FileYour csv file must be formatted as xml file with one tag data, which includes csv string Format of this csv file is: <?xml version="1.0"?> <data> value; value; ... ... value; value; ... </data> To define data from the csv file set: datatype : 3 and at the data parameter set a pathes to your csv file For example: data : "data/csv.xml" Important! If your brower don't support ActiveXObject or XMLHttpRequest, popup window will be used to get content from file. If you have troubles with loading data from external file, allow please your browser open popup windows.Example - Grid Generation from the csv fileYou can see an example and complete code here - Grid Generation from the csv file [popup] Grid Generation from the XML FileTo define data from the XML file set: datatype : 2 and at the data parameter set a path to your xml file. For example: data : "Scripts/xml.xml" This format allows to store file formatting. XML-file format is: <?xml version="1.0"?> <data table = "GRID_NAME"> <row id = "ID"> <field fieldname = "col.title" bold = "true|false" underline = "true|false" italic = "true|false" align = "left|center|right">cell.value</field> </row> </data> Important! If your brower don't support ActiveXObject or XMLHttpRequest, popup window will be used to get content from file. If you have troubles with loading data from external file, allow please your browser open popup windows.Example - Grid Generation from the XML fileYou can see an example and complete code here - Grid Generation from the XML file [popup] Grid Generation from XML StringTo define data from the XML string set: datatype : 4 and at the data parameter write data string. Each Enter should be replaced by '\n'. This format allows to store formatting. Example - Grid Generation from the XML StringYou can see an example and complete code here - Grid Generation from the XML String [popup] Grid Generation from FormTo load data from form you need implement the form with data before grid initiation and use datatype 1 or 4. It depend on format of data you use. <form name="source"> <input type="hidden" name="data" value="...;... ...;... ...;..."> </form> <script language="javascript1.2"> <!-- var g = new CCodeThatGrid("g", 10, 10); g.init(gridDef); //load data from form as csv string g.doAction(1, document.source.data.value); //--> </script> Example - Grid Generation from the form as XML StringYou can see an example and complete code here - Grid Generation from the form as XML String [popup] |
|||||||
© CodeThat.com, 2003-2005 |