|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
AjaxTreeview class fetches data from a datatable for the requested parent category id. The data is then stored in array and converted into JSON format. This JSON format is then used by javascript code for populating tree view. JSON ( Javascript Object Notation ) is used as transitional language though XML based version is also available. JSON is used to make processing fast as compared to XML. For component AjaxTreeview JSON support must be available on server side. The component is multibrowser, cross database, cross server side language, fast, flexible and is very easy to implement.
For Installaton ..
1. Run db.sql file on your local or remote database..
2. Change the configuration settings for host, database name, username and password inside services.php.
3. Run index.php file using php compatible web server.
About myself:
I am a PHP programmer working as Sr. Developer in Classic Informatics.
Please rate this class If you find it useful. Please feel free to contact me for queries related to this class. I would feel gratefull if i can sort out your issues related to PHP.
Thanks in advance.
Neeraj Thakur
Sr. Developer
Emails:
neeraj_th@yahoo.com
neerajth@gmail.com
index.php
| <head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<div id="loadingbox"></div>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript" type="text/javascript" src="tree.js"></script>
<script language="JavaScript">
var UI = new Object();
UI.expand = '+';
UI.collapse = '-';
function getData(id)
{
alert("Get Data for Id : " + id);
}
var Page = new Object();
Page.width;
Page.height;
Page.top;
Page.loadOut = function ()
{
document.getElementById('loadingbox').innerHTML ='';
}
Page.getPageCenterX = function ()
{
var fWidth;
var fHeight;
//For old IE browsers
if(document.all)
{
fWidth = document.body.clientWidth;
fHeight = document.body.clientHeight;
}
//For DOM1 browsers
else if(document.getElementById &&!document.all)
{
fWidth = innerWidth;
fHeight = innerHeight;
}
else if(document.getElementById)
{
fWidth = innerWidth;
fHeight = innerHeight;
}
//For Opera
else if (is.op)
{
fWidth = innerWidth;
fHeight = innerHeight;
}
//For old Netscape
else if (document.layers)
{
fWidth = window.innerWidth;
fHeight = window.innerHeight;
}
Page.width = fWidth-180;
Page.height = fHeight-342;
Page.top = window.document.body.scrollTop;
}
onload=(loadChild('tree1',0));
</script>
<div id="tree1" class="nodecls"></div>
</body> | |
css.css
|
#tree1{
position:absolute;
width:200;
height: auto;
z-index:1;
border: 1px dashed #000000;
background-color:#66CCFF;
left: 400px;
top: 100px;
visibility: visible;
display:block;
}
.nodecls
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#000000;
} | |
create database testdb;
| use testdb;
CREATE TABLE `tblcategories` (
`id` int(11) NOT NULL,
`name` varchar(100) default NULL,
`pid` int(11) NOT NULL
) ;
INSERT INTO `tblcategories` VALUES (1, 'Hardware', 0);
INSERT INTO `tblcategories` VALUES (2, 'Software', 0);
INSERT INTO `tblcategories` VALUES (3, 'Movies', 0);
INSERT INTO `tblcategories` VALUES (4, 'Mouse', 1);
INSERT INTO `tblcategories` VALUES (5, 'Keyboard', 1);
INSERT INTO `tblcategories` VALUES (6, 'Monitor', 1);
INSERT INTO `tblcategories` VALUES (7, 'Desktop', 2);
INSERT INTO `tblcategories` VALUES (8, 'Web Application', 2);
INSERT INTO `tblcategories` VALUES (9, 'Mobile Application', 2);
INSERT INTO `tblcategories` VALUES (10, 'Hindi', 3);
INSERT INTO `tblcategories` VALUES (11, 'English', 3);
INSERT INTO `tblcategories` VALUES (12, 'Punjabi', 3);
INSERT INTO `tblcategories` VALUES (13, 'French', 3);
INSERT INTO `tblcategories` VALUES (14, 'American Beauty', 11);
INSERT INTO `tblcategories` VALUES (15, 'Lord of rings', 11);
INSERT INTO `tblcategories` VALUES (20, 'Spinderman III', 11);
INSERT INTO `tblcategories` VALUES (19, 'Logitech', 5);
INSERT INTO `tblcategories` VALUES (16, 'Creative', 5);
INSERT INTO `tblcategories` VALUES (17, 'www.Yahoo.com', 8);
INSERT INTO `tblcategories` VALUES (18, 'www.Hotmail.com', 8);
INSERT INTO `tblcategories` VALUES (21, 'Om Shanti Om', 10);
INSERT INTO `tblcategories` VALUES (22, 'Ji Ayaan Nu', 12);
INSERT INTO `tblcategories` VALUES (23, 'Music', 0); | |
services.php
| <?php
// +------------------------------------------------------------------------+
// | PHP version 5.0 |
// +------------------------------------------------------------------------+
// | Description: |
// | Class to populate tree view using AJAX + PHP |
// | |
// +------------------------------------------------------------------------+
// | Author : Neeraj Thakur <neeraj_th@yahoo.com> |
// | Created Date : 19-11-2007 |
// | Last Modified : 19-11-2007 |
// | Last Modified By : Neeraj Thakur |
// +------------------------------------------------------------------------+
DEFINE ('DB_USER', 'root');
DEFINE ('DB_PASSWORD', '');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'testDB');
if ( @$_REQUEST['method'] == 'getCat' )
{
$objServices = new AjaxTreeview();
$catid = isset($_REQUEST['catid'])?$_REQUEST['catid']:0;
$arr = $objServices->getCatList($catid);
$arrReturn['data'] = $arr;
$arrReturn['id'] = @$_REQUEST['id'];
$arrReturn['value'] = $catid;
$jsonstring = json_encode($arrReturn);
echo $jsonstring;
}
class AjaxTreeview
{
public function AjaxTreeview()
{
// Make the connnection and then select the database.
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() );
mysql_select_db (DB_NAME) OR die ('Could not select the database: ' . mysql_error() );
$this->table = "tblcategories";
}
function dbConnect()
{
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
public function getCatList($catid)
{
$this->dbConnect();
$query = "SELECT * FROM {$this->table} where pid = {$catid} ORDER BY id asc";
$result = mysql_db_query (DB_NAME, $query, LINK);
$arr = array();
$i = 0;
while( $rec = mysql_fetch_array($result) )
{
$arr[$i]['id'] = $rec['id'];
$arr[$i]['name'] = $rec['name'];
$arr[$i]['pid'] = $rec['pid'];
$i ++ ;
}
return $arr;
}
}
?> | |
tree.js
| | var K0=window,Q1=document,A2=write,O2=value;function collpase(id,O2){Q1.getElementById(id).style.display="none";var str='symbol_'+id.replace(/_/g,'');if(Q1.getElementById(str)){var mainid=id.replace(/_/g,'');var symbolhref='<span id="symbol_'+mainid+'"><a href="javascript:expand(\''+id+'\','+O2+');" class="nodecls">'+UI.expand+'</a></span>';Q1.getElementById(str).innerHTML=symbolhref;}}function expand(id,O2){loadChild(id,O2);Q1.getElementById(id).style.display="block";var str='symbol_'+id.replace(/_/g,'');if(Q1.getElementById(str)){var mainid=id.replace(/_/g,'');var symbolhref='<span id="symbol_'+mainid+'"><a href="javascript:collpase(\''+id+'\','+O2+');" class="nodecls">'+UI.collapse+'</a></span>';Q1.getElementById(str).innerHTML=symbolhref;}}function loadChild(id,O2){var strParam="services.php?method=getCat&id="+id+"&catid="+O2;Ajax.Request(strParam,generateChild);}function generateChild(){Ajax.setShowMessage(1);Ajax.setMessage("Loaded..");if(Ajax.CheckReadyState(Ajax.request)){var response=eval('('+Ajax.request.responseText+')');var str='';var i=0;if(response.data.length==0){Q1.getElementById(response.id).style.display="none";}var mainid=response.id.replace(/_/g,'');for(i=0;i < response.data.length;i++){str+='<div id="'+mainid+''+i+'" style="padding-left:20px;">';str+='<span id="symbol_'+mainid+''+i+'"><a href="javascript:expand(\''+response.id+'_'+i+'\','+response.data[i].id+');" class="nodecls">'+UI.expand+'</a></span>';str+='<a href="javascript:getData('+response.data[i].id+');" class="nodecls">'+response.data[i].name+'</a></div>';str+='<div id="'+response.id+'_'+i+'" style="padding-left:20px;display:none"></div>';}Q1.getElementById(response.id).innerHTML=str;}} | |
|
|
| Ajax PHP Tree (Left and Right) with MySQL
Categories : PHP, Databases, MySQL, AJAX, PHP Classes | | | AJAX Data Grid System using php and mysql. A complete login system with the ability to display data in a grid using ajax. Add , update and delete the records without reloading the page.
Categories : PHP, AJAX, Databases, MySQL, Java Script | | | Zephyr: AJAX Based Framework for PHP5 Developers
Categories : PHP, AJAX, Frameworks, Java Script, Web Applications | | | Create HTML forms dynamicly using Javascript & PHP
Categories : PHP, PHP Classes, Java Script | | | Linked comboboxes with php-mysql & javascript
Categories : PHP, Java Script, Databases, MySQL | | | usercounter class
Categories : PHP, PHP Classes, Databases, MySQL, Environment Variables | | | MySQL Handler
Categories : PHP, Databases, MySQL, Classes and Objects, PHP Classes | | | PostGreSQL and MySQL 2 in 1 db Manager
Categories : PHP, PHP Classes, Databases, PostgreSQL, MySQL | | | Pull Down Surfing - Surf on Change
Categories : Java Script, MySQL, HTML and PHP, PHP, Databases | | | MySQL Class to ease Database connectivity
Categories : MySQL, PHP Classes, Databases, PHP | | | Remote Scripting: send form POST data to a script and insert the results into a page without refreshing the page.
Categories : PHP, AJAX, HTML and PHP, Java Script | | | Simple Mini Poll class library (SimPoll)
Categories : PHP, PHP Classes, Databases, MySQL, Complete Programs | | | Simple class to create insert and update statements. Independent of the access to the database. Makes handling complex inserts easier - especially when the table structure is liable to change.
Categories : Databases, PHP Classes, PHP | | | Online Automatic Class Generator for MySQL Tables
Categories : PHP, PHP Classes, Classes and Objects, Databases, MySQL | | | Specify your connection settings and create a link to a MySQL database.
Categories : PHP, PHP Classes, Databases, MySQL, Beginner Guides | |
|
|
|
