数据表格(DataTable)

一个使用Data属性绑定数据源的简单表格


下面例子中的数据模型

using System;
using System.Collections.Generic;
using System.Linq;
using BulmaRazor.Components;

namespace BulmaRazorServer.Pages.docs.components.datatable
{
    public enum Gender
    {
        Famle,
        Male
    }

    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public Gender Gender { get; set; }
        public DateTime Birthday { get; set; }

        public Person(int id, string name, int age, DateTime birthday, Gender gender)
        {
            Id = id;
            Name = name;
            Age = age;
            Birthday = birthday;
            Gender = gender;
        }

        public Person()
        {
        }


        //表示从后台获取数据
        static List<Person> allData;

        static Person()
        {
            allData = new List<Person>();
            for (int i = 0; i < 1983; i++)
            {
                allData.Add(new Person()
                {
                    Id = i,
                    Name = "name" + i,
                    Birthday = DateTime.Now.AddDays(-i),
                    Age = i + 2,
                    Gender = i % 3 == 0 ? Gender.Famle : Gender.Male
                });
            }
        }

        internal static IEnumerable<Person> GetPageData(string kw, int pageIndex, int pageSize, out int totalCount)
        {
            IEnumerable<Person> list = allData;
            if (!string.IsNullOrEmpty(kw))
            {
                list = allData.Where(x => x.Name.Contains(kw));
            }

            totalCount = list.Count();
            return list.Skip((pageIndex - 1) * pageSize).Take(pageSize);
        }
    }
}
Show Code

基础功能

Id名称年龄性别生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25
5name57Male2021-09-10 15:25
6name68Famle2021-09-09 15:25
7name79Male2021-09-08 15:25
8name810Male2021-09-07 15:25
9name911Famle2021-09-06 15:25

分页逻辑

Id名称年龄性别生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25

自定义列

Id名称自定义头-年龄性别生日空行操作
0name0 自定义列,年龄:2Famle2021-09-15 15:25
1name1 自定义列,年龄:3Male2021-09-14 15:25
2name2 自定义列,年龄:4Male2021-09-13 15:25
3name3 自定义列,年龄:5Famle2021-09-12 15:25
4name4 自定义列,年龄:6Male2021-09-11 15:25

列排

Id 名称 年龄 性别生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25

过滤

Id 名称 年龄性别 生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25

展开行(详细行)

Id名称年龄性别生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25

index列

Id名称年龄性别生日
10name02Famle2021-09-15 15:25
21name13Male2021-09-14 15:25
32name24Male2021-09-13 15:25
43name35Famle2021-09-12 15:25
54name46Male2021-09-11 15:25

单击选中行

Id名称年龄性别生日
0name02Famle2021-09-15 15:25
1name13Male2021-09-14 15:25
2name24Male2021-09-13 15:25
3name35Famle2021-09-12 15:25
4name46Male2021-09-11 15:25

多选行

Id名称年龄性别生日
0name02Famle2021-09-15
1name13Male2021-09-14

文档