EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: forum6691 on May 09, 2014, 01:30:13 PM


Title: Expand event doesn't fire every time
Post by: forum6691 on May 09, 2014, 01:30:13 PM
I have this method on a tree

  J('#treev').tree({
            onExpand:function(node){
               requeteNoeud(node);
            }
        });

My function "requeteNoeud(node); " is only called after 3 clicks on the directory of the tree.

First, I expand with the mouse. None event onExpand is fired
Second, I de-expand with the mouse, none event onExpand  is fired
Third, I expand again with the mouse and then the event onExpand is fired !

Is it normal ?

Title: Re: Expand event doesn't fire every time
Post by: stworthy on May 09, 2014, 08:50:02 PM
Please refer to this example http://jsfiddle.net/zYD2c/. It works fine.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on May 09, 2014, 09:07:33 PM
My code is the same. I don't think it's a syntax problem.

I add an alert(..) in the onExpand function and I get the same behaviour. Only the third click is taken acount and function is called.

I think the problem is a conflict with other function on the tree on my code, but which is ?

Here is the others functions:

Code:
 J('#treev').tree({ // charge les tooltips adaptés à partir de l'attribut
            formatter:function(node){
                return '<span title="' + node.attributes.info + '">' + node.text + '</span>';
            }
        });
        J('#treev').tree({ // appel du plugin
            onClick:function(){
                var nodes = J('#treev').tree('getChecked');
                var s = '';
                for(var i=0; i<nodes.length; i++){
                        if (s != '') s += ',';
                        s += nodes[i].id;
                }s
                alert(s);
            }
        });
        J('#treev').tree({ 
            onCheck:function(node,checked){
               if(checked) alert(node);
            }
        });
        // On sélectionne l'ouverture d'un noeud dans l'arborescence
        J('#treev').tree({ 
            onExpand:function(node){
               alert('expand node '+node.text);
               requeteNoeud(node); 
            }
        }); 
        // Extension de méthode pour implémenter une fonction removeAll dans le tree
        J.extend(J.fn.tree.methods, {
            removeAll:function(jq){
		return jq.each(function(){
			var roots = J(this).tree('getRoots');
			for(var i=0; i<roots.length; i++){
				J(this).tree('remove', roots[i].target);
			}
		})
            }   
        })


Title: Re: Expand event doesn't fire every time
Post by: stworthy on May 09, 2014, 09:13:44 PM
Please remove your statement requeteNoeud(node); and see if it works well.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on May 11, 2014, 06:09:55 AM
The behaviour is the same when I remove requeteNoeud(node).
The alert method is only called the third time I click on the little triangle to develop or close the tree

Title: Re: Expand event doesn't fire every time
Post by: stworthy on May 11, 2014, 11:23:19 PM
Please refer to the updated example that is built from your code snippets. It works well.
http://jsfiddle.net/zYD2c/1/

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on May 12, 2014, 10:14:41 AM
Effectively your code is OK.

I have to verify my HTML declaration , maybe, there is a problem in this part of code.
I 'll give you some information about .
Thanks

Title: Re: Expand event doesn't fire every time
Post by: zcsky027 on August 01, 2014, 02:58:48 AM
I also meet this question.when I put a tree in a window,onexpand event doesn't fire when first click.But when I put the tree in a html directly ,it works well. so I think maybe there are some bugs in the tree.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 05, 2014, 11:25:26 AM
I have always the same problem with onExpand in a tree.
It takes 3 clisk to have the call of the method.

The html code is:
Code:
    <div id="cc" class="easyui-layout">
      <div id="west" data-options="region:'west',title:'Régates',split:true">
	   <ul id="treev" class="easyui-tree" data-options="animate:true,checkbox:true">
           </ul>
      </div>
     <div id="center" data-options="region:'center',title:'Carte'"></div>
  
     <div data-options="region:'south',title:'Log'">
     	<div id="sud" class="easyui-layout" data-options="fit:true">
     		<div id="log" data-options="region:'center',border:false"></div>	
     		<div id="status" data-options="region:'south'">
                    <table class="statusTable">
                        <tr>
                            <td><div id="mode">Mode:</div></td>
                            <td><div id="regate">Régate:</div></td>
                            <td>Dernière mesure:</td>
                            <td></td>
                            <td>Heure:</td>
                        </tr>
                    </table>
		</div>
	</div> 		
     </div>
    </div>

maybe , the problem comes from there ?

Look at the http://jsfiddle.net/n28905u1/9/
To add data2 to the tree (onExpand method), you have to click 3 times on the first node !

Title: Re: Expand event doesn't fire every time
Post by: stworthy on September 05, 2014, 04:31:53 PM
Notice that your node is defined as:

[{"id":1,"text":"Régate démo 1","attributes":{"info":"Régate d'hiver dans la baie d'Hyères\n du 2014-01-01 au 2014-01-15\n Organisé par:Hyères Plaisance Organisation","table":"phpboost_regate","idDb":"2"},"state":"closed"}]

The state is 'closed' but no children nodes exist. This means that if try to expand the node, the tree will retrieve children nodes from remote server. Because the 'url' property is not assigned, so the retrieving action is not successful, the 'onExpand' event does not fire.

