JQuery дерево в Граале

Question

Я пытаюсь реализовать асинхронное представление дерева jQuery в моем проекте grails .. Поэтому мое требование заключается в том, чтобы при загрузке страницы я хотел предоставить следующую структуру:

-> Overview
-> Resources
  --> User Activity
  --> Network Sources

И, нажав на Активность пользователя / Сетевые источники , у него должны появиться следующие дети:

--> User Activity
  ---> By Day of Week
  ---> By Time of Day
  .....
--> Network Resources
  ---> By Day of Week
  ---> By Time of Day
  .....

Теперь список дочерних ресурсов должен исходить от контроллера, поэтому на основании этого я попробовал следующий фрагмент кода:

<script type="text/javascript">
  function initTrees() {
                jQuery("#mixed").treeview({
                        url: "/.../.../getSubTreedata"
                })

        }
 $(document).ready(function(){
                initTrees();
        });
</script>

<ul id="mixed">
        <li><span>Overview</span></li>
        <li id="36" class="hasChildren">
            <span>Resources</span>
            <ul>
                       <li><span class="placeholder">&nbsp;</span></li>
            </ul>
        </li>
    </ul>

И контроллер имеет следующий кусок кода:

def getSubTreedata = {
        def jsonChild1 = [text:"By Day of Week"];
        def jsonChild2 = [text:"By Time of Day"];
        def jsonChild3 = [text:"Holiday"];
        def jsonChild4 = [text:"Weekend"];
        def jsonChild5 = [text:"Time Windows"];
        def jsonResult = [
            text: "User Activity",
            expanded : false,
            classes : "important",
            children : [jsonChild1,jsonChild2,jsonChild3,jsonChild4,jsonChild5],
        ]

        def convertedData = jsonResult as JSON
        convertedData = new StringBuffer(convertedData.toString()).insert(0, "[");
        convertedData = new StringBuffer(convertedData.toString()).insert(convertedData.length(), "]");
        println "convertedData = "+convertedData;
        render convertedData;

В конечном итоге его печать convertedData = convertedData = [{"text":"User Activity","expanded":false,"classes":"important","children":[{"text":"By Day of Week"},{"text":"By Time of Day"},{"text":"Holiday"},{"text":"Weekend"},{"text":"Time Windows"}]}]

Но это не соответствует моему требованию, мне нужно создать массив на контроллере, проанализировать его в JSON и вернуть ...

Любая помощь будет высоко оценена ...

: ОБНОВЛЕНИЕ: Теперь я могу показать правильный формат дерева в пользовательском интерфейсе, но мой главный вопрос заключается в том, как показать всем детям, например, «По дням недели», «Время дня» и т. Д., В качестве ссылки с Ajax.Updater ... I Я знаю, что мне нужно изменить файл jquery.treeview.async.js, который на самом деле отображает все дочерние элементы .... Но я не понимаю, как я могу создать их как ссылку и вызвать Ajax.Updater, нажав на эту ссылку ...

Answer 1

Это работает?

def getSubTreedata = {
  def data = [ 
    [ text:     'User Activity', 
      expanded: 'false',
      classes:  'important',
      children: [
        [ text: "By Day of Week" ],
        [ text: "By Time of Day" ],
        [ text: "Holiday" ],
        [ text: "Weekend" ],
        [ text: "Time Windows" ],
      ]
    ]
  ]
  render data as JSON
}

т.е.: обернуть все это в массив и просто отобразить это как JSON

Edit:

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

def getSubTreedata = {
  def data
  switch( param.root ) {
    case '1': // Day of week id
      data = [ [ text: 'Days of the week go in here' ] ]
      break
    case '2': // Time of day id
      data = [ [ text: 'Time of the day goes in here' ] ]
      break
    default: // No recognisable param.root, so render the root tree
      data = [ 
        [ text:     'User Activity', 
          expanded: 'false',
          classes:  'important',
          children: [
            [ text: "By Day of Week", id:'1', hasChildren:'true' ],
            [ text: "By Time of Day", id:'2', hasChildren:'true' ],
          ]
        ]
      ]
    }
  }
  render data as JSON
}

Затем этот метод должен получить значение param.root при вызове, чтобы вы могли определить, какой узел был расширен

Answer 2

Наконец-то решил, переопределив jquery.treeview.async.js ... В этом файле я изменил функцию createNode, по умолчанию он добавлял тег span, вместо того, чтобы сделать его гиперссылкой ....

Теперь код выглядит следующим образом:

function createNode(parent) {
            var current;

            if(this.id && this.owner && this.menu){
              if(this.menu=='users'){
                        current = $("<li/>").attr("id", this.id || "").html("<a class="+this.classes+" href=\"showDetails/\" onclick=\"jQuery.ajax({type:'POST',data:'employeeId="+this.id+"&resourceSel=All', url:'/Project/users/showDetails/',success:function(data,textStatus){jQuery('#behaviorDiv').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false;\">"+this.text+"</a>").appendTo(parent);
                else{
                       current = $("<li/>").attr("id", this.id || "").html("<a class="+this.classes+" href=\"showActivityDetails/\" onclick=\"jQuery.ajax({type:'POST',data:'resourceName="+this.id+"&resourceSel=All', url:'/Project/resource/showActivityDetails/',success:function(data,textStatus){jQuery('#behaviorDiv').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false;\">"+this.text+"</a>").appendTo(parent);
                }

И мой gsp имеет следующий код:

function initTrees () {jQuery ("# ​​peerTreeView"). Treeview ({url: "/ Project/ peer / getSubTreeData ", ajax: {data: {" peerName ": '$ {peerName}'}, тип:" post "}})} jQuery (document) .ready (function () {initTrees ();});Ресурсы

$ {g.message (code: 'users.behavior.contentLabel')}

            }

А внутри контроллера действие getSubTreeData имеет следующий фрагмент кода:

    def getSubTreeData = {
        def data = [
            [ text:'Peer Activity',
                id : params.peerName,
                owner : 'Resources',
                expanded: false,
                classes:  'icon-userActivity',
                menu : 'peer',
                children: [
                    [ text: "By Day of Week", classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "By Time of Day", classes:'icon-time', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "Holiday",        classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "Weekend",        classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "Daily",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "Weekly",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity'],
                    [ text: "Monthly",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'peerActivity']

                ]
            ],
            [
                text:'Network Sources',
                id : params.peerName,
                owner : 'Resources',
                expanded: false,
                classes:  'icon-networkSources',
                menu : 'peer',
                children: [
                    [ text: "By Day of Week", classes:'icon-date', id:params.peerName,  menu : 'peer', owner:'networkSources'],
                    [ text: "By Time of Day", classes:'icon-time', id:params.peerName,  menu : 'peer', owner:'networkSources'],
                    [ text: "Holiday",        classes:'icon-date', id:params.peerName,  menu : 'peer', owner:'networkSources'],
                    [ text: "Weekend",        classes:'icon-date', id:params.peerName,  menu : 'peer', owner:'networkSources'],
                    [ text: "Daily",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'networkSources'],
                    [ text: "Weekly",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'networkSources'],
                    [ text: "Monthly",   classes:'icon-date', id:params.peerName, menu : 'peer', owner:'networkSources']
                ]
            ]
        ]
        render data as JSON
}