Лучший вариант, чтобы показать более длинные данные сетки с возможностью редактирования в угловых JS

0

Я начинаю с угловатым JS. Я хочу показать некоторые огромные столбцы с некоторыми данными как редактируемыми, так и нередактируемыми разделами. это означает, что некоторые из столбцов редактируются как редактирование excel. Это также функции сортировки и фильтрации поддержки. См. Снимок экрана.

Изображение 174551

красный цвет выделен не редактируемый. синий цвет выделен для редактирования.

Мне нужно предложение в угловом JS, чтобы отобразить вид сетки выше, можно ли использовать ng-сетку или обычную таблицу. в настоящее время я разработал стандартную таблицу со статическими данными.

<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. могу ли я использовать обычную таблицу или любой другой способ?

Мы ценим любые предложения.

Теги:

2 ответа

1
Лучший ответ

Достаточно просто: все, что вам нужно сделать, - это построить таблицу с использованием динамических данных (которые вы, вероятно, уже знали), а затем иметь два разных типа ячеек - редактируемые и нередактируемые.

В редактируемых ячейках вы будете иметь контент в текстовом поле, чтобы пользователь мог его изменить, а Angular автоматически обновит модель.

Надеюсь это поможет!

EDIT: ng-grid работает отлично для этого и имеет все функции из коробки: условное редактирование ячеек, сортировка и фильтрация.

Поделиться
  • 0
    Я уже реализовал только так. я хочу предложение как я могу использовать угловую JS сетку нормальную таблицу
  • 0
    Да, ng-grid - это, вероятно, ваш лучший вариант, так как он обладает большинством необходимых вам функций из коробки, включая возможность определения только некоторых ячеек, которые можно редактировать *, и "похожего на Excel" поведения, которое вы ищете.
1

У меня было так много боли, что делалось в прошлом, но это были ранние дни Angular с очень небольшими ресурсами.

Я бы рекомендовал использовать что-то вроде http://handsontable.github.io/ngHandsontable/. Основываясь на вашем описании, он делает именно это. У меня лично нет опыта ngHandsontable, но я знаю, что чистая версия JS довольно удивительна https://handsontable.com/examples.html?headers.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню