KendoUI 表 + AngularJS

Posted 2023-03-05

【中文标题】KendoUI 表 + AngularJS

【英文标题】：KendoUI table + AngularJS

【发布时间】：2012-07-28 08:11:36

【问题描述】：

我正在尝试实现一个通用表格小部件（使用 KendoUI），并使用 AngularJS 完成数据绑定。 表格小部件在 html 文件中看起来像这样（这里小提琴：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> 

基本上，表格会有一个 ng-repeat 重复遍历对象列表，对于每个对象，使用“gridviewcolumn”，我会在每一行下添加单元格。 这样，我试图复制 KendoUI 表的结构，如下所示：

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

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

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

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

【参考方案1】：

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

替代方法是使用 Kendo 的 UI (css) 并省略生成网格的代码。

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

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

希望这会有所帮助。

【讨论】：

第一个小提琴有效，第二个无效（至少对我来说没有，至少在 chrome 中没有）。 +50 加纳拉吉。 --dan

@DanDoyon 你在第二个小提琴中看到了什么？它不是生成带有 2 个输入元素的表格（使用 kendo ui 样式）吗？

它的样式正确，但拖动列排序的功能不起作用。

哦，那行不通..事实上我没有做那件..第二个小提琴是可以构建剑道 UI 全部功能的基础。

【参考方案2】：

在 html5 中使用 contenteditable 可以轻松帮到您。