以角度处理表格中的单击事件

问题描述 投票：0回答：1

我有一张桌子，我想单击该行。如果该图标不是文件夹，则该行将突出显示，并选中该行，并且将显示该行的信息。我的项目在asp.net核心项目中使用了angular，但是我没有解决该问题的方法。

[我的尝试：首先，我尝试了Jquery并将其放入索引中，但是它不起作用，然后我将其放入组件html文件中，也无法正常工作。 

<html>
<head>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css" />
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
</head>
<body class="ms-Fabric" dir="ltr">
  <div class="ms-CommandBar" id="canvas">
    <div class="ms-CommandBar-mainArea">
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon ms-fontColor-purpleLight"><i class="ms-Icon ms-Icon--Add"></i></span>
          <span class="ms-CommandButton-label">New</span>
          <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
        </button>
      </div>
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon ms-fontColor-purpleLight"><i class="ms-Icon ms-Icon--Upload"></i></span>
          <span class="ms-CommandButton-label">Upload</span>
          <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
        </button>
      </div>
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon ms-fontColor-purpleLight"><i class="ms-Icon ms-Icon--SyncToPC"></i></span>
          <span class="ms-CommandButton-label">Sync</span>
        </button>
      </div>
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon ms-fontColor-green"><i class="ms-Icon ms-Icon--ExcelLogo"></i></span>
          <span class="ms-CommandButton-label">Export to Excel</span>
        </button>
      </div>
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon ms-fontColor-purpleLight"><i class="ms-Icon ms-Icon--Flow"></i></span>
          <span class="ms-CommandButton-label">Flow</span>
          <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
        </button>
      </div>
      <div class="ms-CommandButton">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span>
        </button>
      </div>
    </div>
  </div>

  <div class="col-9">
    <div class="container">
      <div class="ms-Breadcrumb">
        <ul class="ms-Breadcrumb-list">
          <li class="ms-Breadcrumb-listItem">
            <a href="#" class="ms-Breadcrumb-itemLink">Documents</a>
          </li>
        </ul>
      </div>

      <table class="ms-Table">
        <thead class="ms-Table-head">
          <tr>
            <th><i class="ms-Icon ms-Icon--checkbox"></i></th>
            <th><i class="ms-Icon ms-Icon--Page"></i></th>
            <th>
              Name<i class="ms-Icon ms-Icon--ChevronDown"></i>
            </th>
            <th>Modified<i class="ms-Icon ms-Icon--ChevronDown"></i></th>
            <th>Modified By<i class="ms-Icon ms-Icon--ChevronDown"></i></th>
            <th><i class="ms-Icon ms-Icon--Add"></i>Add column</th>
          </tr>
        </thead>
        <tbody>
          <tr class="exTr" (click)="Set">
            <td id="icon"><i class=""></i></td>
            <td><i class="ms-Icon ms-Icon--FabricFolderFill"></i></td>
            <td>CAS</td>
            <td>April 30</td>
            <td>Megan Bowen</td>
            <td> </td>
          </tr>
          <tr class="exTr" data-toggle="collapse" data-target="#demo" (click)="set">
            <td><i class="ms-Icon ms-Check-circle"></i></td>
            <td>
              <span class="ms-fontColor-green">
                <i class="ms-Icon ms-Icon--ExcelDocument"></i>
              </span>
            </td>
            <td>CoasterAndBargelLoading.xslx</td>
            <td>A few seconds ago</td>
            <td>Administrator MOD</td>
            <td> </td>
          </tr>
          <tr class="exTr" data-toggle="collapse" data-target="#demo" (click)="set">
            <td><i class="ms-Icon ms-Check-circle"></i></td>
            <td>
              <span class="ms-fontColor-green">
                <i class="ms-Icon ms-Icon--ExcelDocument"></i>
              </span>
            </td>
            <td>RevenueByServices.xslx</td>
            <td>A few seconds ago</td>
            <td>Administrator MOD</td>
            <td> </td>
          </tr>
          <tr class="exTr" data-toggle="collapse" data-target="#demo" (click)="set">
            <td><i class="ms-Icon ms-Check-circle"></i></td>
            <td>
              <span class="ms-fontColor-green">
                <i class="ms-Icon ms-Icon--ExcelDocument"></i>
              </span>
            </td>
            <td>RevenueByServices2016.xslx</td>
            <td>A few seconds ago</td>
            <td>Administrator MOD</td>
            <td> </td>
          </tr>
          <tr class="exTr" data-toggle="collapse" data-target="#demo" (click)="set">
            <td><i class="ms-Icon ms-Check-circle"></i></td>
            <td>
              <span class="ms-fontColor-green">
                <i class="ms-Icon ms-Icon--ExcelDocument"></i>
              </span>
            </td>
            <td>RevenueByServices2017.xslx</td>
            <td>A few seconds ago</td>
            <td>Administrator MOD</td>
            <td> </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-3 collapse" id="demo">
    <div class="container"></div>
  </div>

  

  <script type="text/javascript">
            var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
            for (var i = 0; i < CommandBarElements.length; i++) {
              new fabric['CommandBar'](CommandBarElements[i]);
            }
  </script>
  <script type="text/javascript">
            var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
            var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
  </script>
  <script type="text/javascript">
            var ButtonElements = document.querySelectorAll(".ms-Button");
            for (var i = 0; i < ButtonElements.length; i++) {
              new fabric['Button'](ButtonElements[i], function() {
                // Insert Event Here
              });
            }
  </script>
  <script type="text/javascript">
            var TableElements = document.querySelectorAll(".ms-Table");
            for (var i = 0; i < TableElements.length; i++) {
                new fabric['Table'](TableElements[i]);
            }
  </script>
  <script>
            var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
            var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
            var canvas = document.getElementById("canvas");
            canvas.width = width;
            canvas.height = height;
  </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
  
</body>
</html>

以下代码位于文件名doc.component.html上

首先尝试：我在index.html文件中添加了以下代码，但未定义错误$：

 <script>
  $(".exTr").click(function () {
    $("#icon").attr("class", "ms-Icon ms-Icon--checkboxCheck");
  });
</script>

第二尝试：我在doc.component.ts中添加了以下代码，并在doc.component.html中添加了一些必要的东西，但是它不起作用：

set() {
    var element = document.activeElement.firstElementChild;
    var attr = document.createAttribute("class");
    attr.value = "ms-Icon ms-Icon--checkboxCheck";
    element.attributes.setNamedItem(attr);
}
angular asp.net-core
1个回答
0
投票

如果使用angular，您应该知道它具有hostlistener指令。单击时可以使用并找到您的行：

  @HostListener('document:click', ['$event'])
 const target: any = e.target;
        if (target.classList.contains('your_class')) {
                do something
        }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.