01.手把手教你 .Net EasyUI DataGrid(创建数据表格)

来源：互联网发布：格林斯潘知乎编辑：程序博客网时间：2024/05/22 00:43

这是我的第一篇CSND博客文章，最近一直在学习EasyUI，这个插件官方的教程是基于PHP的后台，而我是学习.NET的，所以希望通过自己的整理与与汇总能够帮助到，.Net的想使用EasyUI的人！

准备工具：

1.jQuery EasyUI 1.4.5版本离线教程

2.jQuery EasyUI 1.4.5插件

下面是通过JQuery的方式添加一个DataGrid的步骤：

（1）新建一个webfrom窗体，添加jQuery EasyUI的相关引用，用JQuery的方式添加DataGrid

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridLoadDataFormSql.aspx.cs" Inherits="web.Test.DataGridLoadDataFormSql" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="../js/jquery-1.7.1.min.js"></script>    <script src="../EasyUI/jquery.min.js"></script>    <script src="../EasyUI/jquery.easyui.min.js"></script>    <link href="../EasyUI/themes/icon.css" rel="stylesheet" />    <script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>    <link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />    <script type="text/javascript">        $(function () {            $('#tb1').datagrid({                url:'../Test/GetDataFormSql.ashx',                width: 400,                title: '设备管理',                method:'get',                columns: [[                    { field: 'numID', title: '设备编号', width: 150 },                    { field: '型号', title: '型号', width: 150 },                    { field: '单价', title: '价格', width: 100 }                ]],                pagination: true,                pageSize:5,                pageList:[5,10,15]            })        })    </script></head><body>    <form id="form1" runat="server">    <div>    <table id="tb1"></table>    </div>    </form></body></html>

属性：
url:一个URL从远程站点请求数据。可以理解为从一个位置获取Json格式的数据

title：标题。

method：向后台请求的方式，get或者post。

columns：DataGrid列配置对象固定格式如下：

                columns: [[                    { field: 'numID', title: '设备编号', width: 150 },                    { field: '型号', title: '型号', width: 150 },                    { field: '单价', title: '价格', width: 100 }                ]]

field:数据库的列字段。

pagination:为true,表示添加分页控件

pageSize:在设置分页属性的时候初始化页面大小。

pageList:在设置分页属性的时候初始化页面大小选择列表。

效果图1-1如下：

可是我们要怎么样加载数据到DataGrid呢？

使用谷歌浏览器，F12查看XHR，我们会发现DataGrid会通过get的方式传递两个参数到后台，如图1-2：

page:1说明当前页为1，

rows:5每一页显示5条记录

通过这两个参数我们可以在数据库查询数据了：

（2）数据库分页查询

查询语句

SELECT * FROM ( SELECT ROW_NUMBER() OVER (order by T.ID asc)AS Row, T.* from tb_equipment T ) TT WHERE TT.Row between 1 and 10

那么我们在后台调用查询方法的时候，通过startIndex与endIndex查询两者间的记录

