feat(Table): support drag column (#1538)

* !3812 Table组件新增功能，拖动表头标题栏改变栏位顺序 * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * aaa * aaa * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Table组件新增功能，拖动表头标题栏改变栏位位置 * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Table组件新增功能，拖动表头标题栏改变栏位顺序 * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * 修复Table组件在调整栏宽时会同时触发排序的bug * refactor: 更新单词拼写错误与代码规范化 * refactor: 增加 --bb-table-drop-bg 变量 * refactor: 代码规范化 * !3813 添加示例文档，修复了拖放目标禁止拖放时，列标题单元格样式不恢复的bug * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * 添加示例文档 * 添加示例文档 * 添加示例文档 * feat-table-drag-column * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * aaa * aaa * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Table组件新增功能，拖动表头标题栏改变栏位位置 * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Table组件新增功能，拖动表头标题栏改变栏位顺序 * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * Merge branch 'dev-feature' of gitee.com:ljmay168/BootstrapBlazor into … * 修复Table组件在调整栏宽时会同时触发排序的bug * refactor: 移除 RenderTemplate 节点 * revert: 撤销 dom 结构更改 * refactor: 增加 draggable 参数 * refactor: 增加 table-draggable 样式 * refactor: 移除服务器端样式更新逻辑改为客户端 * refactor: 更改 IsDraggable 为 AllowDragColumn * refactor: 更新 Table 滚动条为 7px * feat: 增加拖动结束回调重新渲染逻辑 * refactor: 更新拖动效果样式 * refactor: 增加 dropEffect 效果 * doc: 更新示例 * refactor: 调整滚动条宽度 * test: 调整列单元测试 * refactor: 更改单元测试方法名 * feat: 增加销毁逻辑 * chore: bump version 7.8.6 * doc: 增加自动滚动功能 * test: 更正单词拼写错误 --------- Co-authored-by: ljmay168 <[email protected]>
dotnetcore · Jul 12, 2023 · 87c2541 · 87c2541
1 parent 68bfb68
commit 87c2541
Show file tree

Hide file tree

Showing 15 changed files with 284 additions and 28 deletions.
diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragOrder.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragOrder.razor
@@ -0,0 +1,73 @@
+@inject IStringLocalizer<Foo> FooLocalizer
+
+<Table TItem="Foo"
+ IsPagination="true" PageItemsSource="@PageItemsSource" AllowDragColumn="true"
+ IsStriped="true" IsBordered="true"
+ ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
+ OnQueryAsync="@OnQueryAsync">
+ <TableColumns>
+ <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" />
+ <TableColumn @bind-Field="@context.Name" Width="100" />
+ <TableColumn @bind-Field="@context.Address" />
+ <TableColumn @bind-Field="@context.Count" />
+ </TableColumns>
+</Table>
+
+@code {
+ /// <summary>
+ /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+ /// Foo class is used for Demo test, please download the source code if necessary
+ /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+ /// </summary>
+ [NotNull]
+ private List<Foo>? Items { get; set; }
+
+ private static IEnumerable<int> PageItemsSource => new int[] { 5, 10, 20 };
+
+ /// <summary>
+ /// OnInitialized 方法
+ /// </summary>
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+
+ Items = Foo.GenerateFoo(FooLocalizer);
+ }
+
+ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
+ {
+ IEnumerable<Foo> items = Items;
+
+ // 过滤
+ var isFiltered = false;
+ if (options.Filters.Any())
+ {
+ items = items.Where(options.Filters.GetFilterFunc<Foo>());
+ isFiltered = true;
+ }
+
+ // 排序
+ var isSorted = false;
+ if (!string.IsNullOrEmpty(options.SortName))
+ {
+ var invoker = Foo.GetNameSortFunc();
+ items = invoker(items, options.SortName, options.SortOrder);
+ isSorted = true;
+ }
+
+ // 设置记录总数
+ var total = items.Count();
+
+ // 内存分页
+ items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
+
+ return Task.FromResult(new QueryData<Foo>()
+ {
+ Items = items,
+ TotalCount = total,
+ IsSorted = isSorted,
+ IsFiltered = isFiltered,
+ IsSearch = true
+ });
+ }
+}
diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -5300,7 +5300,8 @@
  "GotoNavigatorLabelTextAttr": "Goto label text",
  "ShowPageInfoAttr": "Whethere show the pagination info",
  "PageInfoTemplateAttr": "The template for custom page info",
