jQuery easyUI datagrid绑定数据库

最新推荐文章于 2019-06-29 21:49:41 发布

chu_叶子

最新推荐文章于 2019-06-29 21:49:41 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014671607/article/details/79814314

这篇博客介绍了如何在前端使用jQuery easyUI的datagrid组件绑定数据库数据。主要步骤包括创建.ashx处理文件，连接数据库获取数据表，将数据转换为JSON并返回给前端页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里给出简单的数据绑定代码，在前端页面的代码编写中，其实要注意的地方不是很多，利用jQuery easyUI 提供的API 就可以写出来了，主要是后台应用程序的写法，数据的绑定都是可以在这里完成的，所以对于处理一般应用程序的时候我是这样考虑的：

1、创建一个相关的.ashx文件是必须的，

2、成功连接数据库，获取数据里的数据表的内容（注意，这里要获得数据库的相应的表dataTable，然后还要获得表的行数DataTable.rows.count）

3、将dataTable数据转化为JSON数据，返回给前台页面

前端代码（.aspx）：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>

<!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>
     <link href="easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/themes/icon.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/shine.js"></script>
    <script type="text/javascript">  
        $(function () {  
            $('#tb1').datagrid({  
                url:'ashx/GetDataFormSql.ashx',  
                width: 800,  
                title: '设备管理',  
                method:'get',  
                columns: [[  
                    { field: 'adminName', title: '登录名', width: 300 },
                    { field: 'trueName', title: '用户名', width: 300 },
                    { field: 'mobilePhone', title: '联系电话', width: 200 }
                ]],  
                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>

一般应用程序(.ashx)：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data; 
using System.Text;

namespace Web.Management.ashx
{
    /// <summary>
    /// GetDataFormSql 的摘要说明
    /// </summary>
    public class GetDataFormSql : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            string command = context.Request.QueryString["test"];//前台传的标示值    
            if (command == "add")
            {//调用添加方法    
                //Add(context);//我暂时只是绑定，所以把这些给注释了  
            }
            else if (command == "modify")
            {//调用修改方法    
                //Modify(context);//我暂时只是绑定，所以把这些给注释了  
            }
            else
            {//调用查询方法    
                Query(context);
            }  
           
        }
        public void Query(HttpContext context)
        {
            //调用B层的方法从而获取数据库的Dataset    
            DataSet ds = BRL.BLL.A_admin.GetAllList();
            //将Dataset转化为Datable    
            DataTable dt = ds.Tables[0];
            int count = dt.Rows.Count;
            string strJson = Dataset2Json(ds, count);//DataSet数据转化为Json数据    
            context.Response.Write(strJson);//返回给前台页面    
            context.Response.End();

        }

        public static string Dataset2Json(DataSet ds, int total = -1)
        {
            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)
            {
                //{"total":5,"rows":[  
                json.Append("{\"total\":");
                if (total == -1)
                {
                    json.Append(dt.Rows.Count);
                }
                else
                {
                    json.Append(total);
                }
                json.Append(",\"rows\":[");
                json.Append(DataTable2Json(dt));
                json.Append("]}");
            }
            return json.ToString();
        }

        public static string DataTable2Json(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }

            return jsonBuilder.ToString();
        }  
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

       
    }
    
}