KendoUI 表 + AngularJS [英] KendoUI table + AngularJS

问题描述

我正在尝试实现一个使用 AngularJS 完成数据绑定的通用表格小部件(使用 KendoUI).表格小部件在 HTML 文件中看起来像这样(在这里小提琴:http://jsfiddle.net/mihaichiritescu/ULN36/35/):

<网格视图><div data-ng-repeat="man in people"><gridviewcolumn datasource="name" man="man"></gridviewcolumn><gridviewcolumn datasource="age" man="man"></gridviewcolumn>
</gridview>

基本上，表格会有一个 ng-repeat，它会在对象列表中重复，对于每个对象，使用gridviewcolumn"，我会在每一行下添加单元格.这样，我试图复制 KendoUI 表的结构，它是这样的:

 
<div class="k-grid-header"></div><div class="k-grid-content"><表格><colgroup></colgroup><tr><td></td><td></td></tr></tbody>
<div class="k-pager-wrap k-grid-pager"></div><div>

因此，使用 ng-repeat，对于每个对象，我将动态添加一个新行，对于每一列，我将在最后添加的行上添加一个新单元格.不幸的是，我无法以正确复制 KendoUI 网格视图的内部结构的方式操作 ng-repeat 指令.我最终得到一个如下所示的内部表结构:

 
<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 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 class="k-grid-header"></div><div class="k-grid-content"><表格><colgroup></colgroup><tr><td></td><td></td></tr></tbody>

<div class="k-pager-wrap k-grid-pager"></div><div>

我想以某种方式将 ng-repeat 指令的内容放在表格的主体中，而不是在它上面.有谁知道如何做到这一点?
我可以使用 jquery 将内容放入单元格中，但我仍然必须从表格主体上方删除/隐藏 ng-repeat 指令及其内容，如果没有一些丑陋的黑客，我不知道该怎么做.
另外，我不一定使用 KendoUI gridview，但它看起来比其他人更好看，并且它可能具有与其他表格小部件相似的内部结构，因此我也会遇到其他小部件的相同问题.
你们对如何使用 AngularJS 实现通用表有一些想法/建议吗?我确实搜索了一些用 AngularJS 完成的表格，但我没有找到具有良好功能和外观的东西.

解决方案

我已经创建了两个小提琴，它们将演示如何完成您想要实现的目标.第一个小提琴使用( http://jsfiddle.net/ganarajpr/FUv9e/2/ )kendoui的网格……所以它的风格和展示是完整的.唯一需要注意的是，如果模型发生变化，它不会更新.这是因为 kendoui 首先获取数据，然后根据一开始提供的模型生成所有 UI 元素.

另一种方法是使用 Kendo 的 UI (css) 并省略网格生成代码.

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

我相信这更接近您要寻找的内容.它还演示了 ng-repeat 在表格中的使用.

希望这会有所帮助.

I am trying to implement a generic table widget (using KendoUI) having the data binding done with AngularJS. The table widget would look something like this in the HTML file (fiddle here: 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> 

Basically, the table would have an ng-repeat that would repeat through the list of objects, and for each object, using the 'gridviewcolumn', I would add cells under each row. This way, I am trying to replicate the structure of the KendoUI table, which is something like this:

​​<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, using the ng-repeat, for each object I will dynamically add a new row, and for each column I will add a new cell on the last added row. Unfortunately, I am not able to manipulate the ng-repeat directive in such a way that I will properly replicate the internal structure of the KendoUI grid view. I am ending up with an internal table structure looking like this:

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

I would like to somehow place the content of the ng-repeat directive in the body of the table, not above it. Does anyone know how to accomplish this?
I could use jquery to place the content into the cells, but I would still have to remove/hide the ng-repeat directives and their content from above the table body, which I do not know how to do without some ugly hacks.
Also, I am not necessarily bound to KendoUI gridview, but it seems better looking than others, and it probably has similar internal structure to other table widgets, so I would encounter the same issue with other widgets too.
Do you guys have some ideas/advice on how to implement a generic table using AngularJS? I did search for some tables done with AngularJS, but I did not find something that would have good functionality and looks.

解决方案

I have created two fiddles which would demonstrate how what you are trying to achieve could be done. The first fiddle uses ( http://jsfiddle.net/ganarajpr/FUv9e/2/ ) kendoui's grid ... So its style and display is complete. The only caveat being it wont update if the model changes. This is because kendoui takes the data first and then produces all the UI elements based on the model provided at the beginning.

The alternate is to use Kendo's UI (css) and leave out the grid producing code.

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

This I believe is closer to what you were looking for. It also demonstrates the use of ng-repeat in a table.

Hope this helps.

这篇关于KendoUI 表 + AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！