zoukankan      html  css  js  c++  java
  • BootstrapBlazor 组件库使用体验---Table篇

    原文地址:https://www.cnblogs.com/ysmc/p/13323242.html

      Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架:

    1. 使用 C# 代替 JavaScript 来创建丰富的交互式 UI(不能完全替代,现阶段还是离不开JavaScript,只是减少使用)。
    2. 共享使用 .NET 编写的服务器端和客户端应用逻辑。
    3. 将 UI 呈现为 HTML 和 CSS,已支持众多浏览器,其中包括移动浏览器。

      本文将使用基于Blazor的开源Blazor UI 组件库BootstrapBlazor,该组件库项目在Gitee上开源,传送门

      项目演示(及文档)地址:Bootstrap Blazor 演示网站

      更新记录

        2020.08.07

          1、使用Table组件页面代码再一次精简,高级搜索若无自定义,组件将尝试进行生成,只需在列信息绑定时通过设置 Searchable 属性即可开启该功能;

          2、完善全局搜索功能与排序功能;

        2020.08.11

          1、新增权限验证,访问无权限页面跳转至“提示页面”;

          2、新增账号admin、user,admin为管理员,user为普通用户;

        2020.08.14 

          1、集成BootstrapAdmin项目(传送门)作为后台管理系统,主要管理用户权限;

        2020.11.19

          1、项目升级至 .NET 5;

    废话不多说,直接开始;

      项目演示地址(该Demo实现的功能不多,将会持续更新,增加新功能):菜Dog之家

      用户名:user、admin,密码:123789

      登录界面

     首页

      

     首页中的table使用的就是BootstrapBlazor中的Table组件,该组件包含:

    1. 工具栏,可自定义

    2. 全局搜索与高级搜索

       


    3. 分页功能

    4. 自动根据字段类型生成过滤功能

      过滤条件同样是根据属性的类型去生成对应的数据组件,如我添加一个Datetime类型的属性


        

    5. 自动生成新建、编辑模态框

      Table组件会根据你的Model,尝试生成数据编辑窗口,并且根据属性类型生成对应的数据组件


        

    6. 双击行打开编辑模态框

    7. 代码量少,非常精简

      2020.08.07,使用Table组件页面代码再一次精简,高级搜索若无自定义,组件将尝试进行生成,只需在列信息绑定时通过设置 Searchable 属性即可开启该功能以下就是该Table页面的全部代码,囊括了以上6点的所有功能,你只需关注与数据的获取即可

      

     1 <Table TItem="BlazorApp.DataAccess.Models.Navigations"
     2        PageItemsSource="@PageItemsSource"
     3        IsMultipleSelect="true" IsPagination="true" IsStriped="true" IsBordered="true"
     4        ShowToolbar="true" ShowSearch="true" ShowCheckboxText="true" ShowExtendButtons="true"
     5        AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
     6        SearchModel="@SearchModel"
     7        OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
     8        OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
     9     <TableColumns>
    10         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ID" />
    11         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ParentId" />
    12         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Order" />
    13         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Name" />
    14         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Url" />
    15         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Icon" />
    16         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Application" />
    17         <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.CreationTime" />
    18     </TableColumns>
    19 </Table>

    ......文笔有限,慢慢补上

    Bootstrap of Blazor

  • 相关阅读:
    Spring Boot 使用 Micrometer 集成 Prometheus 监控 Java 应用性能
    Prometheus 通过 consul 实现自动服务发现
    Prometheus 通过 consul 分布式集群实现自动服务发现
    使用 PushGateway 进行数据上报采集
    AlertManager 之微信告警模板,UTC时间错8个小时的解决办法
    Prometheus 监控报警系统 AlertManager 之邮件告警
    Elasticsearch:使用 IP 过滤器限制连接
    Elasticsearch:创建 API key 接口访问 Elasticsearch
    Elasticsearch:反向代理及负载均衡在 Elasticsearch 中的应用
    Kibana:如何周期性地为 Dashboard 生成 PDF Report
  • 原文地址:https://www.cnblogs.com/ysmc/p/13323242.html
Copyright © 2011-2022 走看看