【Jqurey EasyUI+Asp.net】----DataGrid数据绑定,以及增、删、改(SQL)

原创 2014年06月27日 16:48:11

也懒得打其它字了,直接进入主题吧

1.首先,数据表Rex_Test

ID
int
自增
tName
varchar(10)
姓名
tEmail
varchar(80)
邮箱


2.至于代码里的Jqurey EasyUI包就直接去官网下载吧,当然其它地方也行,这里就不多做说明了。


3.前台显示页面

Default.aspx

<span style="font-size:14px;"><head>
    <title>myWeb</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>
</head>
<body >
    <table id="dg" class="easyui-datagrid" style="width: 700px; height: 300px" data-options="rownumbers:true,onClickRow:ClickRow,singleSelect:true,border:false,pagination:true,url:'Handler3.ashx'">
        <thead>
            <tr>
                <th data-options="field:'ID',width:100">
                    ID
                </th>
                <th data-options="field:'tName',width:100">
                    姓名
                </th>
                <th data-options="field:'tEmail',width:100">
                    邮箱
                </th>
            </tr>
        </thead>
    </table>
    <div id="Div1" class="easyui-panel" title="form Fields" style="width: 1000px; height: 180px;
        float: left;">
        <table>
            <tr>
                <td>
                    姓名:
                </td>
                <td>
                    <input id="n" class="easyui-validatebox" type="text" name="name" data-options="required:true" />
                </td>
            </tr>
            <tr>
                <td>
                    邮箱:
                </td>
                <td>
                    <input id="pr" class="easyui-validatebox" type="text" name="price" data-options="required:true" />
                </td>
            </tr>
            <tr>
                <td>
                    查询:
                </td>
                <td>
                    <input id="sear" class="easyui-validatebox" type="text" name="price" data-options="required:true" />
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()">
                        Add</a>
                </td>
                <td>
                    <a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="refresh()">Refresh</a> 
                    <a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="del()">Delete</a>
                    
                </td>
            </tr>
        </table>
    </div>
    <ul id="tt" class="easyui-tree">
    </ul>
    <script type="text/javascript">

        $(document).ready(function ()
        {
            $.ajax({
                url: "Handler3.ashx",
                type: "get",
                dataType: "json",
                error: function (request, message, ex)
                {
                    alert(message + request + ex);
                },
                success: function (returnValue)
                {


                    $("#tt").tree("loadData", returnValue);
                }
            })
        });


        function searchs()
        {
            $.ajax({
                url: "refresh.ashx",
                type: "post",
                data: "fac=" + $("#sear").val(),
                // data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(),
                error: function (request, message, ex)
                {
                    alert(message + request + ex);
                },
                success: function (returnValue)
                {
                    alert(returnValue);
                    $('#dg').datagrid('reload');
                }
            })
        }


        function add()
        {
            $.ajax({
                url: "add.ashx",
                type: "get",
                data: "name=" + $("#n").val() + "&email=" + $("#pr").val(),
                error: function (request, message, ex)
                {
                    alert(message + request + ex);
                },
                success: function (returnValue)
                {

                    alert(returnValue);
                    $('#dg').datagrid('reload'); 

                }
            })
        }
        function del()
        {
            $.ajax({
                url: "del.ashx",
                type: "get",
                data: "id=" + $("#dg").datagrid("getSelected").ID,
                error: function (request, message, ex)
                {
                    alert(message + request + ex);
                },
                success: function (returnValue)
                {
                    // 
                    alert(returnValue);
                    $('#dg').datagrid('reload'); 

                }
            })

        }

        function ClickRow(rowIndex, rowData)
        {
            //            alert('这是Name:' + rowData.Name + '这个是ID:' + rowData.ID);            
            if (rowData) {

                //document.getElementById("ii").value = rowData.ID;
                document.getElementById("n").value = rowData.tName;
                document.getElementById("pr").value = rowData.tEmail;
            }
        }


        function refresh()
        {
            $.ajax({
                url: "refresh.ashx",
                type: "get",
                data: "id=" + $("#dg").datagrid("getSelected").ID + "&name=" + $("#n").val() + "&email=" + $("#pr").val(),
                // data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(),
                error: function (request, message, ex)
                {
                    alert(message + request + ex);
                },
                success: function (returnValue)
                {
                    alert(returnValue);
                    $('#dg').datagrid('reload'); 
                }
            })
        }
    </script>
</body>
</html></span>


4. Handler3.ashx(初始绑定)

<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="Handler3" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.IO;

public class Handler3 : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
       
            Query(context);


    }
    public void Query(HttpContext context)
    {
        //调用B层的方法从而获取数据库的Dataset  
        SqlHelp sqla = new SqlHelp();
        string strfaca = "select * from Rex_Test";
        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;
        }
    }

}</span>

5.add.ashx(新增数据)


<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="add" %>

using System;
using System.Web;

