Jquery easyui从零单排之datagrid整表编辑保存到数据库

最近一直在利用空余时间,对Jquery EasyUI进行学习。前几篇都是在讲datagrid,今天这篇还是讲它的,是对datagrid进行编辑,然后把新数据全部保存到数据库的问题。


这个地方还是花了好长的时间,主要是在前台把循环读取datagrid的数据转换为json数据,以及json传递问题。


先在前台添加datagrid,这个在这里就不用再复述了。


    Start from zero
    
    
    
    
    
    


    
LoginID
UserName Sex Department Age
Jquery easyui从零单排之datagrid整表编辑保存到数据库_第1张图片
对于datagrid的可编辑,主要是在它的行单击事件中实现的,上面代码中的onClickRow(index),这个可以去详细查看官网的实例。


保存事件accept()函数才是关键,既然要重新保存数据,就要先获取整个datagrid的数据$('#dg').datagrid('getRows'),然后你要想啊,怎么才能把这些数据传递到一般处理程序那里呢,我自己原本是想把这些数据弄成一个数组传过去,可是搞了半天没成功,后面就换了思路,试试json传递,没想还成功了。

var rowsData = $('#dg').datagrid('getRows');
            var json = [];
            var loc;
            $.each(rowsData, function (i)
            {
                loc = { 
                    "ID":rowsData[i].ID,
                    "LoginID": rowsData[i].LoginID,
                    "UserName": rowsData[i].UserName,
                    "Sex": rowsData[i].Sex,
                    "Department": rowsData[i].Department,
                    "Age": rowsData[i].Age
                };
                json.push(loc);
            });
            json = JSON.stringify(json); //转换成json数据 
至于传递这里我写得有点丑,或者是丑到爆了,有会的兄弟朋友请多多指教,代码如下:

    $('#dg').datagrid({
                url: 'Handler2.ashx?test=' + test+ "&jj=" + json,
                method: 'get'
            })


然后一般处理程序,主要是就是接收json数据,然后转换json数据,用sql语句保存至数据库。

public class Handler2 : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string text = context.Request.QueryString["test"];//前台传的标示值 

        if (string.IsNullOrEmpty(text))//当为空时,表示直接绑定datagrid
        {
            SqlHelp sqla = new SqlHelp();
            string stra = "select top 5 * from tTestTable";

            DataTable dta = sqla.GetDataTable(stra);
            sqla.SqlClose();

            string json = JsonConvert.SerializeObject(dta);

            context.Response.Write(json);
        }
        else if (text == "test")//保存数据
        {
            string josnArray = context.Request.Params["jj"].ToString();//获取传递过来的json数据
            DataTable dt = JsonConvert.DeserializeObject(josnArray);//把json数据转换为DataTable
               foreach (DataRow dr in dt.Rows)
            {
                SqlHelp sqla = new SqlHelp();
                string stra = "update tTestTable set UserName='" + dr["UserName"].ToString() + "' where ID='" + dr["ID"].ToString() + "'";
                bool aa = sqla.ExecuteNonQuery(stra);
                sqla.SqlClose();
            }
        }


    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

搞了这么久,功能是实现了,但是远远算不上成功,为什么呢,因为我发现了一个bug,在其他浏览器下操作都是没有问题,但是在IE下操作之后,存到数据库里该字段下的汉字都变成了问号“?”,如下图

数据表截图:

Jquery easyui从零单排之datagrid整表编辑保存到数据库_第2张图片


页面显示截图:

Jquery easyui从零单排之datagrid整表编辑保存到数据库_第3张图片
这种情况只存在于用IE浏览器操作(IE浏览器下操作,编辑汉字就会保存为这种问号“?”,数字和字母不会),用其他浏览器都正常,找了好久的问题,感觉不是数据库的问题,应该是IE的问题,原本觉得是编码的问题,我尝试了也没啥反应,所在在这里提出来,希望大家探讨下,也请教下会的朋友,谢谢。

你可能感兴趣的:(Jquery,easyui从零单排)