douxie1957 2011-11-29 18:05
浏览 39

Jquery TreeView - 将节点添加到异步树(PHP,Yii,MTreeView)

I'm building a PHP app using Yii and am using MTreeView (widget based on JQuery TreeView) via Ajax to display some hierarchical data. I have got lazy loading working well - when user clicks a plus sign the children are loaded via Ajax. The problem: the user can create items and I want those to be added to the tree without having to reload the page. I have found several examples of how to add items to a JQuery tree, but none of these seem to work for an async tree. Because some of the items added may have children, in those cases I want a plus sign to appear that, when clicked, triggers an Ajax request to load the children, like the other plus signs in the tree.

In this minimal example I have hard-coded the data to be displayed, but in the working app the data is coming from the database using ActiveRecord Models.

Controller:

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();
 }

View:

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

So far so good. Now suppose the user adds something to the database. I want this item to appear in the tree in the appropriate place. According to other examples on the web I can add items to the tree via javascript, like this:

(inside the view)

<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
         });               
});    

I noticed that I can add/remove <ul></ul> to make a plus sign appear/disappear, but that's a bit of a hack. I also noticed that clicking on this plus sign does not trigger ajax requests like the other tree items that have children nodes. I suppose it might be possible to add an onClick AJAX request to this somehow -- but there must be logic somewhere that creates the plus sign and tags it with the AJAX request, and I should be invoking whatever function does that instead of effectively reverse-engineering it with JavaScript. I can't make sense of the JQuery javascript code though -- over my head.

Thanks for any help.

  • 写回答

1条回答 默认 最新

  • dsft8327 2011-11-30 09:53
    关注

    I think I've solved it. via more thorough inspection of the html the TreeView is generating, I modified the above code as follows:

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

    I'll leave this open in case anyone notices anything weird or wrong about the way I've been doing this, or in case I run into any issues implementing this.

    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?