Jquery TreeView - добавить узлы в асинхронное дерево (PHP, Yii, MTreeView) - PullRequest
Новая
       20

Jquery TreeView - добавить узлы в асинхронное дерево (PHP, Yii, MTreeView)

0 голосов
/ 29 ноября 2011

Я создаю приложение PHP с использованием Yii и использую MTreeView (виджет, основанный на JQuery TreeView) через Ajax для отображения некоторых иерархических данных. У меня ленивая загрузка работает хорошо - когда пользователь нажимает знак плюс, дети загружаются через 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-запросы, как и у других элементов дерева, имеющих дочерние узлы. Я полагаю, что возможно было бы как-то добавить к этому AJAX-запрос onClick - но где-то должна быть логика, которая создает знак плюс и помечает его AJAX-запросом, и я должен вызывать любую функцию, которая делает это, вместо того, чтобы эффективно обращать- проектирование это с помощью JavaScript. Я не могу понять смысл кода JQuery Javascript, хотя - по моей голове.

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 30 ноября 2011

Я думаю, что решил это.Благодаря более тщательному анализу HTML-кода, который генерирует TreeView, я изменил приведенный выше код следующим образом: 

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

Я оставлю это открытым, если кто-то заметит что-то странное или неправильное в том, как я былили в случае возникновения каких-либо проблем с этим.

...