Question

我是角度JS的初学者。我想展示一些巨大的列，其中包含一些可编辑和不可编辑的数据。这意味着某些列可以编辑，如excel编辑。它还支持排序和过滤功能。请参阅下面的屏幕截图。

红色突出显示不可编辑。突出显示的蓝色是可编辑的。

我需要在角度JS中建议显示以上网格类型的外观是否可以使用ng-grid或普通表。目前我使用普通表设计了静态数据。

<table id="dmgt" class="table table-bordered validations-all">
    <thead>
      <tr>
        <th class="bfcGrey2">Rx ID
        </th>
        <th class="bfcGrey2">ICN</th>
        <th class="bfcGrey2">HCPCS code</th>
        <th class="bfcGrey2">Service date</th>
        <th class="bfcGrey2">Paid date</th>
        <th class="bfcGrey2">Provider name</th>
        <th class="bfcGrey2 provider">Provider ID</th>
        <th class="bfcGrey2 ndc11">NDC11</th>    
        <th class="bfcGrey2">Product Name</th>
        <th class="bfcGrey2">Form</th>
        <th class="bfcGrey2">Strength(mg)</th>
        <th class="bfcGrey2">Units</th>
        <th class="bfcGrey2">Days supply</th>
        <th class="bfcBlue1">Amount reimbursed</th>
        <th class="bfcBlue1">3rd party liability</th>
        <th class="bfcBlue1">Copay</th>
        <th class="bfcBlue1">Patient liability</th>
        <th class="bfcBlue2">URA</th>
        <th class="bfcBlue2">Rebate per claim</th>
        <th class="bfcgrey3">Exceeds threshold?</th>
        <th class="bfcgreen"><img src="../images/quantity_white.png"></th>
        <th class="bfcOrange">340B</th>
        <th class="bfcYellow"><img src="../images/dups_white.png"></th>
        <th class="bfcBlue3">Follow up,Dispute,or Ignore</th>
        <th class="bfcBlue3">Follow-up reminder</th>
        <th class="bfcBlue3">Follow-up status</th>
        <th class="bfcBlue3">Adjust units + or -</th>
        <th class="bfcBlue3">Savings</th>
        <th class="bfcBlue3">Internal Note</th>
        <th class="bfcBlue3">Rationale</th>
      </tr>
      <tr>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div>
        </th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>    
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcGrey2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue1"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue1"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue1"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue1"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue2"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcgrey3"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcgreen"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcOrange"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcYellow"><div class="fLeft"><img src="../images/sort_random_gray.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_gray.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
        <th class="bfcBlue3"><div class="fLeft"><img src="../images/sort_random_white.png"></div>
                        <div class="fRight filter-flag" data-toggle="popover"><img src="../images/filter_white.png"></div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>074909</td>
        <td>12345</td>
        <td>J1234</td>
        <td>10/31/15</td>
        <td>10/31/15</td>
        <td>Harbor UCLA medical center</td>
        <td>1427259399</td>
        <td>12345-04-0134</td>
        <td>Iconomian</td>
        <td>Tab</td>
        <td>30</td>
        <td>30</td>
        <td>30</td>
        <td>5995.30</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>30</td>
        <td>Y</td>
        <td></td>
        <td class="settings-B">Y</td>
        <td></td>
        <td class="editable-cell"><input type="text" value="F"/></td>
         <td class="editable-cell validation-datepicker"><input type="text" value="02/05/2016"/></td>
        <td class="editable-cell"><input type="text" value="Open"/></td>
        <td class="editable-cell"><input type="text" value="-30"/></td>
        <td class="savings"> 30</td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
      </tr>
  <tr>
        <td>074909</td>
        <td>12345</td>
        <td>J1234</td>
        <td>10/31/15</td>
        <td>10/31/15</td>
        <td>Harbor UCLA medical center</td>
        <td>1427259399</td>
        <td>12345-04-0134</td>
        <td>Iconomian</td>
        <td>Tab</td>
        <td>30</td>
        <td>30</td>
        <td>30</td>
        <td>71.17</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>60</td>
        <td>Y</td>
        <td class="settings-q">Y</td>
        <td class="settings-B">Y</td>
        <td class="settings-d">Y</td>
        <td class="editable-cell"><input type="text" value="F"/></td>
         <td class="editable-cell validation-datepicker"><input type="text" value="02/05/2016"/></td>
        <td class="editable-cell"><input type="text" value="Open"/></td>
        <td class="editable-cell"><input type="text" value="-30"/></td>
        <td class="savings"> 30</td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
      </tr>
      <tr>
        <td>074909</td>
        <td>12345</td>
        <td>J1234</td>
        <td>10/31/15</td>
        <td>10/31/15</td>
        <td>Harbor UCLA medical center</td>
        <td>1427259399</td>
        <td class="NDC11">12345-04-0134</td>
        <td>Iconomian</td>
        <td>Tab</td>
        <td>30</td>
        <td>20</td>
        <td>30</td>
        <td>71.17</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>60</td>
        <td></td>
        <td></td>
        <td class="settings-B">Y</td>
        <td>Y</td>
        <td class="editable-cell"><input type="text" value="F"/></td>
        <td class="editable-cell validation-datepicker"><input type="text" value="03/05/2016"/></td>
        <td class="editable-cell"><input type="text" value="Open"/></td>
        <td class="editable-cell"><input type="text" value="-30"/></td>
        <td class="savings"> 30</td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
      </tr>

      <tr>
        <td>074909</td>
        <td>12345</td>
        <td>J1234</td>
        <td>10/31/15</td>
        <td>10/31/15</td>
        <td>Sierra view district hospital</td>
        <td>1427259399</td>
        <td>12345-04-0134</td>
        <td>Iconomian</td>
        <td>Tab</td>
        <td>30</td>
        <td>20</td>
        <td>30</td>
        <td>33.09</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>60</td>
        <td>Y</td>
        <td >Y</td>
        <td >Y</td>
        <td class="settings-d">Y</td>
        <td class="editable-cell"><input type="text" value="F"/></td>
        <td class="editable-cell validation-datepicker"><input type="text" value="01/05/2016"/></td>
        <td class="editable-cell"><input type="text" value="Open"/></td>
        <td class="editable-cell"><input type="text" value="-30"/></td>
        <td class="savings"> 30</td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>
        <td class="editable-cell"><textarea class="form-control noresize" rows="5">Sent mail on 8/28 asking...</textarea></td>


      </tr>

    </tbody>
  </table>

在角度JS中实现上述网格的最佳方法是什么。我可以使用普通桌子还是其他任何方式？

任何建议将不胜感激。

Answer 1

相当简单：您需要做的就是使用动态数据（您可能已经知道）构建表格，然后使用两种不同类型的单元格 - 可编辑和放大不可编辑。

在可编辑的单元格中，您将在文本字段中包含内容，以便用户可以更改它，Angular将自动为您更新模型。

希望这有帮助！

编辑：ng-grid适用于此并具有开箱即用的所有功能：条件单元格编辑，排序和过滤。

Answer 2

过去我做过这么多的痛苦，但是Angular的早期资源非常少。

我建议使用类似http://handsontable.github.io/ngHandsontable/的内容。根据您的描述，它确实如此。我个人没有ngHandsontable的经验，但我知道纯JS版本非常棒https://handsontable.com/examples.html?headers。

使用角度js可编辑显示更长网格数据的最佳选项

2 个答案: