EasyUI结合Sqlserver数据库实现一个分页显示数据

数据库 2018-06-02 05:16:56 阅读次数: 0

EasyUI大多数会被用在做后台的美化，以及数据的展示。

今天是六一儿童节，祝各位程序员们，儿童节快乐哈！

话不多说，我们开始正题。

先来看看我们这个小案例的项目目录：

App_Data中的四个文件是博主为了方便查看项目把他放在一起。

步骤一：我们编写了数据库脚本.sql文件，在sqlserver执行即可生产海量数据

use master
go
if db_id('EasyUIPageData') is not null
	drop database EasyUIPageData
go

create database EasyUIPageData
go

use EasyUIPageData
go

create table tbInfors 
(
  id int identity primary key,  --主键
  author varchar(256),          --作者
  title varchar(256),           --标题
  addTime datetime              --添加时间
)
go

declare @i int=1
declare @author varchar(200)
declare @title varchar(200)
while @i< 49999
begin
  set @title='第'+CONVERT(varchar,@i)+'条数据标题';
  set @author='第'+CONVERT(varchar,@i)+'个作者';
  insert into tbInfors (author,title,Addtime)
  values (@author,@title, getDate())
  set @i = @i + 1;
end
go

select count(*) from tbInfors
--truncate table T_Product

步骤二：我们编写相应的分页存储过程.sql,并执行

CREATE PROCEDURE [dbo].[GetDatasByPaging] 
	@pagesize int =10,--每页行数
    @pageindex int =0,--第几页
    @tablename varchar(200),--数据筛选的表或表的联合
    @orderstr varchar(100),--排序表达式
    @pk  varchar(20),--主键
    @columns varchar(600),--选择的列
    @filterstr varchar(200) --筛选条件
AS
BEGIN

	SET NOCOUNT ON
    Declare @sql nvarchar(1000) 
    set @sql='select  top '+ cast(@pagesize as VARCHAR(4))+ '  '+ @columns +' 
      from '+@tablename +'
        where('+ @pk +' not in(select  top '+ cast(@pageSize*@pageIndex as VARCHAR(20))+'  '+ @pk +'
        from '+ @tablename +' where '+ @filterstr+' order by '+ @orderstr +')) and '+ @filterstr +' order by '+ @orderstr
    print @sql
    execute(@sql) 
    SET NOCOUNT OFF
END

数据库里的目录如下：



步骤三：如下

我这里用的是三层，各层之间的引用如下：

Models:基础层；

DAL:数据访问层，需引用Models;

BLL:业务逻辑层，需引用Models,DAL;

Web:页面展示层，需引用Models,BLL;

添加好三层以及各层的引用后，让我们完成各层的操作。

EasyUI_Models里面添加实体类Info.cs

using System;

namespace EasyUI_Models
{
    /// <summary>
    /// 信息实体类
    /// </summary>
    public class Info
    {
        /// <summary>
        /// 编号
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 作者
        /// </summary>
        public string author { get; set; }
        /// <summary>
        /// 标题
        /// </summary>
        public string title { get; set; }
        /// <summary>
        /// 添加时间
        /// </summary>
        public DateTime addTime { get; set; }
    }
}

EasyUI_DAL里需添加DBHelper.cs和InfoDAL.cs

DBHelper.cs

using System.Configuration;//需引用
using System.Data;
using System.Data.SqlClient;

namespace MeiTao.DAL
{
    public class DBHelper
    {
        /// <summary>
        /// 静态配置文件读取链接字符串，在EasyUI_Web中的Web.config中设置
        /// </summary>
        private static string DBConnectString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        private static SqlConnection conn;
        private static SqlDataAdapter da;
        private static SqlCommand cmd;
        private static DBHelper dBHelper;

