create a dynamic expandable table by using angularjs and jquery

Question

I'd like to create an expandable table by using JQuery: http://ludo.cubicphuse.nl/jquery-treetable/#examples.

The issue is that there is a conflict between angularjs and jquery. This is my html file:

<table>
   <tbody ng-repeat="row in construct.matrix.rows">
      <tr data-tt-id="row.name">
         <td>{{row.name}}</td>
         <td>
            <button ng-click="newField($index)">Add a Field</button>
            <form ng-submit="addField($index, fieldName, row)" ng-if="choose($index)">
               <input type="text" ng-model="fieldName" name="text" placeholder="New Field" />
            </form>
         </td>
      </tr>
   </tbody>
</table>

To use the jquery part i use this tag :

$(document).ready(function() {
   initialize();
});

function initialize() {
   $("table").agikiTreeTable({
      persist : false,
      persistStoreName : "files"
   });
}

I'd like to have a simple table at the beginning with only one row. On this row, the user can click on a button and then submit a new row which will be an expandable row from the first one. Just to see if it was possible, I tried to do so but I understood that I had to recall the initialize function after submitting the first expandable row. And it works, but if I want to do the operation again I have some conflicts.

Look at this picture:

So if anyone has an idea to fix this, I will be glad to hear it. Thanks

I don't understand the problem. Can you just create a snippet or bin? it will much easier for us to help you that way. — Mosh Feu
– Mosh Feu, Commented Feb 22, 2016 at 6:46
Thanks for your help but @beaver solved my problem. I just wanted to create a dynamic table but i didn't know that i could use only angularjs — Kevin Vincent
– Kevin Vincent, Commented Feb 22, 2016 at 13:53

beaver · Accepted Answer · 2016-02-22 07:04:28Z

1

Why not using Angular libraries and avoid jQuery based components?

Here are some alternatives:

answered Feb 22, 2016 at 7:04

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kevin Vincent Over a year ago

Thanks i looked for something like this for hours

Kevin Vincent Over a year ago

So i chose this solution : thienhung1989.github.io/angular-tree-dnd/demo/#/basic and this is very useful but i don't find how to reload data so if you have any idea it will be helpful. Thanks

beaver Over a year ago

Reload data? Do you mean update the UI after data change? Please share your code relating data updating, tree table sourcing and code useful to reproduce your problem

Kevin Vincent Over a year ago

Yes this is what i meant. But it's ok i found how to do it. Thanks

Nico Westerdale · Accepted Answer · 2017-09-04 14:43:46Z

0

Try the ng-table library, it has grouping functionality built in:

http://ng-table.com/#/grouping/demo-grouping-basic

answered Sep 4, 2017 at 14:43

Nico Westerdale

2,1961 gold badge24 silver badges31 bronze badges

Collectives™ on Stack Overflow

create a dynamic expandable table by using angularjs and jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related