在角度 js 中可编辑的显示较长网格数据的最佳选择答案

【问题标题】：Best option to show longer grid data with editable in angular js在角度 js 中可编辑的显示较长网格数据的最佳选择
【发布时间】：2016-09-30 08:40:35
【问题描述】：

我是 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 中实现上述网格的最佳方法是什么。我可以使用普通表或任何其他方式吗？

任何建议将不胜感激。

【问题讨论】：

标签： javascript jquery css angularjs

【解决方案1】：

过去我在做这件事时非常痛苦，但那是 Angular 的早期阶段，资源很少。

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

【讨论】：

【解决方案2】：

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

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

希望这会有所帮助！

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

【讨论】：

我已经实现了。我想要一些建议，比如我可以使用 Angular js 网格普通表吗
是的，ng-grid 可能是您的最佳选择，因为它具有您开箱即用所需的大部分功能，包括仅定义某些可编辑单元格的能力*和“类似 Excel”您正在寻找的行为。