将FA图标添加到纯JS Ag-Grid中的单元格

时间：2019-02-11 15:14:53

标签： ag-grid

我在JS中使用ag-Grid。

让FA图标出现在单元格中确实有困难。

enter image description here

第一列中的卡车是因为我将代码放在标题中。我想要的是一列，可以根据数据在其中放置不同的图标。

我现在还没有迷上数据源，只是使用内联数据作为概念证明。

我的代码在下面。

谢谢

<!DOCTYPE html>
<html>
<head>

  <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-dark.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-blue.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-material.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-bootstrap.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-fresh.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>
<body>
  <h1>Farm Loads</h1>

  <!--

  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-balham"></div>
  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-dark"></div>
  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-blue"></div>
  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-material"></div>
  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-bootstrap"></div>
  <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-fresh">
  </div>-->
    <div id="myGrid" style="height: 600px;width:1500px;" class="ag-theme-blue"></div>

  <script type="text/javascript" charset="utf-8">
    // specify the columns
    var columnDefs = [
      {headerName: "", field: "", width: 40, cellRenderer: function(params) {return '<span><i class="fa fa-truck"></i></span>';},
      },    
      {headerName: "Requested Pickup", field: "model", sortable:true},
      {headerName: "Farmer", field: "farmer", sortable:true, filter:true},
      {headerName: "Field", field: "ffield", sortable:true,  filter:true},
      {headerName: "Trucker", field: "trucker", sortable:true, filter:true},
      {headerName: "Notes", field: "notes", sortable:true,width:80},
      {headerName: "Test", field: "field1", sortable:true,width:100}
    ];

    // specify the data
    var rowData = [
      {model: "3/1/19 8:15 AM", farmer: "Shawn Anderson", ffield: "South Field 1", trucker: "Ben Christy", notes: "Y"},
      {model: "3/1/19 8:45 AM", farmer: "Dave Dauer", ffield: "South Field 2", trucker: "Ben Christy", notes: "Y"},
      {model: "3/1/19 9:15 AM", farmer: "Gary Glahn", ffield: "South Field 1", trucker: "Ben Christy", notes: "Y"},     
       {model: "3/1/19 9:15 AM", farmer: "Gary Glahn", ffield: "South Field 1", trucker: "Ben Christy", notes: "Y",                        
       cellRenderer: function(params) {return '<span><i class="fa fa-truck"></i></span>';}  
       }
    ];


    // let the grid know which columns and what data to use
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData
    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

  </script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题