EasyUI Forum
May 18, 2024, 12:13:27 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: Expand event doesn't fire every time  (Read 40080 times)
forum6691
Newbie
*
Posts: 39


View Profile
« 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 ?
« Last Edit: May 09, 2014, 08:56:11 PM by forum6691 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: May 09, 2014, 08:50:02 PM »

Please refer to this example http://jsfiddle.net/zYD2c/. It works fine.
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #2 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);
}
})
            }   
        })

Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: May 09, 2014, 09:13:44 PM »

Please remove your statement requeteNoeud(node); and see if it works well.
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #4 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 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/
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #6 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
Logged
zcsky027
Newbie
*
Posts: 1


View Profile
« Reply #7 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.
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #8 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 !
« Last Edit: September 05, 2014, 11:57:35 AM by forum6691 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #9 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/
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #10 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.
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #11 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #12 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.
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #13 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.
« Last Edit: September 07, 2014, 08:46:45 AM by forum6691 » Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #14 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
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!