To solve this issue, please try to use the 'onBeforeExpand' event instead of using 'onExpand' event.

http://jsfiddle.net/n28905u1/10/

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 06, 2014, 11:23:08 AM
OK, I well understood the mecanism with your explanation. Thanks very much.

Effectively, the children is created with a personnal ajax call, and not the url , because I don't arrive to generate a good json code in PHP, so I must transmit a string, modifiy in javascript start and finish character ( [] instead {} ) and then convert into json object before to append to the tree as a children of the node expand previously.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 07, 2014, 05:23:38 AM
I tried the 'onBeforeExpand' event , but there is an other problem about the assyncrhonous answer between when I click to expand and when the answer arrive with data. So nothing appears in the tree due to the delay !

I decided to explore the way of the URL included in the create tree instead of methods based on intercepting the behaviour of the tree.

The URL method sends "id' of the node that you want to expand. When I saw this example http://www.jeasyui.com/tutorial/tree/tree2_demo.html
the data are embedded in a database with all id and parentid defined. It's a plate structure.
I have an relational database storing  my value that I want to retreive for the treeview.
So a 'regata' contains 'groups' wich contains themselves 'contacts' with contains themselves 'pointGPS'. It's a hierarchical data that I want to put in the tree with the URL mecanism. The structure is not planned as the example and when I retreive an 'id' from the userclick, I have no way to find with my database if I 'm at the first level (regata), second level (groups), third level (contact) or fourth level (pointGPS) !

Have you an idea to deal with this situation ?

Maybe must I use the scheme described here http://www.jeasyui.com/tutorial/tree/treegrid5.php.
It was just à little the first method I have to implement by without success.

Thanks for your help, because I've passed many hours on this problem , and I'm sceptical to arrive to find a solution.

Title: Re: Expand event doesn't fire every time
Post by: stworthy on September 07, 2014, 07:52:28 AM
The tree has the built-in asynchronous loading feature. You don't need to implement it by yourself. When expanding a 'closed' node, it will try to retrieve its children nodes from remote server. The id value of expanding node will be sent to remote server. In fact the node id can be any string value. You always can give it the value although it does not exist in your database.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 07, 2014, 08:33:20 AM
Do I understand that I can use level1-1, level1-2 for example for the two first nodes of the first level, then level2-1, level2-2,... for the nodes of the secondlevel, exctera,.... ? I thought that id can only be a number.

If yes, it would be easyer for me to retreive the good table where are stored the data of the tree.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 07, 2014, 11:27:29 AM
Following your last remarks, I decided du test URL Method, but as my PHP code generates not directly Jsoncode, I decide to add the loadFilter Method to convert data return by PHP code to modify it as a correct json format.

But my loadFilter is never called (beakpoint inside with firebug)

Here is the javascript code. I call the 'creeArbre()' method to create the tree
Code:
function convert(nodes)
{
    var long=nodes.length;
    var nodes1='['+nodes.substring(1,long-1)+']'; // on fabrique une chaine au format json
    var nodesJson= J.parseJSON(nodes1);// on convertit en objet json (tableau de valeurs)
    return nodesJson;
}


function creeArbre(mode)
{
J('#treev').tree({ 
            url: '{PATH_TO_ROOT}/regate/?url=/ajax/tree', // L'url vers laquelle la requete sera envoyee
            method:'get',
            queryParams: {mode: mode}, // Les donnees que l'on souhaite envoyer au serveur au format JSON
            loadFilter:function(nodes){
                return convert(nodes);
            }
        }); 
}

What is wrong ? Thank you

Title: Re: Expand event doesn't fire every time
Post by: stworthy on September 07, 2014, 06:19:37 PM
Please read this documentation carefully http://www.jeasyui.com/documentation/tree.php.
The 'loadFilter' function must return the standard tree data format. Returning correct json data in your php server may be more easier and more efficiency.

Title: Re: Expand event doesn't fire every time
Post by: forum6691 on September 08, 2014, 10:12:34 AM
I have not the control on the return method of my php code, because I use API framework function.

For example, it returns to me this data
Code:
{{"id":101,"text":"Groupe voiliers classe C","attributes":{"info":"Voiliers de classe C\n Sponsors: Sponsor classe C, , ","table":"phpboost_regate_groupe","idDb":"2"},"state":"closed"},{"id":102,"text":"Groupe voiliers classe D","attributes":{"info":"Voiliers de classe D\n Sponsors: Sponsor classe D, , ","table":"phpboost_regate_groupe","idDb":"2"},"state":"closed"}};

And I must transform in the javascript code in
Code:
[{"id":101,"text":"Groupe voiliers classe C","attributes":{"info":"Voiliers de classe C\n Sponsors: Sponsor classe C, , ","table":"phpboost_regate_groupe","idDb":"2"},"state":"closed"},{"id":102,"text":"Groupe voiliers classe D","attributes":{"info":"Voiliers de classe D\n Sponsors: Sponsor classe D, , ","table":"phpboost_regate_groupe","idDb":"2"},"state":"closed"}];

I have test it with my first method and The data appears in the tree after 3 selections of the expand icon. The problem isn't in this json code but in 'loadFilter' which is never called.

Maybe a supplementary parameters to put ?


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines