2012-07-30 17 views
9

AngularJS ile yapılan veri bağlamasına sahip bir genel tablo widget'ı (KendoUI kullanarak) uygulamaya çalışıyorum. tablo Widget (burada keman: http://jsfiddle.net/mihaichiritescu/ULN36/35/): HTML dosyasında böyle bir şey olmazdıKendoUI tablosu + AngularJS

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

Temelde, masa nesneler listesi üzerinden tekrar edecek bir ng tekrarı var ve her nesne için olur 'gridviewcolumn'u kullanarak, her satırın altına hücre eklerim. için, ng tekrarı kullanılarak

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

Yani her nesne için dinamik yeni bir satır ekleyecektir ve: Bu şekilde, böyle bir şeydir KendoUI ürünü tablonun yapısını, çoğaltmak çalışıyorum her sütun son eklenen satırda yeni bir hücre ekleyeceğim. Ne yazık ki, ng-repeat yönergesini KendoUI grid görünümünün iç yapısını düzgün bir şekilde kopyalayacağım şekilde manipüle edemiyorum. Böyle seyir bir iç tablo yapısı ile biten ediyorum:

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

ben bir şekilde değil üstünde, tablonun vücutta ng-repeat direktifin içeriğini yerleştirmek istiyoruz. Bunu nasıl başaracağını bilen var mı?
İçeriği hücrelere yerleştirmek için jquery kullanabilirim, ancak yinede yinelenen yönergeleri ve içeriklerini içerikten çıkarmalıyım/gizlerim. Çirkin kesimler olmadan nasıl yapılacağını bilmiyorum.
Ayrıca, KendoUI gridview'a bağlı değilim, ancak diğerlerine göre daha iyi görünüyor ve muhtemelen diğer tablo widget'larına benzer iç yapıya sahip, bu yüzden diğer widget'larla da aynı sorunla karşılaşacağım.
AngularJS kullanarak jenerik bir tablonun nasıl uygulanacağı konusunda fikirleriniz/tavsiyeleriniz var mı? AngularJS ile yapılan bazı tablolar için arama yaptım, ama iyi işlevsellik ve görünüyor olurdu bir şey bulamadı.

cevap

10

Neyi başarmaya çalıştığınızı gösterecek iki bilmece oluşturdum. İlk keman, (http://jsfiddle.net/ganarajpr/FUv9e/2/) kendoui'nin ızgarasını kullanıyor ... Bu yüzden stili ve ekranı tamamlandı. Model değişirse güncellenmeyecek tek uyarı. Bunun nedeni kendoui'nin önce verileri alıp başlangıçta sağlanan modele göre tüm UI öğelerini üretmesidir.

Alternatif, Kendo'nun UI'sini (css) kullanmak ve ızgara üreten koddan çıkmaktır.

http://jsfiddle.net/ganarajpr/6kdvC/1/

inanıyorum Bu aradığını yakındır. Ayrıca bir tabloda ng-tekrar kullanımını gösterir.

Bu yardımcı olur umarım.

+0

İlk keman işleri, ikincisi işe yaramaz (en azından benim için en azından kromda değil). +50 ganaraj. --dan –

+0

@DanDoyon İkinci kemanda ne görüyorsunuz? 2 giriş elemanlı bir tablo (kendo ui ile stillenmiş) üretmiyor mu? – ganaraj

+0

Düzgün stilleri, ancak sırayla sütunları sürükleme işlevselliği çalışmıyor. –

-2

html5 içinde contenteditable kullanarak kolayca size yardımcı olacaktır.