Question

我在树形图中手动编写了一个代码。

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>

我需要添加一个Splitter小部件，我该怎么做呢？我没有在手册中找到它。为什么，如果我添加此代码

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

TreeView消失了。

Answer 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在内部添加了另一个窗口小部件定义，并使用startContent和endContent来分隔HTML块的开头和结尾。< / LI>

您可以在here找到非常好的信息。

您的代码使分割器消失，因为这是使用Kendo UI小部件（纯JavaScript，不使用PHP包装器）的不同方式，并且在那段代码中您没有定义 new TreeView。

如何使用PHP包装器在kendoui中嵌套小部件？

1 个答案: