Question

我正在使用Yii构建一个PHP应用程序，并通过Ajax使用MTreeView（基于JQuery TreeView的小部件）来显示一些分层数据。我的延迟加载运行良好 - 当用户点击一个加号时，孩子们通过Ajax加载。问题是：用户可以创建项目，我希望将这些项目添加到树中，而无需重新加载页面。我已经找到了几个如何将项添加到JQuery树的示例，但这些都不适用于异步树。因为添加的某些项目可能有子项，在这些情况下，我希望出现一个加号，当单击时，会触发加载子项的Ajax请求，就像树中的其他加号一样。

在这个最小的例子中，我对要显示的数据进行了硬编码，但在工作应用程序中，数据来自使用ActiveRecord模型的数据库。

控制器：

public function actionajaxFillTree() {
    Yii::import('application.extensions.MTreeView.MTreeView');
    if (!Yii::app()->request->isAjaxRequest) {
        exit();
    }
    $parentId = $_GET['root'];
    $result = array();
    if ($parentId == 'source') {
        array_push($result, array('id' => '1', 'text' => 'text1', 'hasChildren' => 1));
        array_push($result, array('id' => '2', 'text' => 'text2', 'hasChildren' => 1));
        array_push($result, array('id' => '3', 'text' => 'text3', 'hasChildren' => 0));
    } elseif ($parentId == '1') {
        array_push($result, array('id' => '1-1', 'text' => 'text1-1', 'hasChildren' => 0));
        array_push($result, array('id' => '1-2', 'text' => 'text1-2', 'hasChildren' => 0));
    } elseif ($parentId == '2') {
        array_push($result, array('id' => '2-1', 'text' => 'text2-1', 'hasChildren' => 0));
    };
    echo str_replace(
            '"hasChildren":"0"', '"hasChildren":false', MTreeView::saveDataAsJson($result));
    exit();
 }

查看：

 <?php $this->widget('application.extensions.MTreeView.MTreeView', array('url' => array('ajaxFillTree'),
'animated' => 'fast',
'htmlOptions' => array('id' => 'tree'),
    )); ?>

到目前为止一切顺利。现在假设用户向数据库添加了一些内容。我希望这个项目出现在适当位置的树中。根据网络上的其他示例，我可以通过javascript将项目添加到树中，如下所示：

（在视图内）

<button id="add">Add!</button> 
<script language="javascript" type="text/javascript">   
  $("#add").click(function() {
           var children = "<li>New Sublist<ul></ul>"; 
     children = $(children).insertAfter("#1-2");        
         $("#tree").treeview({
              add: children
         });               
});

我注意到我可以添加/删除<ul></ul>以使加号出现/消失，但这有点像黑客。我还注意到单击此加号不会触发ajax请求，就像其他具有子节点的树项一样。我想有可能以某种方式向这个添加一个onClick AJAX请求 - 但必须有某个地方创建加号并用AJAX请求标记它的逻辑，我应该调用任何函数，而不是有效地反转 - 用JavaScript设计它。我无法理解JQuery javascript代码 - 在我脑海中。

感谢您的帮助。

Answer 1

我想我已经解决了。通过更彻底地检查TreeView生成的html，我修改了上面的代码如下：

var children = "<li id='1-3' class='hasChildren expandable'>New Sublist<ul style='display: none; '><li class='last'><span class='placeholder'></span></li></ul>";

如果有人注意到我这样做的方式有任何奇怪或错误，或者遇到任何实施此问题的问题，我会保持开放状态。

Jquery TreeView - 将节点添加到异步树（PHP，Yii，MTreeView）

1 个答案: