🐛 fix(DataTable): the initial value set for selection is ineffective (#…

…2117) * 🐛 fix(DataTable): the initial value set for selection is ineffective * 💄 style: update the UI of checkbox * add comments * update docs
masastack · Aug 26, 2024 · 8c68596 · 8c68596
1 parent 8c6ef3b
commit 8c68596
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 144 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/data-tables/RowSelection.razor b/docs/Masa.Blazor.Docs/Examples/components/data-tables/RowSelection.razor
@@ -1,21 +1,23 @@
-<MDataTable @bind-Value="_selected"
+<MDataTable @bind-Selected="_selected"
             Headers="_headers"
             Items="_desserts"
             SingleSelect="_singleSelect"
-            ItemKey="r=>r.Name"
+            ItemKey="r => r.Name"
             ShowSelect
             Class="elevation-1">
     <TopContent>
         <MSwitch @bind-Value="_singleSelect"
                  Label="Single select"
-                 Class="pa-3"></MSwitch>
+                 Class="pa-3">
+        </MSwitch>
     </TopContent>
 </MDataTable>
 
-  @code {
-    public class Dessert
+@code {
+
+    private class Dessert
     {
-        public string Name { get; set; }
+        public string? Name { get; set; }
 
         public int Calories { get; set; }
 
@@ -25,125 +27,124 @@
 
         public double Protein { get; set; }
 
-        public int Sodium { get; set; }
-
-        public string Calcium { get; set; }
-
-        public string Iron { get; set; }
+        public string? Iron { get; set; }
     }
 
-    private List<DataTableHeader<Dessert>> _headers = new List<DataTableHeader<Dessert>>
+    private List<DataTableHeader<Dessert>> _headers = new()
+    {
+        new()
         {
-           new ()
-           {
-            Text= "Dessert (100g serving)",
-            Align= DataTableHeaderAlign.Start,
-            Sortable= false,
-            Value= nameof(Dessert.Name)
-          },
-          new (){ Text= "Calories", Value= nameof(Dessert.Calories)},
-          new (){ Text= "Fat (g)", Value= nameof(Dessert.Fat)},
-          new (){ Text= "Carbs (g)", Value= nameof(Dessert.Carbs)},
-          new (){ Text= "Protein (g)", Value= nameof(Dessert.Protein)},
-          new (){ Text= "Iron (%)", Value= nameof(Dessert.Iron)}
-        };
+            Text = "Dessert (100g serving)",
+            Align = DataTableHeaderAlign.Start,
+            Sortable = false,
+            Value = nameof(Dessert.Name)
+        },
+        new() { Text = "Calories", Value = nameof(Dessert.Calories) },
+        new() { Text = "Fat (g)", Value = nameof(Dessert.Fat) },
+        new() { Text = "Carbs (g)", Value = nameof(Dessert.Carbs) },
+        new() { Text = "Protein (g)", Value = nameof(Dessert.Protein) },
+        new() { Text = "Iron (%)", Value = nameof(Dessert.Iron) }
+    };
 
     private List<Dessert> _desserts = new List<Dessert>
+    {
+        new Dessert
+        {
+            Name = "Frozen Yogurt",
+            Calories = 159,
+            Fat = 6.0,
+            Carbs = 24,
+            Protein = 4.0,
+            Iron = "1%",
+        },
+        new Dessert
+        {
+            Name = "Ice cream sandwich",
+            Calories = 237,
+            Fat = 9.0,
+            Carbs = 37,
+            Protein = 4.3,
+            Iron = "1%",
+        },
+        new Dessert
+        {
+            Name = "Eclair",
+            Calories = 262,
+            Fat = 16.0,
+            Carbs = 23,
+            Protein = 6.0,
+            Iron = "7%",
+        },
+        new Dessert
         {
-           new Dessert
-           {
-              Name= "Frozen Yogurt",
-              Calories= 159,
-              Fat= 6.0,
-              Carbs= 24,
-              Protein= 4.0,
-              Iron= "1%",
-            },
-            new Dessert
-            {
-              Name= "Ice cream sandwich",
-              Calories= 237,
-              Fat= 9.0,
-              Carbs= 37,
-              Protein= 4.3,
-              Iron= "1%",
-            },
-            new Dessert
-            {
-              Name= "Eclair",
-              Calories= 262,
-              Fat= 16.0,
-              Carbs= 23,
-              Protein= 6.0,
-              Iron= "7%",
-            },
-            new Dessert
-            {
-              Name= "Cupcake",
-              Calories= 305,
-              Fat= 3.7,
-              Carbs= 67,
-              Protein= 4.3,
-              Iron= "8%",
-            },
-            new Dessert
-            {
-                Name= "Gingerbread",
-                Calories= 356,
-                Fat= 16.0,
-                Carbs= 49,
-                Protein= 3.9,
-                Iron= "16%"
-            },
-            new Dessert
-            {
-                Name= "Jelly bean",
-                Calories= 375,
-                Fat= 0.0,
-                Carbs= 94,
-                Protein= 0.0,
-                Iron= "0%",
-            },
-            new Dessert
-            {
-                Name= "Lollipop",
-                Calories= 392,
-                Fat= 0.2,
-                Carbs= 98,
-                Protein= 0,
-                Iron= "2%",
-            },
-            new Dessert
-            {
-                Name= "Honeycomb",
-                Calories= 408,
-                Fat= 3.2,
-                Carbs= 87,
-                Protein= 6.5,
-                Iron= "45%",
-            },
-            new Dessert
-            {
-                Name= "Donut",
-                Calories= 452,
-                Fat= 25.0,
-                Carbs= 51,
-                Protein= 4.9,
-                Iron= "22%",
-            },
-            new Dessert
-            {
-                Name= "KitKat",
-                Calories= 518,
-                Fat= 26.0,
-                Carbs= 65,
-                Protein= 7,
-                Iron= "6%",
-            }
-        };
+            Name = "Cupcake",
+            Calories = 305,
+            Fat = 3.7,
+            Carbs = 67,
+            Protein = 4.3,
+            Iron = "8%",
+        },
+        new Dessert
+        {
+            Name = "Gingerbread",
+            Calories = 356,
+            Fat = 16.0,
+            Carbs = 49,
+            Protein = 3.9,
+            Iron = "16%"
+        },
+        new Dessert
+        {
+            Name = "Jelly bean",
+            Calories = 375,
+            Fat = 0.0,
+            Carbs = 94,
+            Protein = 0.0,
+            Iron = "0%",
+        },
+        new Dessert
+        {
+            Name = "Lollipop",
+            Calories = 392,
+            Fat = 0.2,
+            Carbs = 98,
+            Protein = 0,
+            Iron = "2%",
+        },
+        new Dessert
+        {
+            Name = "Honeycomb",
+            Calories = 408,
+            Fat = 3.2,
+            Carbs = 87,
+            Protein = 6.5,
+            Iron = "45%",
+        },
+        new Dessert
+        {
+            Name = "Donut",
+            Calories = 452,
+            Fat = 25.0,
+            Carbs = 51,
+            Protein = 4.9,
+            Iron = "22%",
+        },
+        new Dessert
+        {
+            Name = "KitKat",
+            Calories = 518,
+            Fat = 26.0,
+            Carbs = 65,
+            Protein = 7,
+            Iron = "6%",
+        }
+    };
 
     private bool _singleSelect;
 
