【Jqurey EasyUI+Asp.net】---- datagrid 绑定数据库(SQL)

来源：互联网发布：live2d mac有哪些编辑：程序博客网时间：2024/06/05 11:44

去年下半年毕业来到现在的公司，负责开发OA系统，一个人什么都得自己做，没人能给你哪怕一点帮助。真心感觉很不适应，特别是没人带，完全两眼瞎黑，都靠自己乱摸。

时间还是过的蛮快的，8月份就快满一年了。一切都慢慢的前行着......

言归正传，系统也慢慢的开发了一部分，先就是一些比较简单的模块，像公告、新闻、员工管理，文件管理、车辆使用管理之类的。说实话，所有东西都自己瞎摸，搞得很不规范，这个是我自己心里很明白的，不是不重视，是暂时还没那个能力。所以最近时间稍微有一点点松弛，就马上开始把界面功能在优化一下，原来的界面那是真心不能看，呵呵...

所以就想在网上找一些比较好用而且配置使用方便一点的东西，先是找到了fineui这个，但是配置了好久，老是失败，也就放弃了它。然后遇到了Jquery EasyUI ，也是完全不懂，到处看资料，先把Jqurey又大概看了以便，然后又学习了一下ajax，才来开始使用这个Jqurey EasyUI，但是人太笨了，也配置了好久才弄好，主要就是数据绑定控件的绑定问题，开始真心瞎。为了不让后来者走我这样的弯路，故写下这边东西，给大家借鉴，我就是个小白，也刚学Jqurey EasyUI这个一会儿，肯定写得不是那么好，请见谅。

1.先新建一个页面Default.aspx

主要代码如下：

<head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>Complex DataGrid - jQuery EasyUI Demo</title>    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">    <link rel="stylesheet" type="text/css" href="demo.css">    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>    <script type="text/javascript">        $(document).ready(function ()        {            $('#tdd').datagrid({                title: '统计 报表',                iconCls: 'icon-save',                width: 1000,                height: 550,                url: "Handler.ashx",//接收一般处理程序返回来的json数据                columns: [[                    { title: '统计', colspan: 6 },                    { field: 'OID', title: '标题', width: 100, align: 'center', rowspan: 2,                        formatter: function (value, rec)                        {                            return '<span style="color:red">Edit Delete</span>';                        }                    }                ], [                { field: 'LoginID', title: '工号', width: 100 },//field后面就改为你自己的数据表字段，然后可以调整宽度什么的                { field: 'UserName', title: '姓名', width: 100, align: 'right' },                { field: 'Sex', title: '性别', width: 100, align: 'left' },                { field: 'Department', title: '部门', width: 100 },                { field: 'Post', title: '职务', width: 100 },                { field: 'Degree', title: '学历', width: 100 }            ]],                pagination: true,                rownumbers: true            });        });    </script></head><body>    <table id="tdd" align="center">    </table></body></html>

里的jquery-easyui-1.3.6包是我在官网下的，网上其他地方也有很多

2.再新建一个一般处理程序Handler.ashx

主要代码如下：

<%@ WebHandler Language="C#" Class="Handler2" %>using System;using System.Web;using System.Data;using System.Data.SqlClient;using System.Text;using System.IO;public class Handler2 : 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          SqlHelp sqla = new SqlHelp();//这个是我自己写的一个sqlhelp类，其实sql执行语句，网上有很多这样的类        string strfaca = "select * from tOAPower";//这里根据你自己的情况修改就行了        DataSet ds = sqla.GetDataSet(strfaca);        //将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();    }    /// <summary>    /// DataSet转换成Json格式     /// </summary>     /// <paramname="ds">DataSet</param>    ///<returns></returns>     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();    }    /// <summary>     /// dataTable转换成Json格式     /// </summary>     /// <paramname="dt"></param>     ///<returns></returns>     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;        }    }}

大概就这个样子吧，基本上完成了对Jqurey EasyUI DataGrid的数据绑定，要有哪位大神还有更好的方法，希望可以分享给大家，我还有很多地方需要学习，谢谢。

0 0