4

I have a requirement where I use jQuery Treetable in Lightning and I have implemented the same as below code. I created a Lightning Tab from this component and used in Lightning Experience.

Component:

<aura:component implements="force:appHostable">
    <ltng:require scripts="/resource/treeTable/treeTableJS.js" afterScriptsLoaded="{!c.loadScripts}"/>
    <aura:attribute name="temp" type="String" default="none" />
    <aura:attribute name="content" type="String[]" default="item1,item2,item3,item4" />
    <table id="table">
        <tbody>
            <tr data-tt-id="parent">
                <td><ui:button label="Click" press="{!c.selectClick}" /></td>
                <td>Content</td>
            </tr>
            <aura:iteration items="{!v.content}" var="item" indexVar="index">
                <tr data-tt-id="{!'child'+index}" data-tt-parent-id="parent">
                    <td></td>
                    <td>{!item}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

Controller:

({
    loadScripts : function(component, event, helper) {
        $("#table").treetable({
                expandable: true
            }, {
                force: true
            }, {
                initialState: "collapsed"
            });
    },

    selectClick : function(component, event, helper) {
        if(component.get("v.temp")==="none"){
            component.set("v.temp","plus");
            $("#table").treetable("expandNode", "parent");
        } else{
            component.set("v.temp","none");
            $("#table").treetable("collapseNode", "parent"); 
        }
    },
})

Now about the issue, when I use this in Lightning tab first time it works (meaning straight forward scenario), but now from this page I navigate to any standard record page (be it Accounts record page) or even Home page and come back to this lightning tab, it does not work. We have to refresh the page to make it work again. Any resolve so that we don't need to refresh the page? Please help. Note: Lightning Locker service is disabled.

4

I too faced the same issue here.What's happening here is jquery selector fails to retrieve the DOM element on subsequent load(component definitions are loaded from cache) not sure why, but the same would work in initial load.

Solution here is to use aura:id in the <table/> and get that DOM element using component.find().getElement().

NOTE: Don't use set 'table,select' kind of values to HTML Tag's attribute id,class... In your case id="table", instead try naming them to be context specific.

For example: If this an tree view for Account, then you could name it aura:id="account-tree" or just aura:id="tree-view".

Component:

<aura:component>
    <table aura:id="tree-view">
    ...
    </table>
</aura:component>

Controller.js

({
    loadScripts : function(component, event, helper) {
        $(component.find("tree-view").getElement()).treetable({
                expandable: true
            }, {
                force: true
            }, {
                initialState: "collapsed"
            });
    },
})
  • Thank you Praveen, this solution worked for me. Thank you! :) – Pradeep Chary Aug 13 '16 at 19:47
  • Glad I could help :-) – Praveen Aug 13 '16 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.