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

Question

我寫了一個代碼，以便與treeview手動。

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 content`。這裏我使用了：

• orientation設置窗格的方向。 horizontal表示它們水平平鋪。您可以添加\Kendo\Ui\SplitterPane。
• 在\Kendo\Ui\SplitterPane中，我已經使用content來添加內部的另一個小部件定義，並使用startContent和endContent來定界HTML塊的開始和結束。

你可以在here找到很好的信息。

你的代碼使分流消失，因爲這是使用劍道UI部件（純JavaScript中，不使用PHP的包裝），並在這一段代碼，你沒有定義新的TreeView的內容以不同的方式。