专栏首页阿炬.NETFineUIMvc表格数据库分页,使用CYQ.Data组件

FineUIMvc表格数据库分页,使用CYQ.Data组件

首先看下前台 View 的定义:

@(F.Grid()
    .EnableCheckBoxSelect(true)
    .Width(850)
    .ShowHeader(true)
    .ShowBorder(true)
    .EnableCollapse(true)
    .Title("表格")
    .ID("Grid1")
    .DataIDField("Id")
    .DataTextField("Name")
    .AllowPaging(true)
    .PageSize(5)
    .IsDatabasePaging(true)
    .OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1")
    .Columns(
        F.RowNumberField(),
        F.RenderField()
            .HeaderText("姓名")
            .DataField("Name")
            .Width(80),
        ......
    )
    .RecordCount(ViewBag.Grid1RecordCount)
    .DataSource(ViewBag.Grid1DataSource)
)

和 WebForms 中的类似,我们同样需要设置一些属性来启用数据库分页:

1. AllowPaging(true):启用分页

2. IsDatabasePaging(true):启用数据库分页

3. PageSize(5):每页记录数

4. OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1"):分页切换事件,需要回发到后台重新绑定表格数据

后台Controller,传递DataTable类型数据集和记录的总数

            int total = 0;
            ViewBag.Grid1DataSource = DBFast.Select<db_wxuser>(1, 10,  "IsDel=0", out total);
            ViewBag.Grid1RecordCount = total;

翻页事件

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Grid1_PageIndexChanged(JArray Grid1_fields,int Grid1_pageIndex)
        {
            var total = 0;
            var dataSource = DBFast.Select<db_wxuser>(Grid1_pageIndex+1, 10, "IsDel=0", out total);

            var grid1 = UIHelper.Grid("Grid1");
            grid1.RecordCount(total);
            grid1.DataSource(dataSource, Grid1_fields);

            return UIHelper.Result();
        }

注意,控制器方法的两个参数名称是约定好的,如果前台通过控件ID的方式来传入自定义回发参数时:

OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1")

后台接受请求的参数名约定为:

1. 表格控件ID_pageIndex:表格当前分页序号

2. 表格控件ID_fields:表格用到了哪些表格字段(如果不是表格,是IEnumrable<Class>对象,则对应于类属性列表),这个值在数据绑定时需要用到。

为什么需要 Grid1_fields 参数?

很多网友会有这个疑问,其实理解起来也很简单。因为表格可能存在很多字段,假设有 100 个,可能只有其中的 10 个字段表格用到了。那么数据绑定时只返回这 10 个字段的数据。

假设数据绑定时没有传入这个参数,也是可以运行的,只不过会返回很多冗余数据,也可能会造成关键数据泄密(比如密码等)。

最后,我们看下 MVC 中,分页回发的请求正文:

响应正文:

F.ui.Grid1.setRecordCount(22);
F.ui.Grid1.loadData([
    [106, "张博", 1, 2003, true, "财务管理", 3, "2017-01-13T07:22:51Z"],
    [107, "杨倩倩", 0, 2000, false, "材料物理与化学", 4, "2017-01-23T07:22:51Z"],
    [108, "董超", 1, 2004, false, "生物医学工程", 4, "2017-02-02T07:22:51Z"],
    [109, "张娟娟", 0, 2003, true, "材料物理与化学", 5, "2017-02-12T07:22:51Z"],
    [110, "叶鹏", 1, 2006, false, "电子商务", 5, "2017-02-22T07:22:51Z"]
]);
F.ui.Grid1.clearSelection();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 周末大料|CMU研发数据库调优AI,水平超DBA老炮

    这个周末,最不开心的应该是优秀的数据库管理员了。 这些优秀的数据库管理员(以下简称数据库管理员为DBA),原本可以靠自己的本事,享受高薪,可是,好景不长了,因为...

    AI科技大本营
  • phpstudy升级mysql5.7以及遇到的问题汇总

    最近学习java的时候建数据库,用到了create_time和update_time,我想设置成current_time,但是在mysql5,7之前貌似不支持...

    听城
  • 这么多年银行都在去IOE,这家凭什么最先做到?

    “棱镜门事件”已过去三年,它给人类带来的信息安全和个人隐私方面的警醒至今依然在产生着作用,各国政府和企业在重新审视信息安全策略之后正纷纷采取行动。 中国的动作...

    罗超频道
  • 程序员进阶之算法练习(四)

    前言 我认为的编程能力: 基础知识:数据库、操作系统、网络原理等; 编码能力:软件架构(MVVM、MVP)、设计模式、编程语言(C、JAVA、C++)等;...

    落影
  • xss防御

    XSS攻击:跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故...

    听城
  • 全文来了!打败DBA老炮,机器学习如何改变数据库管理系统

    作者 | Dana Van Aken、Andy Pavlo、Geoff Gordon 编译 | AI100 数据库管理系统(DBMSs)是所有数据密集型应用的...

    AI科技大本营
  • 首发 | 微信成功挑战10亿人聊天记录的背后,核心技术原来是它

    翻译 | AI科技大本营(rgznai100) 参与 | Shawn,周翔 作为数据库领域的顶级会议,VLDB (Very Large Data Base)是数...

    AI科技大本营
  • ASP.net数据库相关操作

    这是asp一个web相关代码,包括exp1.aspx主文件,修改页面UserEdit.aspx,以及登陆界面login.aspx. 原始代码---百度云 任务...

    东风冷雪
  • 串匹配算法

    问题:给定二个字符串S和T,在主串S中查找子串T的过程称之为字符串匹配问题(string matching,也称之为模式匹配)。在文本处理系统,操作系统,编译系...

    东风冷雪
  • Swift学习笔记

    这是一篇学习swift的笔记 Objective-C是很好的语言,Runtime机制、消息机制等也是爱不释手。 Swift一直在更新,闲暇时间学一遍。学习的B...

    落影

扫码关注云+社区

领取腾讯云代金券