2016-02-22 13 views
5

Ich möchte eine erweiterbare Tabelle mithilfe von JQuery erstellen: http://ludo.cubicphuse.nl/jquery-treetable/#examples.Erstellen Sie eine dynamische erweiterbare Tabelle mit angularjs und jquery

Das Problem ist, dass es einen Konflikt zwischen angularjs und jquery gibt. Dies ist meine HTML-Datei:

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

den jquery Teil zu verwenden benutze ich diesen Tag:

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

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

ich mit nur einer Reihe am Anfang eine einfache Tabelle haben möchte. In dieser Zeile kann der Benutzer auf eine Schaltfläche klicken und dann eine neue Zeile übergeben, die eine erweiterbare Zeile von der ersten sein wird. Nur um zu sehen, ob es möglich ist, habe ich versucht, dies zu tun, aber ich habe verstanden, dass ich die Initialisierungsfunktion zurückrufen musste, nachdem ich die erste erweiterbare Zeile eingereicht hatte. Und es funktioniert, aber wenn ich die Operation wiederholen möchte, habe ich einige Konflikte.

Schauen Sie sich das Bild:

conflict when I redo the operation

Also, wenn jemand eine Idee, dies zu beheben hat, werde ich froh sein, es zu hören. Danke

+0

Ich verstehe das Problem nicht. Können Sie nur ein Snippet oder ein Bin erstellen? Es wird uns viel einfacher sein, Ihnen auf diese Weise zu helfen. –

+0

Danke für Ihre Hilfe, aber @beaver hat mein Problem gelöst. Ich wollte nur eine dynamische Tabelle erstellen, aber ich wusste nicht, dass ich nur angularjs verwenden konnte –

Antwort

1
+0

Danke ich suchte nach so etwas für Stunden –

+0

So wählte ich diese Lösung: http://thienhung1989.github.io/angular-tree -dnd/demo/#/basic und das ist sehr nützlich, aber ich finde nicht, wie man Daten neu lädt, also wenn Sie irgendeine Idee haben, wird es hilfreich sein. Danke –

+0

Daten neu laden? Meinst du die UI nach der Datenänderung aktualisieren? Bitte teilen Sie Ihren Code in Bezug auf Datenaktualisierung, Baumtabelle Sourcing und Code nützlich, um Ihr Problem zu reproduzieren – beaver

Verwandte Themen