We can change the icons. Just set the name of the icon from jQuery UI Theme Roller.
Moreover we can configure the leaf icon to be read from the database field.
For this purpose we need to configure the tree table.
<?php
require_once '../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Guriddo TreeGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<script src="../../../js/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.jgrid.defaults.width = "700";
</script>
</head>
<body>
<div>
<?php include ("treegrid.php");?>
</div>
<br/>
<?php tabs(array("treegrid.php"));?>
</body>
</html>
treegrid.php.
<?php
ini_set("display_errors",1);
require_once '../jq-config.php';
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqTreeGrid.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqTreeGrid instance
$tree = new jqTreeGrid($conn);
$tree->SelectCommand = "SELECT * FROM nested_category";
// set the table and primary key
$tree->table = 'nested_category';
$tree->setPrimaryKeyId('category_id');
// set tree model and table configuration
$tree->setTreeModel('nested');
$tree->setTableConfig(array('id'=>'category_id', 'left'=>'lft', 'right'=>'rgt'));
// autoloading nodes
$tree->autoLoadNodes = true;
// show any error (if any ) from server
$tree->showError = true;
$tree->setColModel();
$tree->setUrl('treegrid.php');
$tree->dataType = 'json';
// Some nice setting
$tree->setColProperty('name',array("label"=>"Name", "width"=>170));
$tree->setColProperty('price',array("label"=>"Price", "width"=>90, "align"=>"right"));
$tree->setColProperty('qty_onhand',array("label"=>"Qty", "width"=>90, "align"=>"right"));
$tree->setColProperty('color',array("label"=>"Color", "width"=>100));
// hide the not needed fields
$tree->setColProperty('category_id',array("hidden"=>true,"index"=>"accounts.account_id", "width"=>50));
$tree->setColProperty('lft',array("hidden"=>true));
$tree->setColProperty('rgt',array("hidden"=>true));
$tree->setColProperty('level',array("hidden"=>true));
$tree->setColProperty('uiicon',array("hidden"=>true));
// and finaly set the expand column and height to auto
$tree->setGridOptions(array(
"ExpandColumn"=>"name",
"height"=>"auto",
"sortname"=>"account_id",
// set the tree icons
"treeIcons" => array(
"plus"=>"ui-icon-circlesmall-plus",
"minus"=>"ui-icon-circlesmall-minus",
"leaf"=>"ui-icon-document"
)
));
$tree->renderTree('#tree', '#pager', true,null, null, true, true);