Question

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

这是将数据字段添加到gridtable

的代码

  <record id="module_name.menuitem_name" model="ir.ui.menu">
        <field name="groups_id" eval="[(6, False, [ref('module_name.group_invisible')])]"/>
  </record>

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

   @(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");
})

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中实施模板的详细信息。

单击网格Devextreme上的按钮打开Treeview

1 个答案: