在线编辑页面功能实现（FineUI开发一）

最新推荐文章于 2025-06-28 14:32:31 发布

原创最新推荐文章于 2025-06-28 14:32:31 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

FineUI数据库环境专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用FineUI网格控件结合LINQ实现数据展示、排序及分页功能。通过具体代码示例展示了如何从数据库获取数据并显示在网格中，同时支持前端排序和调整每页显示的记录数。

FineUI的框架使用环境：FineUI免费版，VS2019，Entity Framework 6.2.0

自开发的平台中，有一个在线编辑的页面，点“新增”数据可以像excel一样编辑，编辑完成后点保存，可以直接保存到数据库里。

页面的截图如下：

一、我们来看看数据库查询的数据怎么到网格控件中：

1、用LINQ把全部数据查询出来。

2、统计总条数，用LINQ的分页功能，拿到第一页的数据，把第一页的数据显示到网格工具中。

 private void BindGrid()
        {          
             
                // 1.控件设置总项数（特别注意：数据库分页一定要设置总记录数RecordCount）
                var allpages = from c in po.pdadb.JK select c;

                // 2.总记录数RecordCount 
                Grid1.RecordCount = allpages.Count();

                // 3.排序和分页数据           
                var onepage = allpages.OrderBy(Grid1.SortField + " " + Grid1.SortDirection).Skip(Grid1.PageIndex * Grid1.PageSize).Take(Grid1.PageSize);


                // 4. 绑定到Grid  
                Grid1.DataSource = onepage;
                Grid1.DataBind();                

        }

二、看看同排序相关的代码设置：

1、在HTML中指定网格控件的排序响应函数Grid1_Sort()

2、在每一个字段的定义中，声明这个字段点一下可以排序。

3、后台响应函数Grid1_Sort()，调用BindGrid取新的数据函数，刷新当前页面。

 protected void Grid1_Sort(object sender, GridSortEventArgs e)
        {       
            BindGrid();
        }

三、调整每页分页的记录

有时候，我们需要调整每页的记录数，这样可以看得更多。

1、先在HTML中定义网格控件可以选15、30、50、100条每页四种选项。

2、服务器后台的响应函数：


        //这个函数是点击切换页数后的响应，在没有选择条件和查询按钮的页面（比如编辑页面），这里应该把BindGrid刷新加上
        protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
        {
            Grid1.PageSize = Convert.ToInt32(ddlPageSize.SelectedValue);
            BindGrid();
        }

这里直接使用的BindGrid(),重新读取数据并刷新，因为这个在线编辑页面没有查询按钮。

在其它有查询按钮的页面，是不需要调用BindGrid()。

未完，待续。。。