BulmaRazor

数据表格(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	名称	年龄	性别	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58
5	name5	7	Male	2024-10-20 18:58
6	name6	8	Famle	2024-10-19 18:58
7	name7	9	Male	2024-10-18 18:58
8	name8	10	Male	2024-10-17 18:58
9	name9	11	Famle	2024-10-16 18:58

<DataTable Data="data" TItem="Person" IsHoverable
           IsBordered IsStriped IsFullwidth>
    <ColumnsSlot>
        <DataTableColumn Label="Id" Prop="id"/>
        <DataTableColumn Label="名称" Prop="name"/>
        <DataTableColumn Label="年龄" Prop="AGE"/>
        <DataTableColumn Label="性别" Prop="Gender"/>
        <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
    </ColumnsSlot>
</DataTable>

@code{
    IEnumerable<Person> data;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        data = Person.GetPageData("", 1, 10, out int _);
    }

}

Id	名称	年龄	性别	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58

<LoadingContainer IsActive="@loading">
    <Field HasAddons>
        <Control>
            <Input @bind-Value="kw" placeholder="请输入名称关键字"/>
        </Control>
        <Control>
            <Button Color="Color.Info" @onclick="search">
                <Icon IconClass="fa fa-search"></Icon><span>搜索</span>
            </Button>
        </Control>
    </Field>
    <DataTable Data="data" TItem="Person" IsHoverable
               IsBordered IsStriped IsFullwidth>
        <ColumnsSlot>
            <DataTableColumn Label="Id" Prop="Id"/>
            <DataTableColumn Label="名称" Prop="Name"/>
            <DataTableColumn Label="年龄" Prop="Age"/>
            <DataTableColumn Label="性别" Prop="Gender"/>
            <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
        </ColumnsSlot>
        <EmptySlot>
            <Content>--没有数据--</Content>
        </EmptySlot>
    </DataTable>
    <Pagination TotalCount="totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
                NextText="下一页" PrevText="上一页" IsCentered/>
</LoadingContainer>

@code{
    bool loading = false;
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    string kw;
    IEnumerable<Person> data;
    //分页
    async Task onPage(int page)
    {
        pageIndex = page;
        await searchData();
    }

    async Task search()
    {
        pageIndex = 1;
        await searchData();
    }

    //查询后台数据
    async Task searchData()
    {
        loading = true;
        await Task.Delay(1000);
        data = Person.GetPageData(kw, pageIndex, pageSize, out int total);
        totalCount = total;
        loading = false;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await searchData();
    }

}

自定义列

视图
代码

Id	名称	自定义头-年龄	性别	生日
0	name0	自定义列,年龄：2	Famle	2024-10-25 18:58
1	name1	自定义列,年龄：3	Male	2024-10-24 18:58
2	name2	自定义列,年龄：4	Male	2024-10-23 18:58
3	name3	自定义列,年龄：5	Famle	2024-10-22 18:58
4	name4	自定义列,年龄：6	Male	2024-10-21 18:58

@inject ToastService ToastService
<DataTable Data="data" TItem="Person" IsNarrow IsHoverable
           IsBordered IsStriped IsFullwidth>
    <DataTableColumn Label="Id" Prop="Id"/>
    <DataTableColumn Label="名称" Prop="Name"/>
    <DataTableColumn ThClass="@B.TextCentered" TdClass="@B.TextDanger" Label="年龄" Prop="Age">
        <ThSlot>
            <strong>自定义头-年龄</strong>
        </ThSlot>
        <TdSlot>
            @{ var p = (Person) context; }
            自定义列,年龄：@p.Age
        </TdSlot>
    </DataTableColumn>
    <DataTableColumn Label="性别" Prop="Gender"/>
    <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
    <DataTableColumn Label="空行" Width="80"/>
    <DataTableColumn Label="操作" Width="180">
        <TdSlot>
            <Buttons HasAddons>
                <Button @onclick="() => OptFun((Person) context)" IsSmall Color="Color.Info">Edit</Button>
                <Button @onclick="() => OptFun((Person) context)" IsSmall Color="Color.Danger">Delete</Button>
            </Buttons>
        </TdSlot>
    </DataTableColumn>

</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

    private void OptFun(Person item)
    {
        ToastService.Show("自己实现逻辑");
    }

}

列排

视图
代码

Id	名称	年龄	性别	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58

<DataTable Data="data" TItem="Person" IsNarrow IsHoverable
           IsBordered IsStriped IsFullwidth>
    <DataTableColumn Sortable Label="Id" Prop="Id"/>
    <DataTableColumn Sortable SortFunc="sortFun" Label="名称" Prop="Name"/>
    <DataTableColumn Sortable Label="年龄" Prop="Age"/>
    <DataTableColumn Label="性别" Prop="Gender"/>
    <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

    //自定义排序
    object sortFun(object value)
    {
        var p = (Person) value;
        return p.Name.Length; //毫无意义的排序
    }

}

过滤

视图
代码

