如何将内联动作按钮（Inline Action Buttons）添加到网格？

本节的 TypeScript 版本有待更新

你可以在网络添加一些内联动作图标，用以删除当前行、打开对话框、调用服务等。

让我们在客户网格列表（CustomersGrid）添加一个含删除按钮的新列。

首先从 CustomerGrid 删除 IAsyncInit 接口，否则你得重写 GetColumnsAsync。

  2. namespace Serene.Northwind
  3. {
  4.     //...
  5.     public class CustomerGrid : EntityGrid<CustomerRow>
  6.     {
  7.         public CustomerGrid(jQueryObject container)
  8.             : base(container)
  9.         {
  10.         }
  11.         //...
  12.         protected override List<SlickColumn> GetColumns()
  13.         {
  14.             var columns = base.GetColumns();
  16.             columns.Add(new SlickColumn
  17.             {
  18.                 Field = "DeleteRow",
  19.                 Title = "",
  20.                 Format = ctx =>
  21.                 {
  22.                     return "<a class='inline-action delete-row' title='delete'></a>";
  23.                 },
  24.                 Width = 24,
  25.                 MinWidth = 24,
  26.                 MaxWidth = 24                
  27.             });
  29.             return columns;
  30.         }
  31.     }
  32. }

现在我们需要给我们的按钮添加样式。在 site.less 末尾添加下面的样式：

  1. .inline-action {
  2.     background-repeat: no-repeat;
  3.     background-position: center center;
  4.     width: 16px;
  5.     height: 16px;
  6.     cursor: pointer;
  7.     opacity: 0.5;
  8.     display: inline-block;
  10.     &:hover {
  11.         opacity: 1;
  12.     }
  13. }
  15. .delete-row {
  16.     background-image: url(../serenity/images/delete2.png);
  17. }

我用基本 CSS 类 inline-action 来设置默认按钮的样式。通过这种方式，你可以只改变 delete-row 类并设置其 background-image 创建不同的动作按钮。

生成并运行项目后，在客户网格列表最右边，我们将有一个删除连接。当你点击该连接，不会有任何响应，因为我们还没有处理该点击的事件。下面我们来添加该点击事件：

  1. protected override void OnClick(jQueryEvent e, int row, int cell)
  2. {
  3.     base.OnClick(e, row, cell);
  5.     if (e.IsDefaultPrevented())
  6.         return;
  8.     var item = Items[row];
  10.     if (J(e.Target).HasClass("inline-action"))
  11.     {
  12.         e.PreventDefault();
  14.         if (J(e.Target).HasClass("delete-row"))
  15.         {
  16.             Q.Confirm("Delete record?", () =>
  17.             {
  18.                 CustomerService.Delete(new DeleteRequest
  19.                 {
  20.                     EntityId = item.ID.Value
  21.                 }, onSuccess: response => 
  22.                 {
  23.                     Refresh();
  24.                 });
  25.             });
  26.         }
  27.     }
  28. }

我们首先检查点击事件是否被基本的网格类处理，来防止同样的事件被处理再次。例如，基本的网格类在 customer ID 和 name 处理了编辑连接。

然后，我们获得点击行的实体。

下一步骤是检查单击的 HTML 元素是否有 inline-action 样式，如果有该样式，我们就阻止其默认行为。

然后，我们检查单击元素是否是 delete-row 操作，如果是该操作，则弹出确认框给用户确认。 Q.Confirm 在第二个参数中指定用户确认操作后所调用的操作。

如果用户确认了删除操作，我们调用 CustomerService.Delete 方法删除所选的行，并使用删除成功之后的回调方法刷新网格。

让我们添加另一个操作来编辑客户（你可以用相同的方法打开另一对话框）。

  1. protected override List<SlickColumn> GetColumns()
  2. {
  3.     var columns = base.GetColumns();
  5.     columns.Add(new SlickColumn
  6.     {
  7.         Field = "DeleteRow",
  8.         Title = "",
  9.         Format = ctx =>
  10.         {
  11.             return "<a class='inline-action delete-row' title='delete'></a>";
  12.         },
  13.         Width = 24,
  14.         MinWidth = 24,
  15.         MaxWidth = 24
  16.     });
  18.     columns.Add(new SlickColumn
  19.     {
  20.         Field = "EditRow",
  21.         Title = "",
  22.         Format = ctx =>
  23.         {
  24.             return "<a class='inline-action edit-row' title='edit customer'></a>";
  25.         },
  26.         Width = 24,
  27.         MinWidth = 24,
  28.         MaxWidth = 24
  29.     });
  31.     return columns;
  32. }

为其添加 CSS：

  1. .delete-row {
  2.     background-image: url(../serenity/images/delete2.png);
  3. }
  5. .edit-row {
  6.     background-image: url(../serenity/images/magnifier.png);
  7. }

添加单击处理事件：

  1. protected override void OnClick(jQueryEvent e, int row, int cell)
  2. {
  3.     base.OnClick(e, row, cell);
  5.     if (e.IsDefaultPrevented())
  6.         return;
  8.     var item = Items[row];
  10.     if (J(e.Target).HasClass("inline-action"))
  11.     {
  12.         e.PreventDefault();
  14.         if (J(e.Target).HasClass("delete-row"))
  15.         {
  16.             Q.Confirm("Delete record?", () =>
  17.             {
  18.                 CustomerService.Delete(new DeleteRequest
  19.                 {
  20.                     EntityId = item.ID.Value
  21.                 }, onSuccess: response => 
  22.                 {
  23.                     Refresh();
  24.                 });
  25.             });
  26.         }
  27.         else if (J(e.Target).HasClass("edit-row"))
  28.         {
  29.             var dlg = new CustomerDialog();
  30.             InitEntityDialog(dlg);
  31.             dlg.LoadByIdAndOpenDialog(item.ID.Value);
  32.         }
  33.     }
  34. }

我们首先创建一个新的客户对话框。 InitEntityDialog 是 CustomerGrid 的一个方法，它允许附加 ondatachange 事件，因此当对话框的数据改变时，它可以自动刷新。然后，我们调用 LoadByIdAndOpenDialog 加载所选 ID 的客户到对话框，在加载完成后显示对话框。