        public DBHelper()
        {
            conn = new SqlConnection(DBConnectString);
        }
        /// <summary>
        /// 实例化DBHelper对象
        /// </summary>
        /// <returns></returns>
        public static DBHelper Instance()
        {
            if (dBHelper == null)
            {
                dBHelper = new DBHelper();
            }
            return dBHelper;
        }
        /// <summary>
        /// 打开数据库连接
        /// </summary>
        void DBOpen()
        {
            if (conn.State == ConnectionState.Closed)
            {
                conn.Open();
            }
        }
        /// <summary>
        /// 关闭数据库连接
        /// </summary>
        void DBClose()
        {
            if (conn.State == ConnectionState.Open)
            {
                conn.Close();
            }
        }
        /// <summary>
        /// 执行SQL语句获取数据集
        /// </summary>
        /// <param name="sql">sql语句</param>
        /// <returns>DataTable数据集</returns>
        public DataTable GetDataTableBySql(string sql)
        {
            DBOpen();
            DataTable dt = new DataTable();
            da = new SqlDataAdapter(sql, conn);
            try
            {
                da.Fill(dt);
                return dt;
            }
            catch
            {
                return null;
            }
            finally
            {
                DBClose();
            }
        }
        /// <summary>
        /// 执行SQL语句
        /// </summary>
        /// <param name="sql">SQL语句</param>
        /// <returns>是否执行成功</returns>
        public bool ExcuteSql(string sql)
        {
            DBOpen();
            cmd = new SqlCommand(sql, conn);
            try
            {
                cmd.ExecuteNonQuery();
                return true;
            }
            catch
            {
                return false;
            }
            finally
            {
                DBClose();
            }
        }
        /// <summary>
        /// 执行存储过程
        /// </summary>
        /// <param name="proName">存储过程名称</param>
        /// <param name="paras">存储过程参数</param>
        /// <returns>是否执行成功</returns>
        public bool ExcuteProcedure(string proName, SqlParameter[] paras)
        {
            DBOpen();
            cmd = new SqlCommand(proName, conn);
            cmd.CommandType = CommandType.StoredProcedure;

            for (int i = 0; i < paras.Length; i++)
            {
                cmd.Parameters.Add(paras[i]);
            }
            try
            {
                cmd.ExecuteNonQuery();
                return true;
            }
            catch
            {
                return false;
            }
            finally
            {
                DBClose();
            }

        }
        /// <summary>
        /// 执行存储过程获得数据集
        /// </summary>
        /// <param name="proName">存储过程名</param>
        /// <param name="paras">存储过程参数</param>
        /// <returns>DataTable数据集</returns>
        public DataTable GetDataTableByProcedure(string proName, SqlParameter[] paras)
        {
            DBOpen();
            cmd = new SqlCommand(proName, conn);
            cmd.CommandType = CommandType.StoredProcedure;
            da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            for (int i = 0; i < paras.Length; i++)
            {
                cmd.Parameters.Add(paras[i]);
            }
            try
            {
                da.Fill(dt);
                return dt;
            }
            catch
            {
                return null;
            }
            finally
            {
                DBClose();
            }

        }

    }
}
EasyUI_Web层Web.config文件添加如下配置 
 <!--配置连接字符串-->
  <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="server=.;database=EasyUIPageData;uid=sa;pwd=123456;"/>
  </connectionStrings>

InfoDAL.cs

using EasyUI_Models;
using MeiTao.DAL;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace EasyUI_DAL
{
    public class InfoDAL
    {

        #region 方法一：使用存储过程，需要先查询记录行数，再查询表中数据
        /// <summary>
        /// 分页查询表中数据
        /// </summary>
        /// <param name="pageSize"></param>
        /// <param name="pageIndex"></param>
        /// <returns>分页查询结果</returns>
        public static List<Info> SelectByPaging(int pageSize, int pageIndex)
        {
            string proName = "GetDatasByPaging";
            SqlParameter[] paras = {
                new SqlParameter("@pagesize",pageSize),
                new SqlParameter("@pageindex",pageIndex),
                new SqlParameter("@tablename","tbInfors"),
                new SqlParameter("@orderstr","id asc"),
                new SqlParameter("@pk","id"),
                new SqlParameter("@columns","*"),
                new SqlParameter("@filterstr","1=1")
            };

            DataTable dt = DBHelper.Instance().GetDataTableByProcedure(proName, paras);

            List<Info> list = new List<Info>();

            if (dt != null)
            {
                foreach (DataRow dr in dt.Rows)
                {
                    Info info = new Info
                    {
                        id = int.Parse(dr["id"].ToString()),
                        author = dr["author"].ToString(),
                        title = dr["title"].ToString(),
                        addTime = DateTime.Parse(dr["addTime"].ToString())
                    };
                    list.Add(info);
                }
            }
            return list;
        }

        /// <summary>
        /// 获得所有记录行数
        /// </summary>
        /// <returns></returns>
        public static int SeletTotalCount()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("select count(1) from tbInfors");
            DataTable dt = DBHelper.Instance().GetDataTableBySql(sb.ToString());
            int count = 0;
            if (dt != null && dt.Rows.Count > 0)
            {
                count = int.Parse(dt.Rows[0][0].ToString());
            }
            return count;
        }
        #endregion

        #region 方法二：使用泛型存储数据库里所有数据
        /// <summary>
        /// 查询数据库里所有数据
        /// </summary>
        /// <returns></returns>
        public static List<Info> SelectAllData()
        {
            //string sql = "select * from tbInfors";
            StringBuilder sb = new StringBuilder();
            sb.Append("select * from tbInfors");
            
            DataTable dt = DBHelper.Instance().GetDataTableBySql(sb.ToString());

            List<Info> list = new List<Info>();

            if (dt != null)
            {
                foreach (DataRow dr in dt.Rows)
                {
                    Info info = new Info
                    {
                        id = int.Parse(dr["id"].ToString()),
                        author = dr["author"].ToString(),
                        title = dr["title"].ToString(),
                        addTime = DateTime.Parse(dr["addTime"].ToString())
                    };
                    list.Add(info);
                }
            }
            return list;
        }
        #endregion

    }
}