Id	名称 name0 name1 name2 name3 name4	年龄	性别 Famle Male	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58


    <DataTable Data="data" TItem="Person" IsNarrow IsHoverable
               IsBordered IsStriped IsFullwidth Color="Color.Danger">
        <DataTableColumn Sortable Label="Id" Prop="Id"/>
        <DataTableColumn Filterable Sortable Label="名称" Prop="Name"/>
        <DataTableColumn Label="年龄" Prop="Age"/>
        <DataTableColumn Sortable Filterable Label="性别" Prop="Gender"/>
        <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
    </DataTable>
    <Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
                NextText="下一页" PrevText="上一页" IsCentered IsSmall/>


@code{

    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

}

展开行(详细行)

视图
代码

Id	名称	年龄	性别	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58

<DataTable Data="data" TItem="Person" IsNarrow IsHoverable
           IsBordered IsStriped IsFullwidth>
    <ColumnsSlot>
        <DataTableColumn  IsExpand/>
        <DataTableColumn Label="Id" Prop="Id"/>
        <DataTableColumn Label="名称" Prop="Name"/>
        <DataTableColumn Label="年龄" Prop="Age"/>
        <DataTableColumn Label="性别" Prop="Gender"/>
        <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
    </ColumnsSlot>

    <ExpandSlot>
        <Box>
            <Title>详细行：</Title>
            <p>名称：@context.Name </p>
            <p>年龄：@context.Age </p>
            <p>生日：@context.Birthday.ToString("yyyy-MMMM-dd") </p>
        </Box>
    </ExpandSlot>
</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

}

index列

视图
代码

	Id	名称	年龄	性别	生日
1	0	name0	2	Famle	2024-10-25 18:58
2	1	name1	3	Male	2024-10-24 18:58
3	2	name2	4	Male	2024-10-23 18:58
4	3	name3	5	Famle	2024-10-22 18:58
5	4	name4	6	Male	2024-10-21 18:58

<DataTable Data="data" TItem="Person" IsNarrow IsHoverable
           IsBordered IsStriped IsFullwidth>
    <DataTableColumn IsIndex/>
    <DataTableColumn Label="Id" Prop="Id"/>
    <DataTableColumn Label="名称" Prop="Name"/>
    <DataTableColumn Label="年龄" Prop="Age"/>
    <DataTableColumn Label="性别" Prop="Gender"/>
    <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

}

单击选中行

视图
代码

Id	名称	年龄	性别	生日
0	name0	2	Famle	2024-10-25 18:58
1	name1	3	Male	2024-10-24 18:58
2	name2	4	Male	2024-10-23 18:58
3	name3	5	Famle	2024-10-22 18:58
4	name4	6	Male	2024-10-21 18:58

@inject BulmaRazorJsInterop JsInterop
<DataTable Data="data" TItem="Person" IsNarrow IsHoverable
           IsBordered IsStriped IsFullwidth IsSelectable OnSelected="SelectedHandle">
    <DataTableColumn Label="Id" Prop="Id"/>
    <DataTableColumn Label="名称" Prop="Name"/>
    <DataTableColumn Label="年龄" Prop="Age"/>
    <DataTableColumn Label="性别" Prop="Gender"/>
    <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    IEnumerable<Person> data;
    //分页
    void onPage(int page)
    {
        pageIndex = page;
        searchData();
    }

    //查询后台数据
    void searchData()
    {
        data = Person.GetPageData("", pageIndex, pageSize, out int total);
        totalCount = total;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        searchData();
    }

    async Task SelectedHandle(DataTableRow<Person> row)
    {
        await JsInterop.Alert("选中行ID:" + row.Item.Id);
    }

}

多选行

视图
代码

	Id	名称	年龄	性别	生日
	0	name0	2	Famle	2024-10-25
	1	name1	3	Male	2024-10-24

@inject ToastService ToastService

<Buttons HasAddons>
    <Button Color="Color.Danger" @onclick="() => t1.ClearCheckedRows()">Clear</Button>
    <Button Color="Color.Info" @onclick="() => t1.ToggleCheckedRows()">Toggle</Button>
    <Button Color="Color.Success" @onclick="() => showChecked()">Show Checked Count</Button>
</Buttons>

<DataTable @ref="t1" Data="data" TdClass="@B.TextCentered" ThClass="@B.TextCentered" TItem="Person"
            IsNarrow IsHoverable IsBordered IsStriped IsFullwidth>
    <DataTableColumn Width="100px" TItem="Person" IsCheckBox/>
    <DataTableColumn Label="Id" Prop="Id"/>
    <DataTableColumn Label="名称" Prop="Name"/>
    <DataTableColumn Label="年龄" Prop="Age"/>
    <DataTableColumn Label="性别" Prop="Gender"/>
    <DataTableColumn Label="生日" Format="yyyy-MM-dd" Prop="Birthday"/>
</DataTable>
<Pagination TotalCount="@totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
            NextText="下一页" PrevText="上一页" IsCentered IsSmall/>

@code{
    int pageIndex = 1;
    int pageSize = 2;
    int totalCount = 0;
    IEnumerable<Person> data;
    DataTable<Person> t1;
    void onPage(int page)
    {
        pageIndex = page;
        search();
    }
    
    void search()
    {
        data=Person.GetPageData("",pageIndex, pageSize, out int total);
        totalCount = total;
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        search();
    }
    
    //显示选中行
    async Task showChecked()
    {
        var rows = t1.GetCheckedRows();
        await ToastService.Show(new ToastOptions(){Message ="选中行数："+ rows.Count});
    }
}

文档