zoukankan      html  css  js  c++  java
  • 【Jqurey EasyUI+Asp.net】----DataGrid数据绑定,以及增、删、改(SQL)

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

    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=" 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',100">
                        ID
                    </th>
                    <th data-options="field:'tName',100">
                        姓名
                    </th>
                    <th data-options="field:'tEmail',100">
                        邮箱
                    </th>
                </tr>
            </thead>
        </table>
        <div id="Div1" class="easyui-panel" title="form Fields" style=" 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。这个我就不贴出来了吧。

  • 相关阅读:
    redis学习
    win2008下c#调用directshow问题
    vs2005升级到vs2010相关问题
    spark-shell 启动失败,显示端口问题
    监控spark-sql 等脚本
    spark 相关配置 shuffle 相关配置选项
    spark on Yarn 语句
    使用hive thriftserver 连接spark sql
    HBase 报错系列之region is not online
    HBase 表迁移中对丢失的表检查使用的语句
  • 原文地址:https://www.cnblogs.com/yfceshi/p/7210967.html
Copyright © 2011-2022 走看看