javascript - 通过单击网格 Devextreme 上的按钮打开 Treeview

Question

如何获取单击按钮所在行的数据？我添加了一张图片以更清楚地说明我的意思。

这是将数据字段添加到网格表的代码

   @(Html.DevExtreme().DataGrid()
    .ID("RoleGroupTable")
    .DataSource(d => d.WebApi().Controller("UserRoleManagementApi").Key("RoleGroupId")
    .LoadAction("Get")
    .InsertAction("Post")
    .UpdateAction("Put")
    .DeleteAction("Delete"))

.Columns(c =>
{
          c.Add().DataField("TreeView").CellTemplate(@<text> 
  @(Html.DevExtreme().Button().Text("Clickme").Icon("airplane").OnClick("btnclick").ID("expandtreeview")) </text>);

     c.Add().DataField("RoleGroupId");  /* CellTemplate("<input class=button1 type=button value=click me ng-click=test()>");*/
    c.Add().DataField("Name");
    c.Add().DataField("Description");
    c.Add().DataField("InsertionDate").DataType(GridColumnDataType.Date);
    c.Add().DataField("InsertedUserId");
    c.Add().DataField("UpdatedDate").DataType(GridColumnDataType.Date);
    c.Add().DataField("UpdatedUserId");
})

还有一些脚本来检索数据..

function btnclick(data) {
    console.log('btnclick(data)');
    console.log(data);

    var treeViewInstance = $('#RolesTreeView').dxTreeView('instance');
    //var itemElement = treeViewInstance.element().find("[data-item-id='" + args.itemData.RoleId + "'] > .dx-treeview-item").get(0);
    var itemElement = treeViewInstance.element().find("[data-item-id='10']  > .dx-treeview-item").get(0);
    treeViewInstance.expandItem(itemElement);
    treeViewInstance.selectItem(itemElement);
}

Answer 1

有两种可能的方法可以将行数据传递给按钮单击处理程序。

<强>1。将单元格模板实现为 js 函数:

@(Html.DevExtreme().DataGrid()
     //...
     .Columns(c => {
        c.Add().DataField("CompanyName").CellTemplate(new JS("cellTemplate"));
        //...
     }
)

<script>
    function onButtonClick(cellInfo, evt) {
        //use the cellInfo argument here
    }

    function cellTemplate(cellElement, cellInfo) {
        cellElement.append(
            $("<div>").dxButton({
                text: "click me",
                onClick: onButtonClick.bind(this, cellInfo)
            })
        );
    }
</script>

<强>2。更改按钮单击处理程序的上下文:

@(Html.DevExtreme().DataGrid()
    //...
    .Columns(c => {
        c.Add().DataField("CompanyName").CellTemplate(@<text>
            @(Html.DevExtreme()
                .Button()
                .Text("Click me")
                .OnClick("onButtonClick.bind(this, arguments[0])"))
        </text>);
        //...
    })
)

<script>
    function onButtonClick(cellInfo, evt) {
        //use the cellInfo argument here
    }
</script>

在此 article 中阅读有关实现模板的更多信息.