在数据table中添加aria-label到tableheader

Question

let checkboxColumn = `<div class="checkbox c-checkbox" >
                          <label> <input type="checkbox"
                              ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
                               /> <span
                              class="fa fa-check"></span>
                          </label>
                        </div>`;

   self.dtColumns = [
      DTColumnBuilder.newColumn("select").withTitle(checkboxColumn).notSortable(),
      DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
      DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
      ]

我正在创建一个数据 table，其中 header 中有一个复选框，单击它会 select 该行的所有复选框。问题是 checkboxcolumn 也在 aria-label 中呈现。下面的代码片段将告诉您正在渲染的内容：

<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;" aria-label="
   <input type=&quot;checkbox&quot;
   ng-model=&quot;self.headerCheckBox&quot; ng-change=&quot;self.headerSelected()&quot;
   /> <span
   class=&quot;fa fa-check&quot;>
   ">
   <div class="checkbox c-checkbox">
      <label> <input type="checkbox" ng-model="self.headerCheckBox" ng-change="self.headerSelected()"> <span class="fa fa-check"></span>
      </label>
   </div>
</th>

可以看到header和aria-label值的内容是一样的。如何为 aria-label 分配不同的值？帮助将不胜感激。

Answer 1

因此无法为 aria-label 分配不同的值。但是您可以使用以下代码将复选框添加到 table header。在这里，我们将在 table 加载后将复选框添加到 header。

首先我们定义了一个空的tableheader：

self.dtColumns = [
  DTColumnBuilder.newColumn("select").withTitle("").notSortable().withClass('select-policy-header'),
  DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
  DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
]

现在我们将复选框附加到空 header:

    var checkbox_add = `<div class="checkbox c-checkbox" >
          <label> <input type="checkbox"
              ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
              /> <span
              class="fa fa-check"></span>
          </label>
        </div>`;

$timeout(
      function () {
            let element = document.getElementsByClassName("select-policy-header")[0];
            angular.element(element).append($compile(checkbox_add)($scope));
          }, 1000)

这应该适合你。

在数据table中添加aria-label到tableheader

Add aria-label to table header in datatable

html

javascript

datatable

jquery

angularjs