EasyUI_BLL需添加InfoBLL.cs

InfoBLL.cs

using EasyUI_DAL;
using EasyUI_Models;
using System.Collections.Generic;
namespace EasyUI_BLL
{
    public class InfoBLL
    {
        #region 方法一
        public static List<Info> GetByPaging(int pageSize, int pageIndex)
        {
            return InfoDAL.SelectByPaging(pageSize, pageIndex);
        }


        public static int GetTotalCount()
        {
            return InfoDAL.SeletTotalCount();
        }
        #endregion

        #region 方法二
        public static List<Info> GetAllData()
        {
            return InfoDAL.SelectAllData();
        }
        #endregion

    }
}

EasyUI_Web中先导入EasyUI资源:

添加传递数据页面Data.aspx,并删除除第一行的代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Data.aspx.cs" Inherits="EasyUI_Web.Data" %>

在该页面右键查看代码，写入下面后台代码：

其中要导入第三方插件Newtonsoft.json我们可以去百度里下载。

using EasyUI_BLL;
using EasyUI_Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;//方法二，用Skip,Take

namespace EasyUI_Web
{
    public partial class Data : System.Web.UI.Page
    {
        /*
         * 二种查询方法各有各的好处，
         * 方法一：使用了存储过程，用户先将数据从想要的部分数据获取出来，下一次想要查看其它数据，还得重新从数据库查一遍。这样做效率高，性能比较好。
         * 方法二：一次性查询数据库所有的数据，在我们需要显示相应数据的时候，直接拿出来用，不要再经过数据库，比较灵活但是，数据量过大的时候，初次加载会比较慢。
         * 推荐使用第一种方法
         */
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                
                //GetData();//方法一
                SimpleGetData();//方法二
            }
        }
        private void GetData()
        {
            //获取记录总数
            int totalCount = InfoBLL.GetTotalCount();
            //通过Request 根据分页参数，来获得分页数据
            //1.每页显示N条记录
            int rows = int.Parse(Request["rows"]);
            //2.当前是第X页
            int page = int.Parse(Request["page"]);   
            //3.获得分页记录
            List<Info> list = InfoBLL.GetByPaging(rows, page - 1);
            //4.返回Json格式的数据给easyui的DataGrid组件
            //这里的  new {total = totalCount,rows = list}是匿名集合，不能用变量接收。
            Response.Write(JsonConvert.SerializeObject(
                    new {
                            total =totalCount,
                            rows =list
                    }));
        }

        private void SimpleGetData()
        {
            //1.每页显示N条记录
            int rows = int.Parse(Request["rows"]);
            //2.当前是第X页
            int page = int.Parse(Request["page"]);
            List<Info> ins = InfoBLL.GetAllData();
            //new { total = ins.Count, rows = ins.Skip((page - 1) * rows).Take(rows) }为匿名集合，不能用变量来接收
            Response.Write(JsonConvert.SerializeObject(
                new {
                        total = ins.Count,
                        rows = ins.Skip((page - 1) * rows).Take(rows)
                        //(page-1)是因为，easyui里page默认从0开始
                        //Skip：获取所有数据，
                        //Take：获取想要的数据
                }));
        }
    }
}

再创建一个ShowData.html，该页面使用easyui的datagrid组件来接收并显示数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>分页显示数据</title>
    <link href="EasyUI/themes/black/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            $("#dg").datagrid({
                fit: true,//自动填充
                striped: true,//斑马线
                rownumbers: true,//行编号
                fitColumns: true, //自动填充列            
                url: 'Data.aspx',//远程加载数据
                pagination: true,//显示分页栏             
                columns: [[                   
                    { field: 'id', align: 'center', title: '编号',width: 80 },
                    { field: 'author', align: 'center', title: '作者', width: 80 },
                    { field: 'title', align: 'center', title: '标题', width: 80 },
                    { field: 'addTime', align: 'center', title: '添加时间', width: 80 }
                        ]]
            });
        });
    </script>
</head>
<body>
    <table id="dg"></table>
</body>
</html>

最后，我们看下最终的效果：



大功告成！

后面会不定时更新数据的增删改系列操作！

谢谢大家支持！

猜你喜欢

转载自blog.csdn.net/qq_33857502/article/details/80538252
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022