PHP Kendo\UI\TreeView示例

示例#1

文件： index.php 项目： neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
// helper function that creates TreeViewItem with spriteCssClass
function TreeViewItem($text, $spriteCssClass)
{
    $item = new \Kendo\UI\TreeViewItem($text);
    $item->spriteCssClass($spriteCssClass);
    return $item;
}
$site = TreeViewItem('My Web Site', 'folder');
$images = TreeViewItem('images', 'folder');
$images->expanded(true);
$images->addItem(TreeViewItem('logo.png', 'image'))->addItem(TreeViewItem('body-back.png', 'image'))->addItem(TreeViewItem('my-photo.jpg', 'image'));
$pdfs = TreeViewItem('pdf', 'folder');
$pdfs->expanded(true);
$pdfs->addItem(TreeViewItem('brochure.pdf', 'pdf'))->addItem(TreeViewItem('prices.pdf', 'pdf'));
$resources = TreeViewItem('resources', 'folder');
$resources->expanded(true);
$resources->addItem($pdfs)->addItem(TreeViewItem('zip', 'folder'));
$site->expanded(true);
$site->addItem($images)->addItem($resources)->addItem(TreeViewItem('about.html', 'html'))->addItem(TreeViewItem('contacts.html', 'html'))->addItem(TreeViewItem('index.html', 'html'))->addItem(TreeViewItem('portfolio.html', 'html'));
$treeview->addItem($site);
echo $treeview->render();
?>

示例#2

文件： checkboxes.php 项目： neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('class', 'demo-section');
$checkboxes = new \Kendo\UI\TreeViewCheckboxes();
$checkboxes->checkChildren(true);
$treeview->checkboxes($checkboxes);
// helper function that creates TreeViewItem with id and spriteCssClass
function TreeViewItem($id, $text, $spriteCssClass)
{
    $item = new \Kendo\UI\TreeViewItem($text);
    $item->spriteCssClass($spriteCssClass);
    $item->id = $id;
    return $item;
}
$documents = TreeViewItem(1, 'My Documents', 'rootfolder');
$documents->expanded(true);
$kendoproject = TreeViewItem(2, 'Kendo UI Project', 'folder');
$kendoproject->expanded(true);
$kendoproject->addItem(TreeViewItem(3, 'about.html', 'html'))->addItem(TreeViewItem(4, 'index.html', 'html'))->addItem(TreeViewItem(5, 'logo.png', 'image'));
$newsite = TreeViewItem(6, 'New Web Site', 'folder');
$newsite->expanded(true);
$newsite->addItem(TreeViewItem(7, 'mockup.jpg', 'image'))->addItem(TreeViewItem(8, 'Research.pdf', 'pdf'));
$reports = TreeViewItem(9, 'Reports', 'folder');
$reports->expanded(true);
$reports->addItem(TreeViewItem(10, 'February.pdf', 'pdf'))->addItem(TreeViewItem(11, 'March.pdf', 'pdf'))->addItem(TreeViewItem(12, 'April.pdf', 'pdf'));

示例#3

文件： templates.php 项目： neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('class', 'demo-section');
$treeview->template('#: item.text #' . '# if (!item.items) { #' . '<a class="delete-link" href="\\#"></a>' . '# } #');
// helper function that creates TreeViewItem with id and spriteCssClass
function TreeViewItem($id, $text, $spriteCssClass)
{
    $item = new \Kendo\UI\TreeViewItem($text);
    $item->spriteCssClass($spriteCssClass);
    $item->id = $id;
    return $item;
}
$documents = TreeViewItem(1, 'My Documents', 'rootfolder');
$documents->expanded(true);
$kendoproject = TreeViewItem(2, 'Kendo UI Project', 'folder');
$kendoproject->expanded(true);
$kendoproject->addItem(TreeViewItem(3, 'about.html', 'html'))->addItem(TreeViewItem(4, 'index.html', 'html'))->addItem(TreeViewItem(5, 'logo.png', 'image'));
$newsite = TreeViewItem(6, 'New Web Site', 'folder');
$newsite->expanded(true);
$newsite->addItem(TreeViewItem(7, 'mockup.jpg', 'image'))->addItem(TreeViewItem(8, 'Research.pdf', 'pdf'));
$reports = TreeViewItem(9, 'Reports', 'folder');
$reports->expanded(true);
$reports->addItem(TreeViewItem(10, 'February.pdf', 'pdf'))->addItem(TreeViewItem(11, 'March.pdf', 'pdf'))->addItem(TreeViewItem(12, 'April.pdf', 'pdf'));
$documents->addItem($kendoproject, $newsite, $reports);
$dataSource = new \Kendo\Data\HierarchicalDataSource();

