ag-grid - 使用标签无法点击 ag-grid 中的单元格

问题描述

我在 ag-grid（版本 23.2.0）中有 3 列。第一列和第三列应该可以点击到模态。
第三列有一支 FA 铅笔，工作正常。
第一列有一个名字。显示名称，但没有可点击的行为。
我已包含以下代码：
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <meta name="Components" content="">
    <meta name="Bryan Schmiedeler" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/navbar-fixed-top/">

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    
    <!-- jQuery-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <!-- Popper.js, -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <!-- Bootstrap.js, -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- ag-Grid.js, -->    
   <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script>
    var columnDefs = [  
    {headerName: "Trucker Name", field: "name",cellRenderer: 'activateCellRenderer2', width:250, colSpan: function(params) {
      return params.data === 2 ? 3 : 1;
    },},
    {headerName: "Businesses", field: "model", minWidth: 200,
        maxWidth: 350, flex: 2,},
    {headerName: "Actions", field: "price",type:"rightAligned", cellRenderer: 'activateCellRenderer',flex: 1}
    ];
    
    // specify the data
    var rowData = [
      {name: "Ben Christy", model: "Salina", price: "A"},
      {name: "Cindy Blideman", model: "Pratt", price: "I"},
      {name: "Wes Woodson", model: "Waverly", price: "A"},
      {name: "Bryan Schmiedeler", model: "Overland Park", price: "A"}
    ];
  
    // let the grid know which columns and what data to use
    var gridOptions = {
        defaultColDef: {
            resizable: true
        },      
      columnDefs: columnDefs,
      domLayout:  'autoHeight',
      components: {
         'activateCellRenderer': ActivateCellRenderer,
         'activateCellRenderer2': ActivateCellRenderer2
      },
      rowData: rowData,
      };

    // cell renderer class
    function ActivateCellRenderer() {
    }

    // init method gets the details of the cell to be renderer
    ActivateCellRenderer.prototype.init = function(params) {       
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = '<a data-toggle="modal" href="#myModal">\
                                    <i class="fa fa-pencil"</i>\
                               </a>'
    };

    ActivateCellRenderer.prototype.getGui = function() {
        return this.eGui;
    };

    // cell renderer class
    function ActivateCellRenderer2() {
    }

    // init method gets the details of the cell to be renderer
    ActivateCellRenderer2.prototype.init = function(params) {
        this.eGui = document.createElement('div');  
        this.eGui.innerHTML = '<a data-toggle="modal" href="#myModal">';                    this.eGui.innerHTML += params.value;                    
        this.eGui.innerHTML += '</a>';
    };
                                    
    ActivateCellRenderer2.prototype.getGui = function() {
        return this.eGui;
    };

    document.addEventListener('DOMContentLoaded', function() {
        var gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);
    });   

</script>
        
  </head>

<body>
    
    <div class = "container"; style= "width: 100%";>
        <div class = "row">
           <div id="myGrid"  class="ag-theme-alpine" style="width: 100%";></div>
        </div>
    </div>

<body>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
  
</html>
标签： ag-grid
ag-grid - 使用标签无法点击 ag-grid 中的单元格

问题描述

解决方案

推荐阅读
