原文链接:https://www.cnblogs.com/ysmc/p/16128206.html  

很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求:

  我怎么在代码中重新加载Table组件的数据?

  然后小伙伴们都不约而同的想方设法去调用 OnQueryAsyc 函数,结果都卡在了 QueryPageOptions options 这个参数怎么传的问题上,直接 new 一个吧,是一个好想法,但是这么调用跟 Table 组件是一点关系没有,一样无法达到 “重新加载Table组件的数据”的期望

private Task<QueryData<ITem>> OnQueryAsync(QueryPageOptions options)
{
// 设置记录总数
var total = Items.Count(); return Task.FromResult(new QueryData<ITem>()
{
Items = Items,
TotalCount = total
});
}

  那我们需求怎么做才能达到 “重新加载Table组件的数据” 这个期望呢?其实非常简单,因为我们是要刷新 Table 组件的数据,那我们首先肯定是需要拿到 Table 组件这个实例,这里我们用到了 @ref,这个是 razor 的东西,不清楚的小伙伴可以先去看看下面这两个链接:

ASP.NET Core 的 Razor 语法参考 | Microsoft Docs

使用 Blazor 生成可重用的 UI 组件 | Microsoft Docs

下面是完整的代码展示

razor页面

<Button OnClick="@OnRefreshTableAsync">刷新Table</Button>

<Table TItem="TItem"
@ref="@Table"
AutoGenerateColumns="true"
OnQueryAsync="@OnQueryAsync">
</Table>

razor.cs

主要就是 OnRefreshTableAsync 函数

[NotNull]
private Table<TItem>? Table { get; set; } private async Task OnRefreshTableAsync()
{
await Table.QueryAsync();
} private Task<QueryData<TItem>> OnQueryAsync(QueryPageOptions options)
{
var total = Items.Count(); return Task.FromResult(new QueryData<TItem>()
{
Items = Items,
TotalCount = total
});
}

写在最后

  希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!

star流程:

1、访问点击项目链接:BootstrapBlazor   

2、点击star,如下图,即可完成star,关注项目不迷路:

另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:

  BootstrapAdmin 项目地址:
  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:
  https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群(QQ)欢迎加群讨论

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

Bootstrap Blazor Table 组件(二)的更多相关文章

  1. Bootstrap Blazor Table 组件(四)自定义列生成

    原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...

  2. Bootstrap Blazor Table 组件(三)智能生成

    原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 ...

  3. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

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

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

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

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

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

  7. Bootstrap Blazor 组件库 Row 布局组件(栅格系统)

    原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...

  8. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

  9. Bootstrap入门(十二)组件6:导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

随机推荐

  1. 6月12日 python学习总结 框架

    1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...

  2. 4月16日 python学习总结 封装之property、多态 、classmethod和staticmethod

    一.封装之property @property把一个函数伪装成一个数据类型  @伪装成数据的函数名.setter   控制该数据的修改,修改该数据时触发 @伪装成数据的函数名.delect  控制该数 ...

  3. JavaScript 函数 (一 JavaScript 函数的声明与使用)

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数的声明与使用 实例 <!DOCTYPE html> <html> <head> ...

  4. SQL获取当前时间(日期)

    --获取当前日期(如:yyyymmdd)select CONVERT (nvarchar(12),GETDATE(),112) --获取当前日期(如:yyyymmdd hh:MM:ss)select ...

  5. RestTemplate踩坑 之 ContentType 自动添加字符集

    写在前边 最近在写 OAuth2 对接的代码,由于授权服务器(竹云BambooCloud IAM)部署在甲方内网,所以想着自己 Mock 一下授权方的返回体,验证一下我的代码.我这才踩到了坑-- 故事 ...

  6. TTL、RS232、RS485、UART、串口的关系和常见半双工、全双工协议

    串口(UART口).COM口.USB口.DB9.DB25是指的物理接口形式(硬件) TTL.RS-232.RS-485是指的电平标准(电平信号)   我们单片机嵌入式常用的串口有三种(TTL/RS-2 ...

  7. vue中TinyMCE图片 “data-mce-src” 属性的问题

    1.问题 在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个"data-mcee-src" 属性,而保存时实际也是保存的"data-mc ...

  8. Xml 映射文件中,除了常见的 select|insert|updae|delete 标签之外,还有哪些标签?

    <resultMap>.<parameterMap>.<sql>.<include>. <selectKey>,加上动态 sql 的 9 个 ...

  9. synchronized 关键字的用法?

    synchronized 关键字可以将对象或者方法标记为同步,以实现对对象和方法的互 斥访问,可以用 synchronized(对象) { - }定义同步代码块,或者在声明方法时 将 synchron ...

  10. 访问修饰符 public,private,protected,以及不写(默认) 时的区别?

    修饰符 当前类 同 包 子 类 其他包 public √ √ √ √ protecte d √ √ √ × default √ √ × × private √ × × × 类的成员不写访问修饰时默认为 ...