ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

2020-12-03 20:04:30  阅读:294  来源: 互联网

标签:显示 Bootstrap 搞定 BootstrapBlazor 设置 Table 组件 数据格式


Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期,节约开发成本。目前已经开发、封装了 70 多个组件,欢迎有兴趣的同学试用。

Gitee 开源地址为:https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 开源地址为:https://github.com/ArgoZhang/BootstrapBlazor

在线演示网站:https://www.blazor.zone

前言

Table(表格)组件应该是做管理型网站开发的核心组件了,通过 Table 可以衍生出非常多的功能,上一章节对 Table自定义模板列进行了介绍,本章详细介绍 Table 组件列的其他属性以及用法。

列数据格式

在实际开发中有时候数据库存储的是时间,而现实的时候为了美化需要显示为年月日,在 BootstrapBlazor 组件中自定义类模板功能非常简单,代码如下:

<TableColumn @bind-Field="@context.DateTime" Width="180" FormatString="yyyy-MM-dd" />

小技巧
通过设置 Width 宽度与 FormatString 来设置格式与宽度,达到完美效果

上例中是时间类型的字段,那要是其他类型的如何处理呢?

BootstrapBlazor 组件额外提供了一个回调委托 Formatter 函数,如下例中利用这个回调委托函数将数字类型的属性格式化为带两位小数点格式

<TableColumn @bind-Field="@context.Count" Formatter="@IntFormatter" />

@code {
    protected Task<string> IntFormatter(object? d)
    {
        var data = (int?)d;
        return Task.FromResult(data?.ToString("0.00") ?? "");
    }      
}

是不是非常简单?效果图如下:

列数据对齐方式

列绑定时通过指定 Align 属性设置对齐方式,代码如下:

<TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />

搞定!!!效果图如下:

根据屏幕宽度自适应显示/隐藏列

想不想有一种 Table iPad 看的时候显示 6 列,电脑看的时候显示 10 列?是不是很神奇的需求?没问题,BootstrapBlazor 的王者组件 Table 满足您的变态需求,我们来看看代码

<TableColumn @bind-Field="@context.Count" ShownWithBreakPoint="BreakPoint.Large" Width="60" />

眼见的小伙伴一下子就看到了一个属性 ShownWithBreakPoint 这个属性是一个枚举类型的

  • None 未设置均显示
  • Small 屏幕大于等于 576px 时显示
  • Medium 屏幕大于等于 768px 时显示
  • Large 屏幕大于等于 992px 时显示
  • ExtraLarge 屏幕大于等于 1200px 时显示

通过这个简单的属性是不是实现您的变态需求呢?就是这么简单!!!

特别注意

由于 BootstrapBlazorTable 组件已经自动侦测了移动端,在移动端设备上使用 Table 组件时默认是无法获得行列这种呈现方式的,需要显式设置渲染模式为 Table RenderModel="TableRenderModel.Table"

自定义显示/隐藏列

攻城狮又开始抱怨表格中列太多了,怎么显示都不好看。BootstrapBlazor 自定义显示列功能拯救你,比如一共 10 列,但是主要的可能有 6 列默认显示出来,其余四列做到控制按钮中,供使用者自行调出来,岂不美哉!

<TableColumn @bind-Field="@context.Count" Visible="false" />

什么?就一个 Visible="false" 就搞定了?是的,就是这样的简单,通过设置 Table 组件的 ShowColumnList="true" 使表格工具栏中出现列控制按钮就搞定啦。真的是灰常的简单。

列拖动

列太窄了,能不能我自己拖动列宽啊?能!!!BootstrapBlazor 的王者组件 Table 肯定能啊,怎么设置呢?

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource" AllowResizing="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" />
    </TableColumns>
</Table>

通过设置 AllowResizing="true" 就搞定啦

额外收获

某列数据太多啦,折行也不好,能不能自动截取啊?拖动时自动展现更多的数据呢?请看效果如下

是不是非常的心动,如果做到这个效果呢?复杂吗?非常的简单,只需要设置 AllowResizing="true" 的同时,在地址列上设置 TextEllipsis 就搞定啦,ShowTips="true" 设置鼠标悬浮时显示全部数据,是不是非常的贴心 ,请查看代码如下

<Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
        <TableColumn @bind-Field="@context.Name" Text="姓名" />
        <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" />
        <TableColumn @bind-Field="@context.Complete">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

有兴趣学习 Blazor 的请加 QQ 群 795206915

更多列相关技巧请查看 BootstrapBlaozr 演示,下一篇讲解列数据格式介绍

标签:显示,Bootstrap,搞定,BootstrapBlazor,设置,Table,组件,数据格式
来源: https://www.cnblogs.com/argozhang/p/14081223.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有