示例#4

文件： remote-data-binding.php 项目： neevan1e/Done

$read = new \Kendo\Data\DataSourceTransportRead();
// Connecting to live service on demos.telerik.com/kendo-ui
// $read->url('http://demos.telerik.com/kendo-ui/service/Employees')
//     ->dataType('jsonp');
// Bind to self
$read->url('remote-data-binding.php')->contentType('application/json')->type('POST');
$transport->read($read)->parameterMap('function(data) {
              return kendo.stringify(data);
          }');
$model = new \Kendo\Data\HierarchicalDataSourceSchemaModel();
$model->id("EmployeeID")->hasChildren("HasEmployees");
$schema = new \Kendo\Data\HierarchicalDataSourceSchema();
$schema->model($model);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->transport($transport)->schema($schema);
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('class', 'demo-section');
$treeview->dataSource($dataSource);
$treeview->dataTextField("FullName");
echo $treeview->render();
?>

<style scoped>
    #example {
        text-align: center;
    }

    .demo-section {
        display: inline-block;
        vertical-align: top;
        width: 320px;

示例#5

文件： employees.php 项目： mhsadiqhussain/wrappers-getting-started

require_once 'lib/Kendo/Autoload.php';
include 'header.php';
// ---- Kendo UI DataSource Transport ----
$read = new Kendo\Data\DataSourceTransportRead();
$read->url('/api/employees.php')->contentType('application/json');
$transport = new Kendo\Data\DataSourceTransport();
$transport->read($read);
// ---- Kendo UI Hierarchical DataSource ----
$model = new \Kendo\Data\HierarchicalDataSourceSchemaModel();
$model->id("EmployeeID")->hasChildren("HasEmployees");
$schema = new \Kendo\Data\HierarchicalDataSourceSchema();
$schema->model($model);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->transport($transport)->schema($schema);
// ---- Kendo UI TreeView ----
$treeview = new \Kendo\UI\TreeView('employee-list');
$treeview->dataSource($dataSource)->dataTextField("FullName");
?>

<h2>Employees</h2>
<p>
A Kendo UI TreeView control with a hierarchical 
data source, lazy-loading the employee hierarchy.
</p>
<?php 
echo $treeview->render();
?>

<?php 
include 'footer.php';

示例#6

文件： images.php 项目： neevan1e/Done

$search = ImageTreeViewItem('Search Folders', '../content/web/treeview/search.png');
$search->expanded(true);
$search->addItem(ImageTreeViewItem('Categorized Mail', '../content/web/treeview/search.png'), ImageTreeViewItem('Large Mail', '../content/web/treeview/search.png'), ImageTreeViewItem('Unread Mail', '../content/web/treeview/search.png'));
$settings = ImageTreeViewItem('Settings', '../content/web/treeview/settings.png');
$dataSource = new \Kendo\Data\HierarchicalDataSource();
// add root-level nodes as datasource data
$dataSource->data(array($inbox, $drafts, $search, $settings));
$treeview->dataSource($dataSource);
echo $treeview->render();
?>
</div>

<div class="treeview-back">
<h3>TreeView with sprites</h3>
<?php 
$treeview = new \Kendo\UI\TreeView('treeview-sprites');
// helper function that creates TreeViewItem with spriteCssClass
function TreeViewItem($text, $spriteCssClass)
{
    $item = new \Kendo\UI\TreeViewItem($text);
    $item->spriteCssClass($spriteCssClass);
    return $item;
}
$documents = TreeViewItem('My Documents', 'rootfolder');
$documents->expanded(true);
$kendoproject = TreeViewItem('Kendo UI Project', 'folder');
$kendoproject->expanded(true);
$kendoproject->addItem(TreeViewItem('about.html', 'html'))->addItem(TreeViewItem('index.html', 'html'))->addItem(TreeViewItem('logo.png', 'image'));
$newsite = TreeViewItem('New Web Site', 'folder');
$newsite->expanded(true);
$newsite->addItem(TreeViewItem('mockup.jpg', 'image'))->addItem(TreeViewItem('Research.pdf', 'pdf'));

示例#7

文件： api.php 项目： neevan1e/Done

    </ul>
    <span class="configHead" style="margin-top: 1.5em">DataSource interaction</span>
    <ul class="options">
        <li>
            <button class="k-button" id="sortDataSource">Sort</button>
        </li>
        <li>
            <input id="filterText" value="Item 1" class="k-textbox"/>
            <button class="k-button" id="filterDataSource">Filter by text</button>
        </li>
    </ul>
</div>

<div class="demo-section">
<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$item1 = new \Kendo\UI\TreeViewItem('Item 1');
$item1->expanded(true);
$item1->addItem(new \Kendo\UI\TreeViewItem('Item 1.1'), new \Kendo\UI\TreeViewItem('Item 1.2'), new \Kendo\UI\TreeViewItem('Item 1.3'));
$item2 = new \Kendo\UI\TreeViewItem('Item 2');
$item2->addItem(new \Kendo\UI\TreeViewItem('Item 2.1'), new \Kendo\UI\TreeViewItem('Item 2.2'), new \Kendo\UI\TreeViewItem('Item 2.3'));
$item3 = new \Kendo\UI\TreeViewItem('Item 3');
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->data(array($item1, $item2, $item3));
$treeview->dataSource($dataSource)->loadOnDemand(false);
echo $treeview->render();
?>
</div>

<script>
    $(document).ready(function () {

示例#8

文件： dragdrop.php 项目： neevan1e/Done

<?php 
$treeview = new \Kendo\UI\TreeView('treeview-left');
$treeview->dragAndDrop(true);
$furniture = new \Kendo\UI\TreeViewItem('Furniture');
$furniture->expanded(true);
$furniture->addItem(new \Kendo\UI\TreeViewItem('Tables & Chairs'), new \Kendo\UI\TreeViewItem('Sofas'), new \Kendo\UI\TreeViewItem('Occasional Furniture'));
$decor = new \Kendo\UI\TreeViewItem('Decor');
$decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Carpets'));
$datasource = new \Kendo\Data\HierarchicalDataSource();
$datasource->data(array($furniture, $decor));
$treeview->dataSource($datasource);
echo $treeview->render();
?>

<?php 
$treeview = new \Kendo\UI\TreeView('treeview-right');
$treeview->dragAndDrop(true);
$storage = new \Kendo\UI\TreeViewItem('Storage');
$storage->expanded(true);
$storage->addItem(new \Kendo\UI\TreeViewItem('Wall Shelving'), new \Kendo\UI\TreeViewItem('Floor Shelving'), new \Kendo\UI\TreeViewItem('Kids Storage'));
$lights = new \Kendo\UI\TreeViewItem('Lights');
$lights->addItem(new \Kendo\UI\TreeViewItem('Ceiling'), new \Kendo\UI\TreeViewItem('Table'), new \Kendo\UI\TreeViewItem('Floor'));
$datasource = new \Kendo\Data\HierarchicalDataSource();
$datasource->data(array($storage, $lights));
$treeview->dataSource($datasource);
echo $treeview->render();
?>
</div>

<style scoped>
    #treeview-left,

示例#9

文件： local-data-binding.php 项目： neevan1e/Done

$treeviewLeft = new \Kendo\UI\TreeView('treeview-left');
$treeviewLeft->dataSource($inlineDefault);
echo $treeviewLeft->render();
?>
</div>

<div class="demo-section">
	<strong>Inline data</strong>	
	<?php 
$model = new \Kendo\Data\HierarchicalDataSourceSchemaModel();
$model->children("subCategories");
$schema = new \Kendo\Data\HierarchicalDataSourceSchema();
$schema->model($model);
$inline = new \Kendo\Data\HierarchicalDataSource();
$inline->schema($schema)->data(array(array('categoryName' => 'Storage', 'subCategories' => array(array('subCategoryName' => 'Wall Shelving'), array('subCategoryName' => 'Floor Shelving'), array('subCategoryName' => 'Kids Storage'))), array('categoryName' => 'Lights', 'subCategories' => array(array('subCategoryName' => 'Ceiling'), array('subCategoryName' => 'Table'), array('subCategoryName' => 'Floor')))));
$treeviewRight = new \Kendo\UI\TreeView('treeview-right');
$treeviewRight->dataSource($inline)->dataTextField(array('categoryName', 'subCategoryName'));
echo $treeviewRight->render();
?>
	
</div>

<style scoped>
	#example {
		text-align: center;
	}

	.demo-section {
		display: inline-block;
		vertical-align: top;
		width: 220px;

示例#10

文件： keyboard-navigation.php 项目： neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('tabindex', '1')->attr('accesskey', 'w');
$furniture = new \Kendo\UI\TreeViewItem('Furniture');
$furniture->addItem(new \Kendo\UI\TreeViewItem('Tables & Chairs'), new \Kendo\UI\TreeViewItem('Sofas'), new \Kendo\UI\TreeViewItem('Occasional Furniture'), new \Kendo\UI\TreeViewItem('Childerns Furniture'), new \Kendo\UI\TreeViewItem('Beds'));
$decor = new \Kendo\UI\TreeViewItem('Decor');
$decor->expanded(true);
$decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Throws'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Rugs'), new \Kendo\UI\TreeViewItem('Carpets'));
$storage = new \Kendo\UI\TreeViewItem('Storage');
$storage->addItem(new \Kendo\UI\TreeViewItem('Wall Shelving'), new \Kendo\UI\TreeViewItem('Kids Storage'), new \Kendo\UI\TreeViewItem('Baskets'), new \Kendo\UI\TreeViewItem('Multimedia Storage'), new \Kendo\UI\TreeViewItem('Floor Shelving'), new \Kendo\UI\TreeViewItem('Toilet Roll Holders'), new \Kendo\UI\TreeViewItem('Storage Jars'), new \Kendo\UI\TreeViewItem('Drawers'), new \Kendo\UI\TreeViewItem('Boxes'));
$treeview->addItem($furniture, $decor, $storage);
echo $treeview->render();
?>
</div>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign wider">Alt</span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget

示例#11

文件： events.php 项目： neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('class', 'demo-section')->attr('style', 'width: 200px');
$treeview->dragAndDrop(true);
// build DataSource
$furniture = new \Kendo\UI\TreeViewItem('Furniture');
$furniture->expanded(true);
$furniture->addItem(new \Kendo\UI\TreeViewItem('Tables & Chairs'), new \Kendo\UI\TreeViewItem('Sofas'), new \Kendo\UI\TreeViewItem('Occasional Furniture'), new \Kendo\UI\TreeViewItem('Childerns Furniture'), new \Kendo\UI\TreeViewItem('Beds'));
$decor = new \Kendo\UI\TreeViewItem('Decor');
$decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Throws'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Rugs'), new \Kendo\UI\TreeViewItem('Carpets'));
$storage = new \Kendo\UI\TreeViewItem('Storage');
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->data(array($furniture, $decor, $storage));
$treeview->dataSource($dataSource);
// attach client-side events
$treeview->select("onSelect")->change("onChange")->collapse("onCollapse")->expand("onExpand")->dragStart("onDragStart")->drag("onDrag")->drop("onDrop")->dragEnd("onDragEnd")->navigate("onNavigate");
echo $treeview->render();
?>

