devextreme datagrid 命令按钮答案

【问题标题】：devextreme datagrid command buttondevextreme datagrid 命令按钮
【发布时间】：2017-07-25 03:04:16
【问题描述】：

我正在使用 devextreme 网格视图。除了默认命令按钮之外，还有什么方法可以添加自定义命令按钮？我已经尝试过这段代码，但我认为这不是正确的方法。

onContentReady: function (e) {
            if ($("#createButton").length == 0) {
                var $customButton = $("<a id='createButton' i />")
                  .text("Users")
                .addClass("btn")
             .on('dxclick', function () {
                 var url = '@Url.Action("sample")';
                 window.location.href = url;
             });
                var toolbar = e.element
                  .find('.dx-link');
                $(toolbar.get())
                   .prepend($customButton);
            }
        },

【问题讨论】：

据我了解，您正在寻找这样的东西 - Toolbar Customization
@Sergey 是的 somthing 链接这个。但它自定义了标题，但我想在命令按钮中添加一个额外的 btn。

标签： jquery html datagrid devextreme

【解决方案1】：

你可以使用 html 和 jquery 来做到这一点

$(document).ready(function () {
    var r = $('<label class="className" type="button" onclick="yourFunction()" >Custom Name</button>');
    $('#gridId.dx-toolbar-before').append(r);
});

【讨论】：

【解决方案2】：

我了解到您正在寻找类似此代码的内容。

              onContentReady: function (e) {
            if (!e.component.detayColumnAdded) {
                e.component.detayColumnAdded = true;
                e.component.addColumn({
              cellTemplate: function (cellElement, args) {
             $('<a/>').addClass('dx-link')
           .text('Detay')
           .on('dxclick', function (info) {
                        }).appendTo(cellElement)
                    }
                });
            }

        }

还有

        columns: [
           { cellTemplate: function (container, options) {
            $('<a/>').addClass('dx-link')
            .text('CLİCK')
            .on('dxclick', function (info) {

            })
            .appendTo(container);
      }
  }

【讨论】：

【解决方案3】：

我正在用 Angular 实现解决方法：添加一个普通列并更改模板

<dxi-column cellTemplate="cellTemplate" caption="Edit" ...>
  <div *dxTemplate="let cell of 'cellTemplate'">
    <div><i class="fa fa-edit"></i></div>
  </div>
</dxi-column>

然后机智onCellClickevent：

onCellClicked = (e): void => {
 if (e.column.caption === 'Edit') {
   this.OpenMobile.emit(e.data);
   return;
 }
}

阅读更多关于cellTemplate

和onCellClick

所以无论框架如何，您都可以实现这个有用的技巧。

【讨论】：