-    private IEnumerable<Dessert> _selected = new List<Dessert>();
-  }
+    private IEnumerable<string> _selected = new List<string>()
+    {
+        "Frozen Yogurt",
+    };
 
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/en-US.md
@@ -86,10 +86,13 @@ arrays to both `SortBy` and `SortDesc` to programmatically control the sorting,
 
 <masa-example file="Examples.components.data_tables.MultiSort"></masa-example>
 
-#### ShowSelect
+#### ShowSelect {updated-in=v1.7.0}
 
 The `ShowSelect` prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default
 row. You can also switch between allowing multiple selected rows at the same time or just one with the `SingleSelect` prop.
+The `ItemKey` prop is used to specify a unique identifier for rows, which is used for row selection.
+
+> In version 1.7.0, the `@bind-Selected` usage was added to replace `@bind-Value`, making it easier to set the default selected rows.
 
 <masa-example file="Examples.components.data_tables.RowSelection"></masa-example>
 

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/zh-CN.md
@@ -78,9 +78,12 @@ related:
 
 <masa-example file="Examples.components.data_tables.MultiSort"></masa-example>
 
-#### 行选择
+#### 行选择 {#showselect updated-in=v1.7.0}
 
 `ShowSelect` 属性将在默认表头中渲染一个复选框以切换所有行是否被选择，同时也为每个默认行渲染一个复选框。你还可以使用 `SingleSelect` 属性，指定能同时选择多行还是只能选择一行。
+`ItemKey` 属性用于指定行的唯一标识，也是行选择的依据。 
+
+> 在 v1.7.0 版本中，新增了 `@bind-Selected` 用法来代替 `@bind-Value`，更方便设置默认选中的行。
 
 <masa-example file="Examples.components.data_tables.RowSelection"></masa-example>