javascript - 在 fnCreatedCell 中使用 font-awesome

Question

最近学习了一种在数据表中使用数据属性的新方法。

以前，我会以这种方式对列进行编码(请注意 font-awesome 标签):

 "columns": [{ 
    "data": "",
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
    {
      $(nTd).html("<a href='#' title='Edit Account' class='modAccount' 
      data-voyid='"+oData.VOYID+"' data-servicename='"+oData.SERVICE_NAME+"' 
      data-vesselname='"+oData.VESSEL_NAME+"' data-voyage='"+oData.VOYAGE+"' 
      data-bound='"+oData.BOUND+"' data-cargoweek='"+oData.CARGO_WEEK+"' 
      data-cargoyear='"+oData.CARGO_YEAR+"' data-allocation='"+oData.ALLOCATION+"' 
      data-importvoyage='"+oData.IMPORT_VOYAGE+"' data-adddate='"+oData.ADD_DATE+"' 
      data-adduser='"+oData.ADD_USER+"' data-moddate='"+oData.MOD_DATE+"' 
      data-moduser='"+oData.MOD_USER+"'><i class='fa fa-edit fa-fw'> </i></a>");
    },

我刚刚学习的方法遵循这样的格式:

"columns": [{ 
    "data": "",
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
    {
       $('<a />', {
       'href': '#',
       'title': 'Edit Account',
       'class': 'modAccount',
       'data-voyid': oData.VOYID,
       'data-servicename': oData.SERVICE_NAME,
       'data-vesselname': oData.VESSEL_NAME,
       'data-voyage': oData.VOYAGE,
       'data-bound': oData.BOUND,
       'data-cargoweek': oData.CARGO_WEEK,
       'data-cargoyear': oData.CARGO_YEAR,
       'data-allocation': oData.ALLOCATION,
       'data-importvoyage': oData.IMPORT_VOYAGE,
       'data-adddate': oData.ADD_DATE,
       'data-adduser': oData.ADD_USER,
       'data-moddate': oData.MOD_DATE,
       'data-moduser': oData.MOD_USER,
       'text': '<i class="fa fa-edit fa-fw"> </i>' <-- does not work
       }).appendTo(nTd);
     }
   },

我在第一段代码中引入字体超棒的图标没有问题。

第二段代码是我现在需要图标的地方。

如果您注意到第二段代码中的“文本”部分，我试图在其中引入 Font Awesome 图标。但在屏幕上，我只看到代码，看不到图标。

我怎样才能解决这个问题以包含 Font Awesome 图标？

谢谢。

Answer 1

您正在添加 HTML，因此您将字符串提供给 html 属性，而不是对象初始化程序中的 text:

'html': '<i class="fa fa-edit fa-fw"> </i>'