<script>
    function onSelect(e) {
        kendoConsole.log("Selecting: " + this.text(e.node));
    }

    function onChange(e) {

示例#12

文件： animation.php 项目： neevan1e/Done

            <label for="toggle">toggle animation</label>
        </li>
        <li>
            <input id="expand" name="animation" type="radio" checked="checked" />
            <label for="expand">expand animation</label>
        </li>
        <li>
            <input id="opacity" type="checkbox" checked="checked" />
            <label for="opacity">animate opacity</label>
        </li>
    </ul>
</div>

<div class="demo-section">
<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('style', 'width: 200px;');
$furniture = new \Kendo\UI\TreeViewItem('Furniture');
$furniture->addItem(new \Kendo\UI\TreeViewItem('Tables & Chairs'), new \Kendo\UI\TreeViewItem('Sofas'), new \Kendo\UI\TreeViewItem('Occasional Furniture'), new \Kendo\UI\TreeViewItem('Childerns Furniture'), new \Kendo\UI\TreeViewItem('Beds'));
$decor = new \Kendo\UI\TreeViewItem('Decor');
$decor->expanded(true);
$decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Throws'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Rugs'), new \Kendo\UI\TreeViewItem('Carpets'));
$storage = new \Kendo\UI\TreeViewItem('Storage');
$storage->addItem(new \Kendo\UI\TreeViewItem('Wall Shelving'), new \Kendo\UI\TreeViewItem('Kids Storage'), new \Kendo\UI\TreeViewItem('Baskets'), new \Kendo\UI\TreeViewItem('Multimedia Storage'), new \Kendo\UI\TreeViewItem('Floor Shelving'), new \Kendo\UI\TreeViewItem('Toilet Roll Holders'), new \Kendo\UI\TreeViewItem('Storage Jars'), new \Kendo\UI\TreeViewItem('Drawers'), new \Kendo\UI\TreeViewItem('Boxes'));
$treeview->addItem($furniture, $decor, $storage);
echo $treeview->render();
?>
</div>

<script>
    $(document).ready(function() {