KendoUI Tisch + AngularJS

Ich versuche zu implementieren ist eine generische Tabelle-widget (mit KendoUI) das data binding erfolgt mit AngularJS.
Die Tabelle-widget Aussehen würde, so etwas wie dies in der HTML-Datei (fiddle hier: http://jsfiddle.net/mihaichiritescu/ULN36/35/):

<div ng:controller="Tester">
    <gridview>
        <div data-ng-repeat="man in people">
            <gridviewcolumn datasource="name" man="man"></gridviewcolumn>
            <gridviewcolumn datasource="age" man="man"></gridviewcolumn>               
        </div>            
    </gridview>
</div> 

Grundsätzlich, die Tabelle hätte ein ng-repeat, die wiederholt durch die Liste der Objekte und für jedes Objekt, das 'gridviewcolumn', möchte ich hinzufügen, Zellen unter jeder Zeile.
So, ich werde versuchen, zu replizieren, die Struktur der KendoUI-Tabelle, die etwa so aussieht:

​​<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

So, mit der ng-repeat, für jedes Objekt I wird Sie dynamisch hinzufügen eine neue Zeile und für jede Spalte, die ich hinzufügen wird eine neue Zelle auf der letzten Zeile Hinzugefügt. Leider bin ich nicht in der Lage zu manipulieren die ng-repeat-Direktive in einer Weise, dass ich richtig replizieren, die interne Struktur der KendoUI grid-Ansicht. Ich bin am Ende mit einer internen Tabelle Struktur so Aussehen:

​<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name1</div>
    <div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name2</div>
    <div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Ich würde gerne irgendwie den Inhalt von der ng-repeat-Direktive in den Körper der Tabelle, die nicht über es. Weiß jemand, wie dies zu erreichen?

Konnte ich jquery verwenden, um den Inhalt in die Zellen, aber das würde ich noch entfernen/ausblenden der ng-repeat-Richtlinien und deren Inhalte, die oberhalb der Tabelle Körper, dem ich nicht weiß, wie zu tun, ohne einige hässliche hacks.

Auch bin ich nicht unbedingt gebunden, KendoUI gridview, aber es scheint besser Aussehen als andere, und es hat wahrscheinlich ähnliche interne Struktur auf andere Tabelle-widgets, also ich würde das gleiche Problem begegnen, mit anderen widgets auch.

Habt Ihr ein paar Ideen/Ratschläge, wie man implementieren Sie eine generische Tabelle mit AngularJS? Ich Suche für einige Tabellen erfolgt mit AngularJS, aber ich wollte nicht etwas finden, das wäre eine gute Funktionalität und Optik.

Schreibe einen Kommentar