javascript - 在 Angular js 中可编辑的显示较长网格数据的最佳选择

Question

我是 Angular JS 的初学者。我想显示一些巨大的列，其中包含一些可编辑和不可编辑部分的数据。这意味着某些列是可编辑的，如 excel 编辑。它还支持排序和过滤功能。请引用下面的截图。



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

我需要 Angular 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>

在 Angular JS 中实现上述网格的最佳方法是什么。我可以使用普通 table 或任何其他方式吗？

任何建议，将不胜感激。

Answer 1

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

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

希望这可以帮助!

编辑:ng-grid 可以很好地解决这个问题，并且具有开箱即用的所有功能:条件单元格编辑、排序和过滤。