图标在jqxgrid角

Question

我很难在jqxgrid中实现图标。这是我的代码https://jseditor.io/?key=gqgrid-angular

我试图显示“编辑”和“删除”图标，而不是文本/按钮。如果我使用下面的代码，图标将显示，但它的方框，并没有执行操作后，点击它。如果我使用“返回模型”，它的执行动作。

      {
    text: '', datafield: 'Delete',
    width: 33, columnType: 'button',
    cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
       return '<i class="fa fa-trash deleteButton"></i>';
     // return 'del';
    },
    buttonClick: (row: number): void => {
        console.log("*********");
        this.deleteRow(row);
    }
  }

你能告诉我我做错了什么吗？我如何显示图标和它执行的行动，点击。

Answer 1

您可以将其添加到组件中。

.jqx-grid-cell input[type='button'] {
  cursor: pointer;
  opacity: 0.01 !important;
  z-index: 9999 !important;
  display: block !important;
}

有关详细信息，请访问：

通常情况下，对于文本，列类型element.

• Whenever将呈现一个在单元格(通过cellsRenderer)中有<字符的input input，例如<img, <i。它将尝试同时呈现输入和图像。要显示图像，需要隐藏输入=>代码使输入显示: none.

有趣的是附加单击处理程序的代码仍然使用firstchild选择器，它最终将应用于不可见的input。

以上所有的逻辑都可以在jqxgrid.js: _renderbuttoncell函数中找到。

我花了两个小时仔细检查文档并调试这个问题。然后我得到了这个答案，https://www.jqwidgets.com/community/topic/jqxgrid-column-button-not-firing-event-after-adding-icon-over-there/