使用angularjs和jquery创建动态可扩展表

时间:2016-02-22 02:27:15

标签: javascript jquery html angularjs expandable-table

我想使用JQuery创建一个可扩展的表:http://ludo.cubicphuse.nl/jquery-treetable/#examples

问题是angularjs和jquery之间存在冲突。这是我的html文件:

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

要使用jquery部分,请使用此标记:

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

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

我想在开头只有一行的简单表格。在这一行中,用户可以单击一个按钮,然后提交一个新行,该行将是第一行的可扩展行。只是为了看看是否可能,我试图这样做但我明白在提交第一个可扩展行之后我必须回忆起初始化函数。它有效,但如果我想再次进行操作,我会有一些冲突。

看看这张照片:

conflict when I redo the operation

因此,如果有人有想法解决这个问题,我会很高兴听到它。感谢

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

尝试使用ng-table库,它具有内置的分组功能:

http://ng-table.com/#/grouping/demo-grouping-basic