public class add : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string result = string.Empty;
        string name = context.Request.QueryString["name"];
        string email = context.Request.QueryString["email"];

        SqlHelp sqla = new SqlHelp();
        string sqlString = "insert into Rex_Test(tName,tEmail) values('"+name+"','"+email+"')";
        bool aa = sqla.ExecuteNonQuery(sqlString);
        sqla.SqlClose();
        if (aa)
        {
            result = "添加纪录成功";
        }
        context.Response.Write(result);


    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}</span>

6.del.ashx(删除数据)

<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="del" %>

using System;
using System.Web;

public class del : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string result = string.Empty;
        string id = context.Request.QueryString["id"];


        SqlHelp sqla = new SqlHelp();
        string sqlString = "delete from Rex_Test where ID='" + id + "'";
        bool aa = sqla.ExecuteNonQuery(sqlString);
        sqla.SqlClose();
        if (aa)
        {
            result = "删除成功";
        }
        context.Response.Write(result);


    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}</span>

7.refresh.ashx(更新数据)

<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="refresh" %>

using System;
using System.Web;

public class refresh : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string result = string.Empty;
        string id = context.Request.QueryString["id"];
        string name = context.Request.QueryString["name"];
        string email = context.Request.QueryString["email"];


        SqlHelp sqla = new SqlHelp();
        string sqlString = "update  Rex_Test set tName='"+name+"',tEmail='"+email+"'  where ID='" + id + "'";
        bool aa = sqla.ExecuteNonQuery(sqlString);
        sqla.SqlClose();
        if (aa)
        {
            result = "更新成功";
        }
        context.Response.Write(result);


    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}</span>

8.基本上这个样子就差不多了,更加细化的东西还没来得及做,下次弄好了才发吧。

哦,对了,代码里的SqlHelp sqla = new SqlHelp();其实就是个sql操作类,自己写的,网上有很多这种的SqlHelper,这个我就不贴出来了吧。

easy ui datagrid 增删改查+分页 asp.net

  • 2014年04月27日 09:49
  • 3.11MB
  • 下载

【Jqurey EasyUI+Asp.net】---DataGrid的增、删、改、查

前面是写了两篇,但都不怎么完整,比较才刚开始学这个,都是摸着石头过河,一步一步的来。这两天终于把DataGrid的增删改查融合到一起了,所以分享一下,希望对和我一样的初学者都点帮助。 直接主题吧。 还...
  • yangmingxing980
  • yangmingxing980
  • 2014年07月01日 09:40
  • 2009

ASP.NET EasyUI实现增删改查

C# EasyUI增删改差 ,ASP.NET
  • qq_35732799
  • qq_35732799
  • 2017年01月10日 11:26
  • 1625

[转载](ASP.NET)修改和删除DataGrid行——数据库访问

(ASP.NET)修改和删除DataGrid行——数据库访问        本程序涉及到数据库的添加,修改和删除操作。        懒得写了,把界面贴出来,照着界面画就可以了。本例数据库:SqlSe...
  • netboyfly
  • netboyfly
  • 2005年03月16日 17:09
  • 755

EasyUI 增删改查完全详细

本实例使用EasyUI编写,涵盖eaui的各种元素的创建,验证限制,事件,ajax等
  • c657826604
  • c657826604
  • 2016年04月22日 09:52
  • 12052

Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目

这个过程很是漫长,在调试的过程中,遇到了各种各样的问题,主要是浏览器的缓存问题耽误了好长时间,龙哥给了大力的支持,通过实现此功能,对ajax,一般处理程序的理解深刻多了;框架的使用提高我们开发的效率;...
  • lishehe
  • lishehe
  • 2013年11月20日 19:46
  • 77978

使用EasyUI实现添加和删除功能

增删该查是任何一个项目都少不了的功能操作,这篇博文主要简介一下如何使用EasyUI实现添加和删除功能。         首先,导入EasyUI的js代码: ...
  • zjx86320
  • zjx86320
  • 2014年12月21日 22:12
  • 10435

EasyUI Datagrid增删改查

本教程重点在于如何在现有的easyui datagrid报表中增加增删改查功能,通过现有的代码直接复制粘贴即可,无需手动敲击代码,实现快速部署应用。        注意:如果需要视频操作教程,...
  • chen289251809
  • chen289251809
  • 2016年11月03日 22:31
  • 438

jquery easyui 增删改查、排序

  • 2012年03月29日 15:25
  • 656KB
  • 下载

jquery对json数据进行增删改查的例子

来自:http://zhidao.baidu.com/question/434914887 jquery对json数据进行增删改查的例子,求高手指点,我是新手,没怎么接触过 json数据的...
  • ArvinStudy
  • ArvinStudy
  • 2013年04月06日 21:58
  • 8332
收藏助手
不良信息举报
您举报文章:【Jqurey EasyUI+Asp.net】----DataGrid数据绑定,以及增、删、改(SQL)
举报原因:
原因补充:

(最多只允许输入30个字)