Bootstrap Blazor Table 组件(二)
原文链接: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 组件(二)的更多相关文章
- Bootstrap Blazor Table 组件(四)自定义列生成
原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...
- Bootstrap Blazor Table 组件(三)智能生成
原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 ...
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行
今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...
- Bootstrap入门(十二)组件6:导航标签页
Bootstrap入门(十二)组件6:导航标签页 1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单 先引入本地的CSS文件和JS文件(注:1. ...
随机推荐
- 6月12日 python学习总结 框架
1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...
- 4月16日 python学习总结 封装之property、多态 、classmethod和staticmethod
一.封装之property @property把一个函数伪装成一个数据类型 @伪装成数据的函数名.setter 控制该数据的修改,修改该数据时触发 @伪装成数据的函数名.delect 控制该数 ...
- JavaScript 函数 (一 JavaScript 函数的声明与使用)
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数的声明与使用 实例 <!DOCTYPE html> <html> <head> ...
- SQL获取当前时间(日期)
--获取当前日期(如:yyyymmdd)select CONVERT (nvarchar(12),GETDATE(),112) --获取当前日期(如:yyyymmdd hh:MM:ss)select ...
- RestTemplate踩坑 之 ContentType 自动添加字符集
写在前边 最近在写 OAuth2 对接的代码,由于授权服务器(竹云BambooCloud IAM)部署在甲方内网,所以想着自己 Mock 一下授权方的返回体,验证一下我的代码.我这才踩到了坑-- 故事 ...
- TTL、RS232、RS485、UART、串口的关系和常见半双工、全双工协议
串口(UART口).COM口.USB口.DB9.DB25是指的物理接口形式(硬件) TTL.RS-232.RS-485是指的电平标准(电平信号) 我们单片机嵌入式常用的串口有三种(TTL/RS-2 ...
- vue中TinyMCE图片 “data-mce-src” 属性的问题
1.问题 在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个"data-mcee-src" 属性,而保存时实际也是保存的"data-mc ...
- Xml 映射文件中,除了常见的 select|insert|updae|delete 标签之外,还有哪些标签?
<resultMap>.<parameterMap>.<sql>.<include>. <selectKey>,加上动态 sql 的 9 个 ...
- synchronized 关键字的用法?
synchronized 关键字可以将对象或者方法标记为同步,以实现对对象和方法的互 斥访问,可以用 synchronized(对象) { - }定义同步代码块,或者在声明方法时 将 synchron ...
- 访问修饰符 public,private,protected,以及不写(默认) 时的区别?
修饰符 当前类 同 包 子 类 其他包 public √ √ √ √ protecte d √ √ √ × default √ √ × × private √ × × × 类的成员不写访问修饰时默认为 ...