- "PageInfoTextAttr": "Pagination label text"
+ "PageInfoTextAttr": "Pagination label text",
+ "AllowDragOrderAttr": "Allow dragging column headings to adjust table column order"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesBase.TableBaseNormal": {
  "TableBaseNormalRefreshText": "Refresh"
@@ -5384,7 +5385,10 @@
  "CustomerButtonTitle": "Custom button processing method",
  "CustomerButtonContent": "The button processing logic is distinguished by different functions. The parameter Items is the selected row data collection in the Table component, and the currently selected data is {0}",
  "OnRowButtonClickContent": "The button processing logic is distinguished by different functions, and the parameter Item is the current row data",
- "ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value"
+ "ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value",
+ "AllowDragOrderTitle": "Allow dragging column headings to adjust table column order",
+ "AllowDragOrderIntro": "By specifying <code>AllowDragOrder</code>, set the table columns to allow dragging column headings to adjust the table column order",
+ "AllowDragOrderDesc": "Pressing the mouse over a column heading and dragging it to another column heading position can adjust the column to be in front of the target column, but the built-in columns in the Table component, such as DetailRow, LineNo, MultipleSelect, and Operation columns, cannot be adjusted"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesColumn.TablesColumnVisible": {
  "ResetVisibleColumnsButtonText": "Set Columns"

diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -5332,7 +5332,8 @@
  "GotoNavigatorLabelTextAttr": "Goto 导航标签文字",
  "ShowPageInfoAttr": "是否显示分页详细信息",
  "PageInfoTemplateAttr": "分页详细信息自定义组件",
- "PageInfoTextAttr": "分页信息显示文字"
+ "PageInfoTextAttr": "分页信息显示文字",
+ "AllowDragOrderAttr": "是否允许拖动列标题调整表格列顺序"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesBase.TableBaseNormal": {
  "TableBaseNormalRefreshText": "刷新"
@@ -5415,7 +5416,10 @@
  "CustomerButtonTitle": "自定义按钮处理方法",
  "CustomerButtonContent": "通过不同的函数区分按钮处理逻辑，参数 Items 为 Table 组件中选中的行数据集合，当前选择数据 {0} 条",
  "OnRowButtonClickContent": "通过不同的函数区分按钮处理逻辑，参数 Item 为当前行数据",
- "ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性"
+ "ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性",
+ "AllowDragOrderTitle": "允许拖动列标题调整表格列顺序",
+ "AllowDragOrderIntro": "通过指定 <code>AllowDragOrder</code> 设置表格列允许拖动列标题调整表格列顺序",
+ "AllowDragOrderDesc": "在列标题上按下鼠标拖动到其他列标题位置可将该列调整至目标列之前，但Table组件内置的列如明细行列、行号列、选择列、操作列等不可被调整"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesColumn.TablesColumnVisible": {
  "ResetVisibleColumnsButtonText": "设置列隐藏信息"

diff --git a/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs b/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
@@ -1175,7 +1175,15 @@ public partial class Tables
  Type = "Alignment",
  ValueList = "None|Left|Center|Right",
  DefaultValue = "None"
- }
+ },
+ new()
+ {
+ Name = "AllowDragOrder",
+ Description = Localizer["AllowDragOrderAttr"],
+ Type = "boolean",
+ ValueList = "true|false",
+ DefaultValue = "false"
+ },
  };
 
  private IEnumerable<MethodItem> GetMethods() => new MethodItem[]

diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor
@@ -104,6 +104,13 @@
  <p>@((MarkupString)Localizer["AllowResizingDesc"].Value)</p>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["AllowDragOrderTitle"]"
+ Introduction="@Localizer["AllowDragOrderIntro"]"
+ Name="DragOrder"
+ Demo="typeof(Demos.Table.TablesColumn.TablesColumnDragOrder)">
+ <p>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</p>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["ShowCopyColumnTitle"]"
  Introduction="@Localizer["ShowCopyColumnIntro"]"
  Name="ShowCopyColumn"

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
  <PropertyGroup>
- <Version>7.8.5</Version>
+ <Version>7.8.6</Version>
  </PropertyGroup>
 
  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.css b/src/BootstrapBlazor/Components/Scroll/Scroll.css
@@ -3,8 +3,8 @@
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
  scrollbar-width: thin;
  overflow: auto;
