Проблемы со складной строкой таблицы - PullRequest
Новая
       54

Проблемы со складной строкой таблицы

0 голосов
/ 16 марта 2019

Наша команда пытается создать виджет в ServiceNow, который имеет развертываемые / складывающиеся строки. У нас много проблем, чтобы заставить его работать правильно. Ниже приведен наш код: 

<table class="table table-responsive">
  <thead>
    <tr>
      <th></th>
      <th ng-repeat="field in data.fields_array track by $index" ng-click="setOrderBy(field)" tabindex="0">
        <div class="th-title" aria-label="${Sort by } {{data.column_labels[field]}}">{{data.column_labels[field]}}
          <i class="fa" ng-if="field == data.o" ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]" aria-label="${Sorted by } {{data.column_labels[field]}} {{data.d == 'asc' ?  '${Ascending}': '${Descending}' }}"></i>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data.list track by item.sys_id" data-toggle="collapse" href="#{{item.pcs_task_type_sysID}}" aria-expanded="true" aria-controls="collapseOne" role="button">  <!--ng-click="expand(item)" class="clickableTableRow" -->   
      <td>
        <i ng-if="field[$index] == field[0]" ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
      </td>
      <td role="text" aria-label="{{item[field].display_value}}" class="pointer" ng-class="{selected: item.selected}" ng-repeat="field in ::data.fields_array track by $index" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
        {{::item[field].display_value}}
      </td>
      <td>
        <div id="{{item.pcs_task_type_sysID}}" class="collapse">
          <sp-widget widget="item.widget"></sp-widget>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Приведенный выше код выдает следующее (что явно неверно):

enter image description here

Я знаю, что вместо этого разборный элемент div должен находиться в a, однако, когда я перемещаю его в его собственную строку, как показано ниже, новая строка вообще не расширяется. 

<table class="table table-responsive">
      <thead>
        <tr>
          <th></th>
          <th ng-repeat="field in data.fields_array track by $index" ng-click="setOrderBy(field)" tabindex="0">
            <div class="th-title" aria-label="${Sort by } {{data.column_labels[field]}}">{{data.column_labels[field]}}
              <i class="fa" ng-if="field == data.o" ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]" aria-label="${Sorted by } {{data.column_labels[field]}} {{data.d == 'asc' ?  '${Ascending}': '${Descending}' }}"></i>
            </div>
          </th>
        </tr>
      </thead>
      <tbody> <!-- id="{{item.sys_id}}_task_body" class="panel-collapse collapse in dataBlock"-->
        <tr ng-repeat="item in data.list track by item.sys_id" data-toggle="collapse" href="#{{item.pcs_task_type_sysID}}" aria-expanded="true" aria-controls="collapseOne" role="button">  <!--ng-click="expand(item)" class="clickableTableRow" -->   
          <td>
            <i ng-if="field[$index] == field[0]" ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
          </td>
          <td role="text" aria-label="{{item[field].display_value}}" class="pointer" ng-class="{selected: item.selected}" ng-repeat="field in ::data.fields_array track by $index" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
            {{::item[field].display_value}}
          </td>
        </tr>
        <tr>
          <td>
            <div id="{{item.pcs_task_type_sysID}}" class="collapse"><!--ng-if="item.showDescriptor" -->
              <sp-widget widget="item.widget"></sp-widget>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

Чего нам не хватает, чтобы заставить это работать правильно?

1 Ответ

0 голосов
/ 16 марта 2019

Я вижу ng-click="expand(item)" в комментарии за элементом html, но я не вижу его на самом деле в элементе, так что функция никогда не будет вызываться при нажатии.

data-toggle будет недостаточно, чтобы изменить значение item.showDescriptor на true или false (что сейчас выглядит так, будто data-toggle - единственная попытка управлять дисплеем) ... I ' Я также не уверен, что href для элемента tr будет успешным ... 

<tr ng-repeat="item in data.list track by item.sys_id">
<td>
<span ng-click="expand(item)">
<i ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
Click me to expand
</span>
</td>
<td>
<span ng-if="item.showDescriptor">
I should conditionally show
</span>
</td>
</tr>
...