0

我编写了一个代码,以便在树视图中使用手册。

div id="treview-back">
<?php

$treeview = new \Kendo\UI\TreeView('treeview');

// helper function that creates TreeViewItem with imageUrl
function ImageTreeViewItem($text) {
    $item = new \Kendo\UI\TreeViewItem($text);
    return $item;
}

$msg = ImageTreeViewItem('Message');
$msg->addItem(
            ImageTreeViewItem('New Message'),
            ImageTreeViewItem('Replay')
        );    
$msg->expanded(true);
$inbox = ImageTreeViewItem('Home');
$inbox->expanded(TRUE);
$inbox->addItem($msg);

$dataSource = new \Kendo\Data\HierarchicalDataSource();

// add root-level nodes as datasource data
$dataSource->data(array($inbox));
$treeview->dataSource($dataSource);

echo $treeview->render();
?></div>

我需要添加一个拆分器小部件,我该怎么做?说明书上没找到。为什么,如果我添加此代码

 <script type="text/javascript">$("#treeview").kendoTreeView({
    checkboxes: true
 });</script>

TreeView 消失。

4

1 回答 1

1

代码的结构与您为tree.

<div id="outer-splitter">
    <?php
    $treeview = new \Kendo\UI\TreeView('treeview');

    // helper function that creates TreeViewItem with imageUrl
    function ImageTreeViewItem($text) {
        $item = new \Kendo\UI\TreeViewItem($text);
        return $item;
    }

    $msg = ImageTreeViewItem('Message');
    $msg->addItem(ImageTreeViewItem('New Message'), ImageTreeViewItem('Replay'));
    $msg->expanded(true);
    $inbox = ImageTreeViewItem('Home');
    $inbox->expanded(TRUE);
    $inbox->addItem($msg);

    $dataSource = new \Kendo\Data\HierarchicalDataSource();

    // add root-level nodes as datasource data
    $dataSource->data(array($inbox));
    $treeview->dataSource($dataSource);

    // Create Left Pane
    $leftPane = new \Kendo\UI\SplitterPane();
    $leftPane->attr("id", "left-pane")->collapsible(true)->size(220)->content($treeview->render());

    // Create Right Pane
    $rightPane = new \Kendo\UI\SplitterPane();
    $rightPane->attr("id", "right-pane")->collapsible(true)->size(220)->startContent();
    ?>

    <div>
        Right pane
    </div>


    <?php
    $rightPane->endContent();

    // create outer splitter
    $splitter = new \Kendo\UI\Splitter('splitter');
    $splitter->orientation("horizontal");
    $splitter->addPane($leftPane);
    $splitter->addPane($rightPane);

    echo $splitter->render();
    ?>
</div>

您需要\Kendo\UI\Splitter用于配置Splitter, setting its内容`。在这里我使用:

  • orientation用于设置窗格的方向。horizontal表示它们是水平平铺的。
  • addPane允许您添加\Kendo\Ui\SplitterPane.
  • \Kendo\Ui\SplitterPane中,我用于content在内部添加另一个小部件定义,startContentendContent用于分隔 HTML 块的开始和结束。

你可以在这里找到非常好的信息。

您的代码使拆分器消失,因为这是使用 Kendo UI 小部件(纯 JavaScript,不使用 PHP 包装器)的不同方式,并且在那段代码中您没有定义TreeView 的内容。

于 2013-04-02T21:51:09.697 回答