- --bb-scroll-width: 6px;
- --bb-scorll-height: 6px;
+ --bb-scroll-width: 7px;
+ --bb-scorll-height: 7px;
  --bb-scorll-thumb-radius: 3px;
  --bb-scorll-thumb-bg: rgba(0,0,0,0.2);
  --bb-scorll-thumb-hover-bg: rgba(0,0,0,0.3);

diff --git a/src/BootstrapBlazor/Components/Table/Table.css b/src/BootstrapBlazor/Components/Table/Table.css
@@ -816,3 +816,21 @@ form .table .table-cell > textarea {
  cursor: pointer;
  margin-right: var(--bb-table-copy-column-margin-right);
 }
+
+.table-drag-over {
+ animation: drag-column 1s linear infinite;
+}
+
+.table-dragging th[draggable] * {
+ pointer-events: none;
+}
+
+.table-drag {
+ background-color: #ddd !important;
+}
+
+@keyframes drag-column {
+ 50% {
+ border-bottom-color: var(--bs-primary);
+ }
+}
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @typeparam TItem
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <div @attributes="@AdditionalAttributes" class="@ClassName" style="@StyleString" id="@Id">
  <CascadingValue Value="this" IsFixed="true">
@@ -480,8 +480,8 @@
  {
  var fieldName = col.GetFieldName();
  var displayName = col.GetDisplayName();
- <DynamicElement TagName="th" class="@GetHeaderClassString(col)" style="@GetFixedCellStyleString(col, 6)"
- TriggerClick="col.Sortable" OnClick="@OnClickHeader(col)">
+ <DynamicElement TagName="th" class="@GetHeaderClassString(col)" style="@GetFixedCellStyleString(col, 7)"
+ TriggerClick="col.Sortable" OnClick="@OnClickHeader(col)" draggable="@DraggableString">
  <div class="@GetHeaderWrapperClassString(col)">
  @if(col.ShowCopyColumn)
  {
@@ -573,7 +573,7 @@
  {
  if (CheckShownWithBreakpoint(col))
  {
- <th class="@GetHeaderClassString(col, true)" style="@GetFixedCellStyleString(col, 6)">
+ <th class="@GetHeaderClassString(col, true)" style="@GetFixedCellStyleString(col, 7)">
  <div class="table-cell">
  @if(col.Filterable)
  {
@@ -585,7 +585,7 @@
  }
  @if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
  {
- <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(6)">
+ <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(7)">
  <div class="table-cell">&nbsp;</div>
  </th>
  }
@@ -788,7 +788,7 @@
  </Button>;
 
  RenderFragment RenderExtendButtonsHeader =>
- @<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(6)">
+ @<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(7)">
  <div class="@ExtendButtonsCellClassString">
  @ColumnButtonTemplateHeaderText
  </div>

diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs
@@ -43,6 +43,7 @@ namespace BootstrapBlazor.Components;
  .AddClass("table-bordered", IsBordered)
  .AddClass("table-striped table-hover", IsStriped)
  .AddClass("table-layout-fixed", IsFixedHeader)
+ .AddClass("table-draggable", AllowDragColumn)
  .Build();
 
  /// <summary>
@@ -779,7 +780,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
  if (_init)
  {
  _init = false;
- await InvokeVoidAsync("init", Id);
+ await InvokeVoidAsync("init", Id, Interop, nameof(ResetColumnsCallback));
  }
 
  if (_resetColumns)
@@ -1190,6 +1191,34 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item)
  }
  }
 
+ /// <summary>
+ /// 获得/设置 是否允许拖放标题栏更改栏位顺序，默认为 false
+ /// </summary>
+ [Parameter]
+ public bool AllowDragColumn { get; set; }
+
+ private string? DraggableString => AllowDragColumn ? "true" : null;
+
+ /// <summary>
+ /// 重置列方法 由 JavaScript 脚本调用
+ /// </summary>
+ /// <param name="originIndex"></param>
+ /// <param name="currentIndex"></param>
+ /// <returns></returns>
+ [JSInvokable]
+ public void ResetColumnsCallback(int originIndex, int currentIndex)
+ {
+ var firstColumn = GetVisibleColumns().ElementAtOrDefault(originIndex);
+ var targetColumn = GetVisibleColumns().ElementAtOrDefault(currentIndex);
+ if (firstColumn != null && targetColumn != null)
+ {
+ var index = Columns.IndexOf(targetColumn);
+ Columns.Remove(firstColumn);
+ Columns.Insert(index, firstColumn);
+ StateHasChanged();
+ }
+ }
+
  /// <summary>
  /// Dispose 方法
  /// </summary>