jquery treeview in grails

I am trying to implement the async jQuery treeview in my grails project.. So my requirement is that on loading of the page i want to provide following structure :

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

And by clicking on User Activitity/Network Sources it should have following children :

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

Now the children list of Resources should be coming from controller, so based on that I have tried with following piece of code :

<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>

And controller has following piece of code :

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;

Ultimately its printing convertedData = convertedData = [{"text":"User Activity","expanded":false,"classes":"important","children":[{"text":"By Day of Week"},{"text":"By Time of开发者_Go百科 Day"},{"text":"Holiday"},{"text":"Weekend"},{"text":"Time Windows"}]}]

But it's not matching with my requirement, i need to create an array at controller and parse it into JSON and return it...

Any help would be highly Appreciated...

: UPDATE : Now I am able to show the proper tree format at UI, but my major question is how can I show all the children i.e. "By day of week", "Time of Day" etc as a link with Ajax.Updater... I know I need to change jquery.treeview.async.js file which actually is displaying all the childs.... But I am not getting how can I create them as a link and call Ajax.Updater by clicking on that link...

---

Does this work?

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
}

ie: wrap it all in an array, and just render that as JSON

Edit:

To let some of the children be clickable, looks like you need to do:

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
}

Then, this method should get a param.root value when it is called so you can tell which node was expanded

---

Finally Resolved it by overriding jquery.treeview.async.js... In this file I have modified createNode function, by default it was adding span tag, instead of that i have made it a hyperlink....

Now the code looks like :

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

And my gsp has following code :

function initTrees() { jQuery("#peerTreeView").treeview({ url: "/Project/peer/getSubTreeData", ajax: { data: { "peerName":'${peerName}' }, type:"post" } }) } jQuery(document).ready(function(){ initTrees(); }); Resources

•  

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

            }

And inside the controller getSubTreeData action has following piece of code :

    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
}