Как обновить узел `ajax` на клике? - PullRequest
Новая
       24

Как обновить узел `ajax` на клике?

2 голосов
/ 04 августа 2011

Есть некоторые узлы, которые получают данные из AJAX вызова в моем jsTree.

Как я могу обновить данные, а НЕ перезагрузить все дерево?

  • лучше всего будет просто нажать на узле, который я хочу обновить
  • контекстное меню тоже нормально

1 Ответ

3 голосов
/ 13 сентября 2011

Как насчет этого? 

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="jquery.jstree.js"></script>
<script>
var treeConfig = { 
  "json_data" : {   
  "data" : [{
      "data" : "Root",
      "state" : "closed",
      "children" : ""
      }],
  "ajax" : {
      "url" : "http://localhost/tree.json",
      "data" : function (node) {                        
          return { query : "Value" };
      }
    } 
  },
  "plugins" : [ "themes", "json_data", "ui" ],
};

$(document).ready(function(){
 $("#treeContainer").jstree(treeConfig);

 $('#treeContainer a').live('click',function(){
    var tree = jQuery.jstree._reference("#treeContainer");
    var currentNode = tree._get_node(null, false);
    tree.refresh(currentNode);
 });

});
</script>
</head>

<body>
 <div id="treeContainer"></div>
</body>
</html>

Вот что я делаю:

  • с использованием плагина данных JSON (но концепция для плагинов HTML и XML аналогична)
  • загрузка начального узла дерева ("Root") из объекта конфигурации данных
  • установка объекта конфигурации AJAX так, чтобы все другие узлы запрашивали свои дочерние данные через ajax при их первом открытии (применяется к любому узлугде «состояние» - «закрыто», а «дети» - «пусто»)
  • с использованием функции данных AJAX для передачи правильной строки запроса для получения соответствующих данных для открываемого узла.Мой пример всегда извлекает http://localhost/tree.json?query=Value, но вы, вероятно, хотите сделать что-то вроде установки значения в качестве идентификатора узла, чтобы сервер отправлял соответствующие данные.

Пока это делает запрос ajax дляданные узла только при первом открытии узла.Последний шаг:

  • создайте функцию щелчка, которая заставляет отдельный узел обновлять свои данные каждый раз, когда он нажимается
...