所以新建一个一般处理程序，接收前台传来的page与rows,根据这两个参数查询不同页码的数据：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;namespace web.Test{    /// <summary>    /// GetDataFormSql 的摘要说明    /// </summary>    public class GetDataFormSql : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";                        int page=1,rows=10;            //EasyUI自带的两个参数rows与page ,表示当前页与行数            if (context.Request.QueryString["rows"] != null)            {                rows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());            }            if (context.Request.QueryString["page"] != null)            {                page = int.Parse(context.Request.QueryString["page"].ToString().Trim());            }            //查询分页 stratIndex endIndex            int stratIndex, endIndex;            stratIndex = (page - 1) * rows + 1;            endIndex = page * rows;            //查询数据库            HelperClass.SqlHelper sqlhelper = new HelperClass.SqlHelper();            //获取查询数据的行数            int count = sqlhelper.EUGetRecordCount();            //封装数据到dataset            DataSet ds= sqlhelper.GetListByPage(stratIndex, endIndex);            //将dataset转化为Json格式            string strToJon = HelperClass.ToJson.DatasetJson(ds, count);            context.Response.Write(strToJon);            context.Response.End();        }        public bool IsReusable        {            get            {                return false;            }        }    }}

我们回头看图1-1，发现右下角有一个“共5条记录“，它是用来记录我们从数据库查询到的记录总数，

以下是数据库帮助文件，

    public class SqlHelper    {        protected static readonly string conStr = @"Data Source=.;Database=db_equipment;uid=sa;pwd=123456";        /// <summary>        /// 将数据填充到dataset        /// </summary>        /// <param name="sqlcon">查询语句</param>        /// <returns>返回一个dataset</returns>        public DataSet Query(string sqlcon)        {            using (SqlConnection conn = new SqlConnection(conStr))            {                DataSet ds = new DataSet();                try                {                    conn.Open();                    SqlDataAdapter dapter = new SqlDataAdapter(sqlcon, conn);                    dapter.Fill(ds, "ds");                }                catch (System.Data.SqlClient.SqlException ex)                {                    throw new Exception(ex.Message);                }                return ds;            }        }        public static object GetSingle(string SQLString)        {            using (SqlConnection connection = new SqlConnection(conStr))            {                using (SqlCommand cmd = new SqlCommand(SQLString, connection))                {                    try                    {                        connection.Open();                        object obj = cmd.ExecuteScalar();                        if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))                        {                            return null;                        }                        else                        {                            return obj;                        }                    }                    catch (System.Data.SqlClient.SqlException e)                    {                        connection.Close();                        throw e;                    }                }            }        }        /// <summary>        ///         /// </summary>        /// <param name="strWhere"></param>        /// <param name="sqltable"></param>        /// <returns></returns>        public int EUGetRecordCount()        {            StringBuilder strSql = new StringBuilder();            strSql.Append("select count(1) FROM tb_equipment ");            object obj = GetSingle(strSql.ToString());            if (obj == null)            {                return 0;            }            else            {                return Convert.ToInt32(obj);            }        }        /// <summary>        /// 查询分页数据，封装到dataset        /// </summary>        /// <param name="startIndex"></param>        /// <param name="endIndex"></param>        /// <returns></returns>        public DataSet GetListByPage(int startIndex, int endIndex)        {            StringBuilder strSql = new StringBuilder();            strSql.Append("SELECT * FROM ( ");            strSql.Append(" SELECT ROW_NUMBER() OVER (");                strSql.Append("order by T.ID  asc");            strSql.Append(")AS Row, T.*  from tb_equipment " + " T ");            strSql.Append(" ) TT");            strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);            return Query(strSql.ToString());        }    }

那么得到的数据是DateSet的，而DataGrid只识别Json格式的数据，

下面是一个将DataSet转化为Json的帮助类：

    public class ToJson    {        #region DataSet转换成Json格式        /// <summary>        /// DataSet转换成Json格式          /// </summary>          /// <param name="ds">DataSet</param>         /// <returns></returns>          public static string DatasetJson(DataSet ds, int total = -1)        {            StringBuilder json = new StringBuilder();            foreach (DataTable dt in ds.Tables)            {                json.Append("{\"total\":");                if (total == -1)                {                    json.Append(dt.Rows.Count);                }                else                {                    json.Append(total);                }                json.Append(",\"rows\":[");                json.Append(DataTableJson(dt));                json.Append("]}");            } return json.ToString();        }}

其中total：总记录数，在分页控件创建时初始的值。

在ToJson类中，"total":"total",后一个total是方法传过来的，是我们将数据库查询到的总记录数传到Json对象中，在由其传给DataGrid的total方法接收

也就是这句代码：string strToJon = HelperClass.ToJson.DatasetJson(ds, count);

所有的代码都给出了，看看运行效果，图1-3：

2 0